Dit artikel is ook beschikbaar in:

๐Ÿ“ Hoe Bundels Aanbieding instellen voor aangepaste plaatsing

โ„น๏ธ Note: Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.


Wil uw bundel aanbod te verschijnen precies waar u wilt dat het op uw product pagina ๐ŸŽฏ


Dat is precies wat de Aangepaste plaatsing optie in Hoppy Bundles is ontworpen voor.


Standaard wordt elke bundelaanbieding getoond onder de knop Toevoegen aan winkelwagen automatisch. Maar met Custom Placement, kunt u het aanbod overal op uw productpagina met behulp van:


  • ๐Ÿงฉ De Hoppy Bundel-appblok binnen de Shopify thema-editor (geen codering nodig!)
  • ๐Ÿ“ Een klein code knipsel geplakt in uw thema code of een aangepaste vloeibare sectie


Deze gids begeleidt u stap voor stap door beide methoden โœจ



๐Ÿค” Wanneer moet u aangepaste plaatsing gebruiken?


Aangepaste plaatsing is handig wanneer u wilt:


  • Het bundelaanbod tonen boven de knop Toevoegen aan winkelwagen
  • Plaats het aanbod naast de productbeschrijving, afbeeldingen of beoordelingen
  • Verplaats de aanbieding lager op de pagina
  • Heb volledige controle over de exacte positie binnen uw thema-indeling


โ„น๏ธ Aangepaste plaatsing alleen op de productpagina. Andere pagina's worden niet beรฏnvloed door deze instelling.



โœ… Voordat u begint


Voordat u een aangepaste plaatsing opzet, zorg ervoor dat u:


  • โœ… De Hoppy Bundles app geรฏnstalleerd op uw winkel
  • โœ… A Bundelaanbieding reeds aangemaakt (of een nieuwe gemaakt)
  • โœ… De App ingebed ingeschakeld in uw thema (zie de volgende stap)


๐Ÿ’ก Dezelfde stappen werken ook voor Hoeveelheid breuk biedt de sectie Plaatsing kijkt en gedraagt precies hetzelfde.



โš™๏ธ Initiรซle stap inschakelen van de app Embed


Voor de bundel aanbieding te verschijnen overal op uw storefront, de app embed moet worden ingeschakeld in uw Shopify thema.


Ga naar:


Shopify Admin โ†’ Verkoopkanalen โ†’ Online Store โ†’ Thema's โ†’ Aanpassen โ†’ App Inbedden


Dan:


  • Zoeken Bulk korting aanbod ( Hoppy Bundles inbedden)
  • Schakel het IN
  • Klik Opslaan


โš ๏ธ Zonder de app embed ingeschakeld, noch de standaard plaatsing noch de aangepaste plaatsing zal renderen op uw storefront.



๐Ÿ› ๏ธ Stap 1 Selecteer aangepaste plaats in uw aanbod


Open de Hoppy Bundles app en open de bundel aanbieding die u handmatig wilt plaatsen.


Dan:


  1. Ga naar de Targeting en plaatsing tab
  2. Scroll naar beneden naar de Plaatsing sectie
  3. Selecteer in de dropdown Aangepast (alleen op de productpagina) in plaats van Hieronder Toevoegen aan winkelwagenknop (Standaard)



๐Ÿ’พ Stap 2 Sla het aanbod eerst op


Deze stap is belangrijk. โš ๏ธ


De Hoppy bundles ID en de code knipsel worden alleen gegenereerd nadat het aanbod is opgeslagen.


Als u selecteert Aangepast plaatsing op een gloednieuw (onopgeslagen) aanbod, zie je dit bericht in plaats daarvan:


Opslaan om te zien Hoppy bundles ID en code knipsel


Dus:


  1. Klik Opslaan bovenaan de pagina
  2. Terug naar Targeting en plaatsing โ†’ Plaatsing


Je zult nu twee dingen zien. ๐Ÿ‘‡



๐Ÿ†” Stap 3 Kopieer uw Hoppy bundles ID & Code Snippet


Eenmaal opgeslagen, toont de sectie Plaatsing:


  • Hoppy bundles ID โ†’ een unieke ID voor deze specifieke aanbieding, met een kopie pictogram ernaast
  • Hoppy bundles code knipsel โ†’ een kant-en-klare HTML knipsel, ook met een kopieerpictogram:


โ„น๏ธ Elk aanbod heeft zijn eigen unieke ID. Als u meerdere bundelaanbiedingen maakt, zorg er dan voor dat u het ID/snippet van de juiste kopieert.


U kunt nu het aanbod plaatsen met behulp van hetzij van de twee onderstaande methoden ๐Ÿ‘‡



