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 Sektionen.
Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.
Schritt 2. Klicke auf die Sektion oder den Block, der dein Bild enthält.
Schritt 3. Suche im Einstellungsmenü nach einem Link- oder URL-Feld. Bild-Blöcke in Sektionen wie „Bild mit Text“, „Banner“ und „Ausgewählte Kollektion“ enthalten fast immer eines.
Schritt 4. Gib die Ziel-URL ein. Nutze 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 dir eingestellte URL.
Falls kein Link-Feld vorhanden ist, unterstützt die Sektion deines Themes dies für dieses Bild nicht nativ. Nutze 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.
So fügst du einen Link zu einem Bild in einer Custom Section hinzu
Bilder in Custom Sections oder Template-Dateien nutzen 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 der Sektion (Onlineshop → Themes → Aktionen → Code bearbeiten) und deren Schema, um die Einstellung image_link hinzuzufügen. Das ist Arbeit auf Code-Ebene.
Verlinken Produktbilder automatisch zum Produkt?
Ja. Produktbilder in Kollektionsseiten, Rastern für ausgewählte Produkte und Sektionen für ähnliche Produkte verlinken standardmäßig direkt auf die jeweiligen Produktseiten. Du musst hier keinen Link manuell hinzufügen.
Falls ein Produktbild angezeigt wird, aber nicht anklickbar ist, befindet es sich eventuell in einer Custom Section oder einem statischen Bild-Block statt in einer Produktkarten-Komponente.
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 Sektion liegt, die kein Link-Feld hat, beschreibe es einfach Fudge:
„Verlinke das Werbebanner-Bild in der Hero-Sektion der Startseite auf /collections/neuheiten.“
Fudge bearbeitet den Code der Sektion, um den Link hinzuzufügen, und erstellt ein Einstellungsfeld, damit du das Ziel künftig selbst im Theme Editor ändern kannst. Die Änderung wird als Entwurf zur Überprüfung erstellt, bevor sie live geht.
