Sprache
Markiere Produkte direkt im Lifestyle-Foto, statt sie in einer langweiligen Produktliste zu zeigen. Hotspot-Tooltip mit Bild, Preis und Buy-Button — Klick führt zur Produktseite oder direkt in den Warenkorb.
Funktioniert in Online Store 2.0, in jedem Theme und ohne App-Installation.
Produkt-Lookshot hochladen, Marker auf jedes Produkt setzen, Tooltip mit Preis-Block und Shop-Link füllen.
Zwei Zeilen HTML, copy-paste-ready. Funktioniert auf jeder Shopify-Page.
Page-Editor öffnen, im Texteditor auf das </>-Symbol klicken, Code einfügen, speichern.
Shopify hat seit Online Store 2.0 mehrere Wege, HTML einzubetten. Drei davon decken praktisch alle Anwendungsfälle ab: Page-Editor für Standard-Seiten, Produktbeschreibung für einzelne Produkte, Custom-Liquid-Section für wiederverwendbare Bereiche im Theme.
Im Shopify-Admin auf Online Store → Pages gehen. Neue Seite anlegen oder eine bestehende öffnen. Im Texteditor oben rechts gibt es ein </>-Symbol — das öffnet die HTML-Quellansicht.
Embed-Code an der gewünschten Stelle einfügen, zurück zur visuellen Ansicht wechseln, Seite speichern.
Im Produkt-Editor unter Products → [Produkt] findest du das Beschreibungsfeld mit demselben Texteditor wie auf Pages. </>-Symbol klicken, Embed reinpacken, speichern.
Damit lässt sich z. B. an einem Möbelstück direkt das Material, die Maße und passendes Zubehör als Hotspot anzeigen — ohne den Kunden auf eine zweite Seite zu schicken.
Für Lookbook-artige Pages, die du auf mehreren Stellen brauchst: Im Theme-Editor (Online Store → Themes → Customize) eine Custom Liquid-Section hinzufügen. Embed-Code dort einfügen — die Section ist dann auf jeder Page verfügbar, an die du sie ziehst.
Vorteil: Wenn du das interaktive Bild später aktualisieren willst, ändert sich das automatisch überall, wo die Section eingebunden ist.
Wenn du Embeds fest ins Theme bauen willst (z. B. immer auf der Startseite), kannst du den Code direkt in eine Liquid-Datei einfügen — etwa sections/index.liquid oder ein eigenes Section-Template.
Geht über Online Store → Themes → Edit Code. Wichtig: Theme vorher duplizieren als Backup.
Outfit- oder Wohnstil-Foto, jedes Teil als Hotspot mit Preis und „In den Warenkorb"-Button. Conversion direkt aus dem Foto.
Funktionen, Materialien oder Maße direkt am Produktbild markiert. Spart Tabellen und langes Scrollen.
Hauptprodukt im Mittelpunkt, ergänzende Produkte als Marker drumherum. Mehr Items pro Bestellung ohne Pop-ups.
Gruppenfoto vom Team, jedes Mitglied klickbar mit Name, Rolle und LinkedIn-Link. Mehr Persönlichkeit als reine Textwand.
</>-Symbol) nutzen, nicht in der visuellen Ansicht einfügen — sonst wird der Code escaped./products/handle) — Add-to-Cart per Link funktioniert mit /cart/add?id=VARIANT_ID&quantity=1.Ja. Vom Basic Shopify-Plan bis zu Shopify Plus ist HTML-Einbettung in Pages und Produktbeschreibungen ohne Einschränkung möglich. Auch Shopify Lite funktioniert, sofern du den HTML-Editor erreichst.
Nein. Das Embed ist normales HTML+JS, kein App-Eintrag, keine monatliche Gebühr. Damit umgehst du auch die Performance-Einbußen, die viele Apps mit sich bringen.
Das embed.js-Skript lädt asynchron (async-Attribut), blockiert also den Page-Render nicht. Die Bilder selbst laden Lazy. In Tests landen Embeds bei 5–10 Punkten Performance-Differenz im Lighthouse — vergleichbar mit einem zusätzlichen Bild auf der Seite.
Markers und Tooltip-Inhalte werden bei picpins pro Bild gespeichert, nicht pro Sprache. Für mehrsprachige Storefronts hast du zwei Optionen: separate picpins-Bilder pro Sprache erstellen und mit Liquid-Logik die richtige Embed-ID auswählen, oder generische Tooltips ohne Text (z. B. nur Bild + Preis).
Embeds in Pages und Produktbeschreibungen sind theme-unabhängig — die laufen weiter. Embeds, die du direkt im Theme-Code untergebracht hast, gehen bei einem Theme-Reset oder -Wechsel verloren. Faustregel: Lifestyle-Embeds in Pages, fest verbaute Embeds nur, wenn du den Theme-Code aktiv pflegst.
Ja, beliebig viele. Das Embed-Skript wird einmal geladen und initialisiert dann alle .picpins-embed-Container automatisch. Performance-Impact: nur das Skript einmal, nicht pro Bild.
Im Standard-Checkout (Shopify-Hosted) ist HTML-Einbettung nicht möglich — das ist auf allen Plänen außer Shopify Plus gesperrt. Auf Shopify Plus könnte man Checkout-Extensions nutzen, aber der Use-Case ist selten sinnvoll: Im Checkout will der Kunde abschließen, nicht stöbern.
Die Tooltip-Inhalte werden per JavaScript dynamisch eingebunden, sind also nicht direkt im Page-Source. Die Hauptseite mit Bildbeschreibung, Produktnamen und Texten drumherum bleibt aber crawlbar. Für SEO heißt das: Tooltips sind Bonus für Nutzer, der eigentliche Page-Content bleibt klassisch optimierbar.
Erstes Lifestyle-Bild in fünf Minuten interaktiv: Foto rein, Marker setzen, Embed-Code kopieren, in Shopify einfügen.