๐Ÿงฉ Methode 1


Dit is de makkelijkste methode ๐ŸŽ‰


De Hoppy bundles app blok kan worden toegevoegd, verwijderd, herpositioneerd en aangepast via de thema-editor met behulp van uw Bundle ID.


Volg deze stappen:


  1. Ga naar Shopify Beheerder โ†’ Online Store โ†’ Thema's โ†’ Thema bewerken
  2. Bovenaan de thema-editor, schakel de pagina-selector naar Producten โ†’ Standaard product (of het productsjabloon dat u gebruikt)
  3. Klik in de linker zijbalk Blok toevoegen binnen de sectie Product
  4. Onder de Apps tab, selecteer Hoppy Bundel
  5. Plak in de blokinstellingen Bundel-ID in de Bundel-ID veld
  6. Sleep het blok omhoog of omlaag om het precies te positioneren waar u wilt dat het aanbod verschijnt
  7. Klik Opslaan


โš ๏ธ Als je het Bundle ID veld leeg laat, zal het blok een Configureer het ID om App Block te gebruiken waarschuwing in plaats van uw aanbod


๐Ÿ’ก U kunt het blok op elk moment herpositioneren door het eenvoudigweg in de thema-editor te slepen.De aanbieding volgt de blokpositie op de pagina.



๐Ÿ“ Methode 2 Plaats de aanbieding met behulp van de Code Snippet


Gebruik deze methode als u het aanbod wilt plaatsen in een specifieke plek in uw thema code, of in een Aangepast vloeibaar sectie/blok.


Optie A


  1. Ga naar Shopify Admin โ†’ Online Store โ†’ Thema's โ†’ Aanpassen
  2. Schakel over naar uw Productsjabloon
  3. Klik Blok toevoegen (of Sectie toevoegen) โ†’ kiezen Aangepast vloeibaar
  4. Plak de code uit stap 3:
  5. Plaats het blok waar u wilt dat het aanbod verschijnt
  6. Klik Opslaan


Optie B Direct in uw themacode


  1. Ga naar Shopify Admin โ†’ Online Store โ†’ Thema's โ†’ (drie punten) โ†’ Code bewerken
  2. Open uw product sjabloon bestand meestal iets als product.liquid, main-product.liquid, of een product JSON/sectie bestand (het exacte bestand hangt af van uw thema)
  3. Plak het knipsel precies waar u wilt dat de bundel aanbod te renderen:
  4. Klik Opslaan


โš ๏ธ Het bewerken van themacode direct kan breken uw lay-out als verkeerd gedaan. Als u niet comfortabel het bewerken van code, gebruik Methode 1 of Optie A in plaats daarvan



๐Ÿ“Œ Belangrijke opmerkingen & waarschuwingen


  • โš ๏ธ Eerst redden! De Bundle ID en knipsel verschijnen pas nadat het aanbod ten minste eenmaal is opgeslagen.
  • โš ๏ธ Aangepaste plaatsingswerkzaamheden alleen op de productpagina De aanbieding wordt niet geรฏnjecteerd op aangepaste posities op andere pagina's.
  • โš ๏ธ Zorg ervoor dat de App ingebed is ingeschakeld in uw thema, anders blijft het knipsel/blok leeg op de storefront.
  • โ„น๏ธ Het knipsel moet de exacte klassenaam behouden futureblink-bundle-block en uw aanbod uniek id Vernoem ze niet, anders zal de app de container niet vinden.
  • โ„น๏ธ Elke bundel aanbod heeft zijn eigen unieke ID. Kopiรซren van het knipsel van het ene aanbod en verwachten van een ander aanbod om te verschijnen zal werken.
  • ๐Ÿ’ก Als u de Placement dropdown terugschakelt naar Hieronder Toevoegen aan winkelwagenknop (Standaard), de app zal het aanbod automatisch weer weergeven ..geen ID of knipsel nodig.



๐ŸŽ‰ Eindresultaat


Zodra alles is geconfigureerd:


โœ… Uw bundel aanbod verschijnt op de exacte positie die u koos op de product pagina โœ… U kunt herpositioneren op elk moment van de thema-editor (App Block methode) โœ… Het aanbod blijft volledig dynamische prijzen, kortingen en varianten update in real time โœ… Uw product pagina lay-out ziet er precies zoals u het ontworpen โœจ


Aangepast gebruiken Plaatsing geeft u volledige controle over waar uw bundel biedt live op de pagina ๐Ÿš€

Bijgewerkt op: 10/09/2026

Was dit artikel nuttig?

Deel uw feedback

Annuleer

Dankuwel!