Beveelt een blok de juiste producten aan, dan laat je het eruitzien als onderdeel van je webshop, controleer je het in de preview en plaats je het in je Shopify-thema. Dat kost een paar minuten en er is geen code voor nodig.
Het blok laten passen bij je webshop
Open het blok en ga naar Configure → Design.
- Content: de Title en een optionele Description boven de producten.
- Display: Product grid (raster) of Horizontal carousel (carrousel).
- Products to show: 1 tot 24, standaard 4. In een raster bepaalt Columns hoeveel er naast elkaar staan (2 tot 6). Op smalle schermen loopt het raster door op extra rijen, zodat de kaarten leesbaar blijven.
- Image corners: scherp, afgerond of extra afgerond.
- Currency: de valuta van de prijzen. Die begint als je Shopify-valuta.
- More options → Spacing: de ruimte tussen producten, 0 tot 80 pixels.
Het blok neemt de lettertypes van je webshop over. Teksten die het blok zelf schrijft, zoals "Dit artikel" of "Jouw voordeel", volgen de taal van de klant: Engels, Nederlands, Duits, Frans, Spaans of Italiaans. Je titel en beschrijving verschijnen zoals je ze hebt getypt.
Eigen code
Wil je volledige controle, open dan onderaan het onderdeel Design Custom code. Met CSS geef je het standaardontwerp een andere stijl. De CSS geldt alleen voor dit blok, nooit voor de rest van je webshop. Met Customize the HTML neem je ook de opmaak over; je begint dan vanaf het huidige ontwerp. Use the built-in design haalt je HTML en CSS weer weg en is niet ongedaan te maken. Past een developer de HTML aan, dan moeten de data-bb--attributen blijven staan, want kliks, de bundelkeuze en in winkelwagen werken via die attributen.
Liever geen code? Open Barry (⌘J of Ctrl+J) en vraag bijvoorbeeld "Style this block to match my brand" of gewoon "Laat dit blok bij mijn merk passen".
Het blok bekijken in de preview
De live preview staat in de stap Configure naast je instellingen. Kies onder Source products het product dat een klant bekijkt, of meerdere producten als winkelwagen, en zie wat het blok aanbeveelt. Wissel tussen desktop en mobiel, of klik op Open full preview voor een grotere weergave.
In de stap Preview staat bovenaan een doelgroepkeuze: kies Everyone of een van je segmenten om precies te zien wat die klanten krijgen. De knoppen in de preview werken, maar er komt niets in een echte winkelwagen.
Het blok toevoegen aan je Shopify-thema
Zorg eerst dat de bluebarry-app is geïnstalleerd en dat Bluebarry Core Script aanstaat onder App embeds. Zie De bluebarry-app voor Shopify installeren.
- Open in de editor van het blok Embed en klik onder Add to Shopify op Copy ID.
- Ga in Shopify naar Online Store → Themes en klik op Customize.
- Open het sjabloon dat je wilt, bijvoorbeeld je standaard productpagina of de winkelwagen.
- Klik op Add block of Add section, open Apps en kies bluebarry recs.
- Plak het ID bij Block ID, sleep het blok naar de plek waar je het wilt en klik op Save.
Zolang je geen ID hebt geplakt, toont de thema-editor op die plek een korte herinnering. Klanten zien die nooit. Je kunt hetzelfde blok op meerdere sjablonen plaatsen, en verschillende blokken op dezelfde pagina.
De juiste pagina kiezen
Het blok bepaalt aan de hand van de pagina waarop het staat wat het aanbeveelt:
| Waar je het plaatst | Waar het op baseert |
|---|---|
| Productpagina | Het product dat de klant bekijkt. Het blok volgt de gekozen variant, dus een bundel begint altijd met de juiste tint of maat. |
| Winkelwagen en andere pagina's | De producten in de winkelwagen. Het blok werkt zich bij als de winkelwagen verandert. Met een lege winkelwagen heeft een blok dat automatisch aanbeveelt geen startpunt en blijft het verborgen. |
Producten die al in de winkelwagen zitten, worden nooit aanbevolen, waar het blok ook staat. Voor je homepage past een blok met Choose specific products meestal beter.
Eigen en headless storefronts
Gebruikt je webshop de thema-editor van Shopify niet, dan staat in de stap Embed onder Other storefronts een codefragment van één regel voor je developer. Met het bluebarry-script op de pagina plakt die het fragment waar het blok moet komen, samen met de producten waarop het blok zich baseert en de producten in de winkelwagen:
<div data-bluebarry-recommendations="YOUR-BLOCK-ID"></div>Wijzigingen staan meteen live
Er is geen publiceerknop. Elke wijziging in de editor staat binnen een paar tellen live in je webshop. Wil je een grotere wijziging voorbereiden zonder dat klanten er iets van merken, dupliceer dan het blok, werk aan de kopie en vervang het Block ID in je thema als die klaar is. Verwijder je een blok, dan verdwijnen ook de plaatsingen uit je webshop. Haal dan ook het app-blok uit je thema.