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 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 im Theme-Code pro Abschnitt festgelegt. Wenn du ein älteres Theme, ein Custom-Theme oder einen Abschnitt bearbeitest, der nicht für verlinkbare Bilder ausgelegt ist, existiert das Feld schlichtweg nicht. Du hast die Wahl, entweder den Liquid-Code und das Schema des Abschnitts zu bearbeiten, um eine Link-Einstellung hinzuzufügen, oder direkt Fudge zu nutzen, das dies für dich erledigt.
In modernen Online Store 2.0-Themes enthält der Spalten-Block des mehrspaltigen Abschnitts (Multicolumn) normalerweise ein Link-Feld für jede Spalte. Klicke auf einen Spalten-Block, suche in den Einstellungen nach "Link" und trage die Ziel-URL ein. Fehlt dies in deinem Theme, ist eine Code-Anpassung am Abschnitt nötig.
Das native Link-Feld im Theme-Editor hat keinen Schalter für "In neuem Tab öffnen" – Links werden immer im selben Fenster geöffnet. Für einen neuen Tab musst du den Code des Abschnitts bearbeiten und target="_blank" rel="noopener" zum Anchor-Tag hinzufügen, oder ein Tool verwenden, mit dem du das Link-Ziel in den Abschnittseinstellungen festlegen kannst.
Die meisten Slideshow-Abschnitte haben ein Link-Feld in jedem Slide-Block – klicke auf den Slide und suche in den Einstellungen nach "Link". Wenn dein Theme das nicht hat, musst du den Liquid-Code der Slideshow anpassen, um jedes Slide-Bild in ein Anchor-Tag mit einer individuellen URL-Einstellung zu packen.
Ein verlinktes Bild macht das gesamte Bild anklickbar, ohne dass ein sichtbarer Button nötig ist – clean und minimalistisch, aber weniger offensichtlich interaktiv. Ein Button fügt einen expliziten Call-to-Action hinzu, der durch Text und Styling "Klick mich" signalisiert. Für Promo-Banner ist oft die Kombination aus verlinktem Bild UND gestyltem Button am effektivsten.
