Das Wichtigste auf einen Blick
- Die meisten Bild-Blöcke im Theme Editor haben ein integriertes Link-Feld — die schnellste Methode für Bilder in Sektionen.
- Im Shopify-Seiten-Editor fügst du dein Bild ein und wechselst dann in die HTML-Ansicht, um es mit einem Anchor-Tag zu umschließen.
- Produktbilder verlinken automatisch auf ihre Produktseite — keine Einrichtung erforderlich.
- Fudge kann jedes Bild mit einem benutzerdefinierten Ziel anklickbar machen, auch solche in Sektionen ohne natives Link-Feld.
Ein Bild anklickbar zu machen, ist ein häufiger Wunsch – für Werbebanner, Markenlogos und Content-Blö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 innerhalb einer Shopify-Seite hinzufügst (Onlineshop → Seiten), hat der Standard-Editor keinen Button für „Bild-Links“. Du musst die HTML-Ansicht nutzen:
Schritt 1. Füge dein Bild über das Bild-Icon in der Editor-Toolbar ein.
Schritt 2. Klicke auf den < > Button oder „HTML anzeigen“, um in die Quellcode-Ansicht zu wechseln.
Schritt 3. Suche deinen Image-Tag — er sieht etwa so aus: <img src="..." alt="...">.
Schritt 4. Umschließe ihn mit einem Anchor-Tag:
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner">
</a>Schritt 5. Wechsle zurück zur Rich-Text-Ansicht und speichere.
Das Bild fungiert nun als anklickbarer Link. Wenn du die HTML-Ansicht schon offen hast, lohnt es sich auch gleich Alt-Text zu deinem Bild hinzuzufügen, um dein SEO zu verbessern.
Verwandt: Change Link Color in Shopify.
Verwandt: Add a Link to Text in Shopify.
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 Homepage. Falls deins das nicht tut oder du ein Logo außerhalb des Headers verwendest:
Im Theme Editor → klicke auf die Header-Sektion → suche nach den Einstellungen für den Logo-Block. Dort gibt es eventuell ein Logo-Link-Feld. Wenn das Theme das Logo automatisch verlinkt, siehst du es nicht als konfigurierbares Feld – es ist dann fest im Code programmiert.
Für ein Logo-Bild an einer anderen Stelle der Seite umschließe es mit einem Anchor-Tag, der auf / zeigt:
<a href="/">
<img src="{{ 'logo.png' | asset_url }}" alt="Markenlogo">
</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 pro Section im Theme-Code festgelegt. Wenn du ein älteres Theme, ein Custom Theme oder eine Section bearbeitest, die nicht für verlinkbare Bilder vorgesehen war, existiert das Feld schlichtweg nicht. Deine Optionen sind: Entweder du bearbeitest den Liquid-Code + Schema der Section, um eine Link-Einstellung hinzuzufügen, oder du nutzt Fudge, um das für dich zu erledigen.
In modernen Online Store 2.0 Themes enthält der Column-Block der Multicolumn-Section normalerweise ein Link-Feld für jede Spalte. Klicke auf einen Column-Block, suche in den Einstellungen nach "Link" und gib die Ziel-URL ein. Wenn deiner Multicolumn-Section dies fehlt, ist eine Code-Änderung an der Section nötig.
Das native Link-Feld im Theme Editor hat keinen "In neuem Tab öffnen"-Schalter – Links öffnen sich immer im selben Fenster. Für einen neuen Tab musst du den Section-Code bearbeiten und target="_blank" rel="noopener" zum Anchor-Tag hinzufügen. Alternativ nutzt du ein Tool, das es dir ermöglicht, das Link-Ziel als Einstellung festzulegen.
Die meisten Slideshow-Sections enthalten ein Link-Feld bei jedem Slide-Block. Klicke auf das Slide und suche in den Einstellungen nach "Link". Wenn deine das nicht hat, musst du den Liquid-Code der Slideshow bearbeiten, um jedes Slide-Bild mit einer separaten URL-Einstellung pro Slide in einen Anchor-Tag einzupacken.
Ein verlinktes Bild macht das gesamte Bild klickbar, ganz ohne visuellen Button – clean und minimalistisch, aber nicht so 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 beides zusammen – also ein verlinktes Bild UND ein gestylter Button – die stärkste Kombination.
