Tutorials

Bild-Banner klickbar machen [2025 Easy Guide]: So geht’s einfach & schnell

Melden

Hier ist ein aktuelles Tutorial für das Jahr 2025, wie du deinen Bild-Banner (speziell in Shopify-Themes wie "Dawn") klickbar machst.

Ein klickbarer Bild-Banner ist einer der wichtigsten Hebel für eine gute User Experience (UX) und eine höhere Conversion-Rate. Anstatt dass Kunden mühsam auf einen kleinen Button klicken müssen, können sie einfach irgendwo auf das große Bannerbild klicken, um zum Produkt oder zur Kollektion zu gelangen.

In dieser Anleitung zeigen wir dir, wie du das in wenigen Minuten umsetzt.

Schritt 1: Ein Backup erstellen (Sicherheit zuerst)

Bevor du Änderungen am Code vornimmst, solltest du immer dein aktuelles Theme duplizieren.

  1. Gehe zu Online-Shop > Themes.
  2. Klicke auf die drei Punkte (...) neben deinem aktiven Theme.
  3. Wähle Duplizieren.

Schritt 2: Den Code-Editor öffnen

  1. Klicke bei deinem aktiven Theme auf Anpassen (Customize) – oder direkt auf die drei Punkte und dann auf Code bearbeiten (Edit code).
  2. Suche im linken Menü unter dem Ordner Sections nach der Datei: image-banner.liquid.

Schritt 3: Den Link-Code einfügen

Jetzt machen wir das gesamte Banner-Element zu einem Link. Suche im Code nach dem Anfang des Banners. Dies ist meistens ein <div> Tag, der so oder ähnlich aussieht:

<div id="Banner-{{ section.id }}" class="banner ...">

Das Ziel: Wir umschließen diesen Bereich mit einem <a> (Anchor/Link) Tag.

  1. Suche die Stelle, an der die Banner-Logik beginnt (meist um Zeile 1-10).
  2. Füge darüber folgenden Code ein:
{% if section.settings.button_link_1 != blank %}
  <a href="{{ section.settings.button_link_1 }}" style="text-decoration: none; color: inherit; display: block;">
{% endif %}
  1. Scrolle nun ganz nach unten zum Ende der Datei (vor die {% schema %} Sektion) und suche das schließende </div> des Haupt-Banners.
  2. Füge darunter das schließende Link-Tag ein:
{% if section.settings.button_link_1 != blank %}
  </a>
{% endif %}

Hinweis: button_link_1 ist der Standard-Name für das erste Link-Feld im Shopify Dawn Theme. Solltest du ein anderes Theme nutzen, könnte die Variable leicht anders heißen.

Schritt 4: Den Button "unschädlich" machen (Optional)

Da nun das ganze Bild klickbar ist, sieht es manchmal komisch aus, wenn der Button noch einen eigenen Hover-Effekt hat oder man ihn separat anklicken muss.

Du kannst in den Theme-Einstellungen (im Customizer) den Button-Text einfach löschen, wenn du nur das klickbare Bild möchtest. Der Link bleibt durch unseren Code im Hintergrund aktiv.

Schritt 5: Speichern und Testen

  1. Klicke oben rechts auf Speichern.
  2. Öffne deinen Shop in der Vorschau.
  3. Fahre mit der Maus über das Banner. Der Mauszeiger sollte sich nun in eine Hand (Pointer) verwandeln.
  4. Klicke darauf, um zu prüfen, ob du zur richtigen Seite weitergeleitet wirst.

Warum funktioniert das 2025 immer noch so?

Obwohl Shopify ständig Updates herausbringt, basiert die Struktur der Sektions-Dateien (.liquid) weiterhin auf HTML-Containern. Die oben genannte Methode ist die "sauberste" Lösung, da sie die vorhandene Link-Einstellung deines Buttons nutzt, ohne dass du neue Felder im Admin-Bereich programmieren musst.

Profi-Tipp für die SEO 2025:

Achte darauf, dass dein Bild-Banner trotzdem einen Alt-Text hat. Da das gesamte Bild nun ein Link ist, "liest" Google den Kontext des Links primär über den Alt-Text des Bildes und den umgebenden Text im Banner.

Hast du ein spezielles Theme wie Prestige oder Impulse? Dort gibt es oft in den Einstellungen direkt unter "Banner" eine Checkbox namens "Make image clickable". Schau dort zuerst nach, bevor du den Code bearbeitest!

0