Das Wichtigste in Kürze
- Die meisten Bild-Blöcke im Theme-Editor haben ein integriertes Link-Feld — die schnellste Methode für Abschnittsbilder.
- Füge dein Bild im Shopify-Seiten-Editor ein und wechsle dann in die HTML-Ansicht, um es in ein Anchor-Tag einzuschließen.
- Bilder in Produktkarten verlinken automatisch auf ihre Produktseite — keine Einrichtung nötig.
- Mit Fudge kannst du jedes Bild anklickbar machen und mit einem benutzerdefinierten Ziel versehen, auch in Abschnitten ohne natives Link-Feld.
Ein Bild anklickbar zu machen, ist eine häufige Anforderung – für Promo-Banner, Markenlogos und Inhaltsblöcke, die gleichzeitig als Navigation dienen. Die Methode hängt davon ab, wo sich das Bild in deinem Store befindet.
Warum du uns vertrauen kannst
Wir haben hunderte Shopify-Storefronts erstellt und angepasst. Wir haben außerdem Fudge entwickelt — einen KI-gestützten Storefront-Editor mit einer 5.0-Bewertung im Shopify App Store.
Methode 1 — Nutze das Link-Feld im Theme Editor
Dies ist die schnellste Methode und funktioniert für die meisten Bilder in Abschnitten.
Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.
Schritt 2. Klicken Sie auf den Abschnitt oder Block, der Ihr Bild enthält.
Schritt 3. Suchen Sie im Einstellungsbereich nach einem Feld für Link oder URL. Bildblöcke in Abschnitten wie „Bild mit Text“, „Image Banner“ und „Ausgewählte Kategorie“ enthalten fast immer eines.
Schritt 4. Geben Sie die Ziel-URL ein. Verwenden Sie einen relativen Pfad für interne Links (/products/mein-produkt) oder die vollständige URL für externe Links.
Schritt 5. Speichern.
Das Bild ist nun anklickbar und verlinkt auf die von Ihnen festgelegte URL.
Passend dazu: Fudge Store Editor.
Passend dazu: Text in Shopify verlinken.
Falls kein Link-Feld in den Block-Einstellungen vorhanden ist, unterstützt der Abschnitt Ihres Themes dies für dieses Bild nicht nativ. Verwenden Sie in diesem Fall Methode 2 oder 3.
Wie füge ich einen anklickbaren Link in ein Bild ein?
Wenn du Bilder auf einer Shopify-Seite (Onlineshop → Seiten) hinzufügst, hat der Standard-Seiteneditor keinen Button für „Bild-Links“. Du musst die HTML-Ansicht verwenden:
Schritt 1. Füge dein Bild über das Bild-Icon in der Toolbar des Editors ein.
Schritt 2. Klicke auf den < > oder „HTML anzeigen“-Button, um in die Quellcode-Ansicht zu wechseln.
Schritt 3. Suche nach deinem Bild-Tag — es sieht so aus: <img src="..." alt="...">.
Schritt 4. Umschließe es mit einem Anchor-Tag:
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner" />
</a>Schritt 5. Wechsle zurück in die Rich-Text-Ansicht und speichere.
Das Bild funktioniert nun als anklickbarer Link. Wenn du die HTML-Ansicht schon mal offen hast, lohnt es sich für SEO auch, deinem Bild Alt-Text hinzuzufügen.
So fügst du einen Link zu einem Bild in einer Custom Section hinzu
Bilder in benutzerdefinierten Abschnitten oder Template-Dateien verwenden die Liquid-Syntax. Ein verlinktes Bild in Liquid sieht so aus:
<a href="{{ section.settings.image_link }}">
{{ section.settings.image | image_url: width: 1200 | image_tag }}
</a>Dies erfordert das Bearbeiten der Liquid-Datei des Abschnitts (Onlineshop → Themes → Aktionen → Code bearbeiten) und dessen Schema, um die Einstellung image_link hinzuzufügen. Dies ist Arbeit auf Code-Ebene.
Passend dazu: Linkfarbe in Shopify ändern.
Verlinken Produktbilder automatisch zum Produkt?
Ja. Produktbilder auf Kategorieseiten, in Grids für vorgestellte Produkte und in Abschnitten für ähnliche Produkte verlinken standardmäßig direkt auf die jeweiligen Produktseiten. Sie müssen hier keinen Link manuell hinzufügen.
Falls ein Produktbild angezeigt wird, aber nicht anklickbar ist, befindet es sich möglicherweise in einem benutzerdefinierten Abschnitt oder einem statischen Bildblock anstatt in einer Produktkarte.
Passend dazu: Hero Image in Shopify ändern.
So verlinkst du ein Logo-Bild mit der Homepage
Die meisten Shopify-Themes verlinken das Header-Logo automatisch mit der Startseite. Wenn deins das nicht tut oder du ein Logo-Bild außerhalb des Headers verwendest:
Gehe in den Theme Editor → klicke auf die Header-Section → suche nach den Einstellungen für den Logo-Block. Dort gibt es vielleicht ein Feld für den Logo-Link. Wenn das Theme das Logo automatisch verlinkt, siehst du dieses Feld nicht als konfigurierbare Option – es ist dann hardcoded.
Wenn du ein Logo-Bild an einer anderen Stelle auf der Seite platzierst, umschließe es mit einem Anchor-Tag, das auf / verweist:
<a href="/">
<img src="{{ 'logo.png' | asset_url }}" alt="Brand logo" />
</a>Mit Fudge anklickbare Bilder hinzufügen
Wenn das Bild, das du verlinken möchtest, in einer Section liegt, die kein Link-Feld hat, beschreibe es einfach Fudge:
“Verlinke das Promo-Banner-Bild im Hero-Bereich der Startseite mit /collections/new-arrivals.”
Fudge bearbeitet den Code der Section, um den Link hinzuzufügen, und erstellt ein Einstellungsfeld, damit du das Ziel künftig selbst direkt über den Theme Editor anpassen kannst. Die Änderung wird zunächst als Entwurf zur Überprüfung erstellt, bevor etwas live geht.
FAQ
Das Link-Feld wird im Theme-Code pro Section festgelegt. Wenn du ein älteres Theme, ein Custom Theme oder eine Section bearbeitest, die nicht für verlinkbare Bilder gedacht war, existiert das Feld schlichtweg nicht. Deine Möglichkeiten sind, entweder den Liquid-Code und das Schema der Section zu bearbeiten, um eine Link-Einstellung hinzuzufügen, oder Fudge zu nutzen, das dies für dich übernimmt.
In modernen Online Store 2.0-Themes enthält der Spalten-Block der Multicolumn-Section normalerweise ein Link-Feld für jede Spalte. Klicke auf einen Spalten-Block, suche in den Einstellungen nach "Link" und gib die Ziel-URL ein. Wenn deiner Multicolumn-Section das fehlt, musst du den Code der Section anpassen.
Das standardmäßige Link-Feld im Theme Editor hat keinen Schalter für "in neuem Tab öffnen" – es öffnet sich immer im selben Fenster. Für einen neuen Tab musst du den Code der Section bearbeiten und target="_blank" rel="noopener" zum Anchor-Tag hinzufügen. Alternativ kannst du ein Tool verwenden, mit dem du das Link-Ziel als Section-Einstellung festlegen kannst.
Die meisten Slideshow-Sections haben ein Link-Feld bei jedem Slide-Block – klicke auf den Slide und suche in den Einstellungen nach "Link". Wenn es das bei dir nicht gibt, musst du den Liquid-Code der Slideshow-Section bearbeiten, um jedes Slide-Bild mithilfe einer URL-Einstellung pro Slide in ein Anchor-Tag einzubetten.
Ein verlinktes Bild macht das gesamte Bild anklickbar, ohne dass ein visueller Button nötig ist – clean und minimalistisch, aber weniger offensichtlich interaktiv. Ein Button bietet einen expliziten Call-to-Action, der mit Text und Styling ein klares "Klick mich" signalisiert. Für Promo-Banner ist oft die Kombination aus verlinktem Bild UND gestyltem Button die stärkste Lösung.
