Empfiehlt ein Block die richtigen Produkte, sorgst du dafür, dass er aussieht wie ein Teil deines Shops, prüfst ihn in der Vorschau und platzierst ihn in deinem Shopify-Theme. Das dauert ein paar Minuten und braucht keinen Code.
Den Block an deinen Shop anpassen
Öffne den Block und geh zu Configure → Design.
- Content: der Title und eine optionale Description über den Produkten.
- Display: Product grid (Raster) oder Horizontal carousel (Karussell).
- Products to show: 1 bis 24, standardmäßig 4. Im Raster legt Columns fest, wie viele nebeneinander stehen (2 bis 6). Auf schmalen Bildschirmen bricht das Raster in weitere Zeilen um, damit die Karten lesbar bleiben.
- Image corners: eckig, abgerundet oder stark abgerundet.
- Currency: die Währung der Preise. Zu Beginn ist das deine Shopify-Währung.
- More options → Spacing: der Abstand zwischen den Produkten, 0 bis 80 Pixel.
Der Block übernimmt die Schriften deines Shops. Texte, die der Block selbst schreibt, etwa „Dieser Artikel“ oder „Deine Ersparnis“, erscheinen in der Sprache der Kunden: Englisch, Niederländisch, Deutsch, Französisch, Spanisch oder Italienisch. Titel und Beschreibung stehen so da, wie du sie eingegeben hast.
Eigener Code
Für volle Kontrolle öffnest du unten im Bereich Design Custom code. Mit CSS gestaltest du das eingebaute Design um. Das CSS wirkt nur auf diesen Block, nie auf den Rest deines Shops. Mit Customize the HTML übernimmst du auch das Markup; du startest dabei vom aktuellen Design. Use the built-in design entfernt dein HTML und CSS wieder und lässt sich nicht rückgängig machen. Bearbeitet jemand aus der Entwicklung das HTML, müssen die data-bb--Attribute bleiben, denn Klicks, Bundle-Auswahl und In-den-Warenkorb hängen daran.
Lieber ohne Code? Öffne Barry (⌘J oder Strg+J) und schreib „Style this block to match my brand“ oder einfach „Pass den Block an meine Marke an“.
Den Block in der Vorschau prüfen
Die Live-Vorschau steht im Schritt Configure neben deinen Einstellungen. Unter Source products wählst du das Produkt, das sich jemand ansieht, oder mehrere Produkte als Warenkorb, und siehst, was der Block empfiehlt. Wechsle zwischen Desktop und Mobil oder klick auf Open full preview für eine größere Ansicht.
Im Schritt Preview gibt es oben eine Zielgruppen-Auswahl: Wähle Everyone oder eines deiner Segmente und sieh genau, was diese Kunden bekommen. Die Buttons in der Vorschau funktionieren, legen aber nichts in einen echten Warenkorb.
Den Block in dein Shopify-Theme einbauen
Bevor du startest: Die bluebarry-App ist installiert und Bluebarry Core Script ist unter App embeds eingeschaltet. Siehe Die bluebarry-App für Shopify installieren.
- Öffne im Editor des Blocks Embed und klick unter Add to Shopify auf Copy ID.
- Geh in Shopify zu Online Store → Themes und klick auf Customize.
- Öffne die gewünschte Vorlage, zum Beispiel deine Standard-Produktseite oder den Warenkorb.
- Klick auf Add block oder Add section, öffne Apps und wähle bluebarry recs.
- Füg die ID unter Block ID ein, schieb den Block an die gewünschte Stelle und klick auf Save.
Solange keine ID eingetragen ist, zeigt der Theme-Editor an dieser Stelle einen kurzen Hinweis. Kunden sehen ihn nie. Du kannst denselben Block auf mehreren Vorlagen platzieren und verschiedene Blöcke auf derselben Seite.
Die richtige Seite wählen
Der Block leitet von der Seite, auf der er steht, ab, was er empfiehlt:
| Wo du ihn platzierst | Worauf er sich stützt |
|---|---|
| Produktseite | Das Produkt, das sich jemand ansieht. Der Block folgt der gewählten Variante, ein Bundle startet also immer mit dem richtigen Farbton oder der richtigen Größe. |
| Warenkorb und andere Seiten | Die Produkte im Warenkorb. Der Block aktualisiert sich, wenn sich der Warenkorb ändert. Bei leerem Warenkorb hat ein automatisch empfehlender Block keinen Ausgangspunkt und bleibt unsichtbar. |
Was schon im Warenkorb liegt, wird nie empfohlen, egal wo der Block steht. Für deine Startseite passt meist ein Block mit Choose specific products besser.
Eigene und Headless-Storefronts
Nutzt dein Shop nicht den Theme-Editor von Shopify, findest du im Schritt Embed unter Other storefronts einen einzeiligen Schnipsel für deine Entwicklung. Ist das bluebarry-Skript auf der Seite, wird er dort eingefügt, wo der Block erscheinen soll, zusammen mit den Produkten, von denen aus empfohlen wird, und den Produkten im Warenkorb:
<div data-bluebarry-recommendations="YOUR-BLOCK-ID"></div>Änderungen sind sofort live
Einen Veröffentlichen-Button gibt es nicht. Jede Änderung im Editor ist nach wenigen Augenblicken in deinem Shop live. Willst du eine größere Änderung vorbereiten, ohne dass Kunden etwas merken, duplizierst du den Block, arbeitest an der Kopie und tauschst die Block ID im Theme aus, sobald sie fertig ist. Löschst du einen Block, verschwinden auch seine Platzierungen aus dem Shop. Entferne dann auch den App-Block aus deinem Theme.