Wichtigste Erkenntnisse
- Einige Bild-Blöcke im Theme Editor, wie z.B. Multicolumn-Spalten und Slideshow-Slides, haben ein integriertes Link-Feld. Das ist die schnellste Methode für Bilder in Abschnitten (Sections).
- Im Shopify Seiten-Editor fügst du dein Bild ein und wechselst dann in die HTML-Ansicht, um es in einen Anchor-Tag (
<a>) zu packen.- Bilder auf Produktkarten verlinken automatisch auf ihre Produktseite — keine Einrichtung nötig.
- Fudge kann jedes Bild mit einem benutzerdefinierten Ziel anklickbar machen, auch in Abschnitten ohne natives Link-Feld.
Um ein Bild in Shopify anklickbar zu machen, öffne den Theme Editor, wähle den Abschnitt oder Block des Bildes aus und fülle das Link-Feld aus. Für Bilder im Inhalt einer Seite packst du das Bild in der HTML-Ansicht in einen <a>-Tag.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify Storefronts erstellt und angepasst. Wir haben auch Fudge entwickelt, den KI-Operator für Shopify Stores, mit einer Bewertung von 4.9 im Shopify App Store.
Methode 1 — Nutze das Link-Feld im Theme-Editor
Das ist die schnellste Methode und funktioniert für Abschnitts-Bilder, die eine Link-Einstellung haben.
Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.
Schritt 2. Klicke auf den Abschnitt oder Block, der dein Bild enthält.
Schritt 3. Suche im Einstellungs-Panel nach einem Link- oder URL-Feld. Einige Abschnitte, wie z.B. Multicolumn und Slideshow-Slides in vielen Themes, enthalten so ein Feld. Beim Dawn-Theme (Image banner und Image with text) ist jedoch nur der Button verlinkt.
Schritt 4. Gib die Ziel-URL ein. Nutze einen relativen Pfad für interne Links (/products/my-product) oder die vollständige URL für externe Links.
Schritt 5. Speichern.
Das Bild ist jetzt anklickbar und verlinkt auf die von dir festgelegte URL.
Wenn es kein Link-Feld gibt in den Block-Einstellungen, unterstützt der Abschnitt deines Themes dies nativ für das Bild nicht. Nutze dann Methode 2 oder 3.
Für Text-Links, siehe Einen Link zu Text in Shopify hinzufügen.
Wie füge ich einen klickbaren Link in ein Bild ein?
Wenn du Bilder innerhalb einer Shopify-Seite hinzufügst (Onlineshop → Seiten), hat der Standard-Seiteneditor keinen „Bild verlinken“-Button. Du musst die HTML-Ansicht nutzen:
Schritt 1. Füge dein Bild über das Bild-Icon in der Editor-Werkzeugleiste ein.
Schritt 2. Klicke auf den < > oder „HTML anzeigen“-Button, um in die Quellcode-Ansicht zu wechseln.
Schritt 3. Finde dein Bild-Tag – es sieht ungefähr so aus: <img src="..." alt="...">.
Schritt 4. Packe es in ein 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 klickbarer Link. Wenn du schon die HTML-Ansicht offen hast, lohnt es sich auch direkt, deinem Bild Alt-Text für SEO hinzuzufügen.
So fügst du in einem benutzerdefinierten Abschnitt einen Link zu einem Bild hinzu
Bilder in Custom Sections oder Template-Dateien verwenden 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>Dafür musst du die Liquid-Datei der Section und das Schema bearbeiten, um die image_link-Einstellung hinzuzufügen: Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Code bearbeiten. Das ist Arbeit auf Code-Ebene.
Um die Links selbst zu stylen, siehe Link-Farbe in Shopify ändern.
Verlinken Produktbilder automatisch auf das Produkt?
Ja. Bilder auf Produktkarten in Kategorie-Seiten (Collections), Grids mit vorgestellten Produkten und Abschnitten für ähnliche Produkte verlinken standardmäßig direkt auf ihre Produktseiten. Du musst also keinen Link manuell hinzufügen.
Wenn ein Produktbild angezeigt wird, aber nicht anklickbar ist, befindet es sich wahrscheinlich in einer Custom Section oder einem statischen Bild-Block anstatt in einer Produktkarten-Komponente.
Um das Hero-Bild selbst auszutauschen, siehe Hero-Bild in Shopify ändern.
So verlinkst du ein Logo-Bild auf die Startseite
Die meisten Shopify Themes verlinken das Header-Logo automatisch auf die Startseite. Wenn deins das nicht tut, oder wenn du ein Logo-Bild außerhalb des Headers verwendest:
Im Theme Editor → klicke auf den Header-Abschnitt → suche nach den Einstellungen für den Logo-Block. Dort gibt es möglicherweise ein Logo-Link-Feld. Wenn das Theme das Logo automatisch verlinkt, siehst du es nicht als konfigurierbares Feld – es ist hardcoded.
Für ein Logo-Bild, das an einer anderen Stelle platziert wird, packe es in einer Section- oder Snippet-Datei in einen Anchor-Tag, der auf / verweist (Liquid funktioniert nicht in der HTML-Ansicht des Seiten-Editors):
<a href="/">
<img src="{{ 'logo.png' | asset_url }}" alt="Brand logo" />
</a>Fudge nutzen, um klickbare Bilder hinzuzufügen
Wenn das Bild, das du verlinken möchtest, in einer Section liegt, die kein Link-Feld hat, beschreibe es einfach Fudge, dem KI-Operator für Shopify Stores:
“Verlinke das Promo-Banner-Bild in der Hero-Section auf 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 in Zukunft selbst über den Theme Editor aktualisieren kannst. Die Änderung wird als Entwurf zur Überprüfung erstellt, bevor irgendetwas live geht.
FAQ
Warum hat mein Bild im Theme Editor kein Link-Feld?
Das Link-Feld wird pro Section im Theme-Code festgelegt. Wenn du ein älteres Theme, ein Custom Theme oder eine Section bearbeitest, die nicht für verlinkbare Bilder ausgelegt war, existiert das Feld schlichtweg nicht. Deine Optionen sind, entweder den Liquid-Code + das Schema der Section zu bearbeiten, um eine Link-Einstellung hinzuzufügen, oder Fudge zu nutzen, um das für dich zu übernehmen.
Wie mache ich ein Multicolumn-Bild anklickbar?
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 seinen Einstellungen nach "Link" und gib die Ziel-URL ein. Wenn deiner Multicolumn Section im Theme dies fehlt, benötigst du eine Code-Änderung für die Section.
Kann ich ein Bild so verlinken, dass es in einem neuen Tab geöffnet wird?
Das native Link-Feld des Theme Editors enthält 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, oder ein Tool verwenden, mit dem du das Link-Ziel als Section-Einstellung festlegen kannst.
Wie verlinke ich ein Bild in einer Slideshow oder einem Karussell?
Die meisten Slideshow-Sections enthalten ein Link-Feld für jeden Slide-Block – klicke auf den Slide und suche in den Einstellungen nach "Link". Wenn deine das nicht hat, musst du den Liquid-Code der Slideshow-Section bearbeiten, um jedes Slide-Bild in einen Anchor-Tag zu packen, der eine URL-Einstellung pro Slide nutzt.
Was ist der Unterschied zwischen der Verlinkung eines Bildes und dem Hinzufügen eines Buttons?
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 durch Text und Styling "klick mich" signalisiert. Für Promo-Banner ist oft die Kombination aus verlinktem Bild UND gestyltem Button die stärkste.
