Klickbare Produktbilder in Shopify: Hotspots, Imagemaps und Shop-the-Look
Wie du in Shopify Bilder mit klickbaren Bereichen versiehst — direkt in Pages, Produktbeschreibungen oder als Theme-Section. Mit oder ohne App.
Was ist Shop-the-Look überhaupt?
Ein klickbares Lookbook-Foto, in dem jedes Kleidungsstück direkt zum passenden Produkt führt. Eine Möbelszene, in der jeder Stuhl, jede Lampe und jeder Teppich verlinkt ist. Das ist die klassische Shop-the-Look-Idee — und Shopify bietet mehrere Wege, sie umzusetzen.
Option 1: Native Shop-the-Look-Section im Theme
Einige der neueren Shopify-Themes haben dedizierte Sections eingebaut. Im Theme-Editor unter "Section hinzufügen" findest du dann Einträge wie "Shoppable image" oder "Hotspots". Dort lädst du ein Bild hoch, ziehst die Hotspots auf die gewünschten Stellen und verbindest jeden Hotspot direkt mit einem Produkt aus deinem Katalog. Beim Klick öffnet sich ein Mini-Produktcard mit Preis und Add-to-Cart-Button.
Wenn dein aktuelles Theme das nicht hat, lohnt sich ein Blick ins Changelog des Themes oder ein Update-Check. Viele Themes haben die Funktion in den letzten Jahren nachgerüstet.
Option 2: Apps aus dem Shopify App Store
Im App Store findest du Spezial-Apps für Hotspots — von einfachen Lookbook-Tools bis zu komplexen Shoppable-Image-Lösungen. Apps sind bequem, aber sie kosten meist monatlich und laden zusätzliche Skripte mit, die deinen Shop messbar langsamer machen können. Wenn dein Theme schon eine Hotspot-Section hat, brauchst du diese Apps nicht.
Option 3: Klassische HTML-Imagemap in einer Page
Wenn du eine eigene Landingpage baust und kein Theme-Hotspot zur Verfügung steht, geht der altbewährte Weg über die HTML-Quellansicht. Im Shopify-Admin auf Online Store → Pages gehen, eine neue Seite anlegen, im Texteditor oben rechts auf das </>-Symbol klicken und Imagemap-Code einfügen. Diese Variante hat dasselbe Problem wie überall: Die Koordinaten sind starr und passen sich nicht an unterschiedliche Bildgrößen an. Auf Mobilgeräten landen die Hotspots an den falschen Stellen.
Option 4: Custom-Liquid-Section mit Embed-Code
Im Theme-Editor lässt sich an jeder Stelle eine Custom-Liquid-Section einfügen. Hier kannst du beliebigen HTML-, CSS- und JavaScript-Code unterbringen — also auch den Embed-Code von picpins oder eigene SVG-basierte Hotspot-Lösungen.
Vorgehen mit picpins: Bild auf picpins.com hochladen, Marker setzen, Tooltips mit Produktinfos befüllen. Inspiration für klickbare Produktbilder findest du in der Mode-Galerie. Embed-Code kopieren. Im Theme-Editor "Section hinzufügen" → "Custom Liquid" → Code einsetzen → speichern. Vorteil: volle Kontrolle, das Bild ist responsive, und du kannst die Hotspots später ändern, ohne den Shopify-Editor erneut anzufassen.
Was bei Produktbeschreibungen funktioniert
Im Produkteditor selbst kannst du im Beschreibungs-Feld ebenfalls auf die HTML-Quellansicht umschalten und Embed-Codes oder Imagemaps einfügen. Manche Themes blenden in der mobilen Ansicht der Produktseite Inhalte ab einer bestimmten Höhe aus oder packen sie hinter "Mehr anzeigen" — teste deine Lösung auf dem Smartphone, bevor du sie veröffentlichst.
Performance-Hinweis
Shopify-Shops werden anhand der Page-Speed-Score bewertet. Externe Embeds und zusätzliche Apps senken diesen Score. Wenn du auf Geschwindigkeit angewiesen bist, ist die native Theme-Section deutlich besser als eine externe Lösung. Für gelegentliche Hotspot-Bilder fällt der Unterschied nicht ins Gewicht.
