Wie kann ich das Element "Bild mit Textüberlagerung" mit einem Produkt verlinken?

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ein Nutzer möchte im Shopify-Theme Concept 2.1.1 das Element “Bild mit Textüberlagerung” auf der Startseite so anpassen, dass ein Klick auf das Bild direkt zu einem bestimmten Produkt führt. In den Theme-Einstellungen findet sich keine entsprechende Option.

Vorgeschlagene Lösung:

  • Das Bild in <a>-Tags einbetten, um eine klickbare Fläche (“Hit area” oder “Image map”) zu erstellen
  • Im Theme-Code unter Sections → image-with-text.liquid (oder entsprechende Datei im Concept Theme) die <div>-Tags mit <a>-Tags umschließen
  • Code-Beispiel: <div> durch <a href="{{ block.settings.link }}"><div>...</div></a> ersetzen

Status: Die Diskussion bleibt offen mit dem Hinweis, bei weiteren Fragen die Concept-Theme-Entwickler zu kontaktieren, da das spezifische Theme nicht allgemein bekannt ist. Referenzen zu W3Schools für HTML-Links und Image-Maps wurden bereitgestellt.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hallo zusammen,
ich arbeite aktuell mit dem Shopify-Theme Concept 2.1.1 und möchte auf der Startseite das Abschnitts-Element “Bild mit Textüberlagerung” so anpassen, dass beim Klicken auf das Bild direkt ein bestimmtes Produkt aufgerufen wird.

Leider finde ich in den Einstellungen keine Möglichkeit, einen Produkt-Link zu hinterlegen.

Weiß jemand, ob und wie ich das direkt mit einem Produkt verlinken kann? Ggf. auch per Code-Anpassung?

Danke im Voraus für eure Hilfe!

2

Bei solchen Fragen ist es immer hilfreich einen Link zu einem Beispiel zu bekommen, so dass wir einen Code oder CSS vorschlagen können. Im Grunde möchtest du eine “Hit area” oder “Image map” im Abschnitt erstellen, anstatt dass nur der Text “clickable” ist.

Du musst das Bild in Tags wrappen. In meinem Dawn “Bild mit Text” Abschnitt wrappe ich die

Tags in Tags (gehe dafür in den Theme Code → Sections → image-with-text.liquid → oder wie es im Concept Theme heisst). Ich ersetze:

Mit:

Mehr dazu in W3Schools hier und hier.

Bei weiteren Fragen bitte die Concept Theme Entwickler kontaktieren da wir dieses Theme nicht kennen.