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 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.
