Waar de widget op de productpagina verschijnt

Standaard wordt de Bundlex-widget net boven de knop 'Toevoegen aan winkelwagen' op de productpagina weergegeven. Als die plek niet goed bij je thema past, kun je de widget op twee manieren verplaatsen: met een aangepaste plaatsingsselector in de app-embed of met een anker voor een paginabouwer. In dit artikel lees je waar de widget terechtkomt en hoe Bundlex tussen deze opties kiest.

De standaardpositie

Als geen enkele overschrijving voor de plaatsing overeenkomt, voegt Bundlex de widget vóór de gedetecteerde container van het productformulier in het koopgedeelte in. De exacte positie ten opzichte van de variant- en aantalkiezers van het thema hangt van dat thema af. In de praktijk betekent dit dat de aanbiedingskaarten boven de knop 'Toevoegen aan winkelwagen' verschijnen, waar de meeste shoppers een hoeveelheids- of bundelaanbieding verwachten.

Deze standaardpositie is afhankelijk van de automatische detectie van je productformulier door Bundlex. De meeste thema's worden automatisch gedetecteerd. Als dat bij jouw thema niet lukt, kan de widget niet betrouwbaar verbinding maken met 'Toevoegen aan winkelwagen'. Alleen een plaatsingsanker lost een ontbrekend of verkeerd productformulier niet op. Vraag support daarom ook om de formulierdetectie te controleren.

De prioriteitsvolgorde voor plaatsing

Bij levering via een app-embed controleert Bundlex plaatsingsdoelen in een vaste volgorde en gebruikt het het eerste doel dat wordt gevonden. Hogere items in de lijst hebben voorrang op lagere items.

1. Aangepaste plaatsingsselector (hoogste prioriteit). Een CSS-selector die je instelt in de Bundlex-app-embed. Wanneer deze is ingesteld en overeenkomt met een element, wordt de widget direct na dat element ingevoegd en wordt niets verderop in deze lijst gebruikt.
2. Anker voor paginabouwer (data-bundlex-widget). Een HTML-element met het attribuut data-bundlex-widget dat je aan je pagina toevoegt. De widget wordt in het eerste overeenkomende anker geplaatst. Dit wordt gebruikt wanneer er geen aangepast plaatsingsdoel wordt gevonden.
3. Standaardpositie vóór het productformulier (laagste prioriteit). De hierboven beschreven automatische plaatsing. Deze wordt gebruikt wanneer geen van beide overschrijvingen een overeenkomend doel oplevert.

Omdat de volgorde stopt bij de eerste overeenkomst, overschrijft een overeenkomend aangepast plaatsingsdoel zowel het anker als de standaardpositie, en overschrijft een overeenkomend anker de standaardpositie. Als een selector na een themawijziging niet meer overeenkomt, kan Bundlex terugvallen op een lagere plaatsingsoptie.

Optie 1: de aangepaste plaatsingsselector (app-embed)

Gebruik een aangepaste plaatsingsselector wanneer je levering via een app-embed wilt behouden en de widget na een specifiek pagina-element wilt plaatsen. Als je de selector niet kent, vraag Bundlex Support om hulp bij het kiezen ervan. Test de selector eerst in een conceptthema.

Je stelt deze in via de Bundlex-app-embed:

1. Ga in Shopify-beheercentrum naar Online Store en klik op Thema bewerken.
2. Open App-embeds en zoek Bundlex Bundles.
3. Schakel Geavanceerde instellingen weergeven in en voer vervolgens een CSS-selector in het veld Aangepaste plaatsingsselector in.
4. Sla het thema op.

De widget wordt direct na het element ingevoegd waarop je selector overeenkomt. Als je niet zeker weet welke selector je moet gebruiken, kan Bundlex Support je helpen er een te vinden. In de geavanceerde instellingen verschijnen ook velden voor het productformulier, de knop 'Toevoegen aan winkelwagen' en aantalkiezers. Deze worden gebruikt om automatische detectie in aangepaste thema's te corrigeren, niet om de widget te positioneren.

Optie 2: een anker voor een paginabouwer

Als je productpagina's bouwt met een visuele paginabouwer zoals GemPages, PageFly of Shogun, wil je de widget meestal op een specifieke plek in je lay-out plaatsen. Voeg daarvoor een aangepast HTML- of codeblok toe op de gewenste plek en plaats daarin een leeg element met het attribuut data-bundlex-widget:

<div data-bundlex-widget></div>

Je hoeft dit niet handmatig te typen: open het tabblad Geavanceerd van de bundelbewerker en vouw Gebruik je een paginabouwer? uit. Kies Kopiëren en plak het fragment vervolgens in je pagina.

Bundlex vult het eerste overeenkomende anker met de widget. Je hebt geen afzonderlijk fragment per bundel nodig. Het anker bepaalt alleen de positie. Bundlex kiest nog steeds welke gepubliceerde bundel wordt weergegeven op basis van het product.

Alleen het eerste overeenkomende anker wordt gebruikt

Als er meer dan één data-bundlex-widget-element op de pagina staat, gebruikt Bundlex alleen het eerste element in DOM-volgorde. Dit is belangrijk wanneer je storefront inhoud dupliceert, bijvoorbeeld in een snelweergavemodaal of een winkelwagenlade waarin productopmaak opnieuw wordt weergegeven. Plaats het anker alleen op het oppervlak waar je de widget daadwerkelijk wilt tonen, zodat de eerste overeenkomst de juiste is.

Wanneer je in plaats daarvan het app-blok gebruikt

Bundlex levert ook een thema-app-blok voor de productpagina, een afzonderlijke manier om de widget vanuit de app te leveren, los van de app-embed. Gebruik het app-blok wanneer je de widget via slepen en neerzetten in de thema-editor op een specifieke positie wilt plaatsen, zonder een CSS-selector te schrijven of paginamarkup te bewerken:

1. Open in de thema-editor een product-sjabloon.
2. Klik op Blok toevoegen in de sectie waar je de widget wilt plaatsen.
3. Open het tabblad Apps, kies Bundlex Bundles en sleep het blok naar de exacte positie die je wilt.
4. Sla het thema op.

Het blok plaatst de widget waar je het in de sectie neerzet. Daarmee vormt het een goede middenweg tussen de automatische standaardpositie en een handmatig geschreven selector. Het blok negeert de aangepaste plaatsingsselector en het anker voor de paginabouwer van de embed. Gebruik één leveringsmethode voor productpagina's: als je zowel de embed als het blok uitvoert, kunnen plaatsing en instellingen afhankelijk worden van welke als eerste wordt geïnitialiseerd.

Test de wijziging eerst in een conceptthema. Controleer voordat je een werkende embed in dat conceptthema uitschakelt of het blok zich in een sectie bevindt die in het daadwerkelijke productsjabloon wordt weergegeven. Laad de productpagina direct opnieuw nadat je de embed hebt uitgeschakeld. Als de widget verdwijnt, schakel je de embed weer in. Geef bij kortingen met cadeaus de voorkeur aan een plaatsing waarbij de embed en het opruimen van cadeaus op de winkelwagenpagina behouden blijven. Zie embed versus blok.

Welke plaatsing je ook kiest, de widget wordt alleen weergegeven wanneer de app-embed of het blok is ingeschakeld en een gepubliceerde bundel overeenkomt met het product. Als de widget helemaal niet verschijnt, controleer dan eerst deze twee zaken voordat je de plaatsing aanpast.

Landingspagina's: het blok 'Bundlex Bundles featured'

De bovenstaande methoden zijn van toepassing op productpagina's. Op een gewone Shopify-pagina, elke /pages/-URL, zoals een landingspagina die je voor een campagne hebt gebouwd, kan de widget niet zelfstandig worden gekoppeld en wordt deze ook niet geladen via aangepaste HTML.

Voeg in plaats daarvan de eigen sectie Uitgelicht product van je thema toe en plaats het blok Bundlex Bundles featured daarin. De themasectie levert de knop 'Toevoegen aan winkelwagen' en het blok voegt de widget toe, op dezelfde manier als op de homepage:

1. Ga in Shopify-beheercentrum naar Online Store en klik op Thema bewerken.
2. Selecteer in de sjabloonkeuzelijst bovenaan Pagina's en kies het sjabloon dat je landingspagina gebruikt.
3. Klik op Sectie toevoegen en kies de eigen sectie Uitgelicht product van je thema. Selecteer vervolgens het product waarvan je de bundel wilt tonen.
4. Klik in die sectie op Blok toevoegen, open het tabblad Apps en kies Bundlex Bundles featured.
5. Stel in de instellingen van het uitgelichte blok Product in op hetzelfde product als de sectie, of behoud de koppeling Sectieproduct.
6. Sla het thema op.

Het blok vindt op zichzelf, buiten een sectie Uitgelicht product, geen formulier voor 'Toevoegen aan winkelwagen' en toont niets. Binnen de sectie toont het het product met de gepubliceerde bundelaanbiedingen, zodat shoppers rechtstreeks vanaf de landingspagina producten aan de winkelwagen kunnen toevoegen. Dezelfde opstelling werkt ook op je homepage.

Snel overzicht

Plaatsingsmethode	Waar je deze instelt	Prioriteit
Aangepaste plaatsingsselector	App-embeds > Bundlex Bundles > Geavanceerde instellingen weergeven	Hoogste
data-bundlex-widget-anker	Paginamarkup of paginabouwer	Gebruikt als geen aangepast doel overeenkomt
Standaard (vóór het productformulier)	Automatisch	Wordt gebruikt als geen van beide overschrijvingen overeenkomt