Artikelen over: Widgets

De abonnementswidget in je online winkel inschakelen

Ga naar deze pagina via Supr Bundles & Subscriptions > Design


De widget is wat je klanten op je productpagina's gebruiken om een abonnement of een bundel te kiezen. Eén widget toont beide: je abonnementsopties en je bundelopties. Om hem aan te zetten, klik je op de pagina Design op Widget inschakelen en daarna in je thema-editor op Opslaan. Je hoeft geen code, insluitcode of snippet te plakken.


Inhoudsopgave



Videoles


Kijk je liever dan dat je leest? Deze video laat zien hoe de app-insluiting in de thema-editor wordt aangezet. Die schakelaar zet Widget inschakelen voor je aan.



Stapsgewijze instructies


  1. Open in je Shopify-beheeromgeving Supr Bundles & Subscriptions en ga naar Design.
  2. Staat de widget nog niet aan, dan zie je een banner Je widgets zijn nog niet live. Klik op Widget inschakelen (in de banner of bovenaan de pagina).
  3. Klik in het venster dat opent op Inschakelen. Je thema-editor opent in een nieuw tabblad met Supr Bundle & Subscriptions aangezet onder App-insluitingen.

Knop Inschakelen

  1. Klik in de thema-editor rechtsboven op Opslaan. De editor toont een herinnering Nog één stap totdat je dat doet. Sluit je de editor zonder op te slaan, dan blijft de widget uit.

Opslaanknop van de thema-editor

  1. Ga terug naar het tabblad van de app. Je ziet Widget ingeschakeld zodra de app de opgeslagen schakelaar heeft gevonden. Staat er Widget niet ingeschakeld, klik dan opnieuw op Inschakelen en zorg dat je dit keer wel op Opslaan klikt.


Je kunt ook beginnen vanaf Start: de stap Widget ingeschakeld in de installatiegids (of Abonnementswidget ingeschakeld / Bundelwidget ingeschakeld, afhankelijk van wat je verkoopt) heeft dezelfde knop Widget inschakelen. Zodra de widget aanstaat, verandert die knop in Widget aanpassen en brengt hij je naar Design.


Liever met de hand? Ga in je Shopify-beheeromgeving naar Online winkel > Thema's, klik op Aanpassen bij je live thema, open App-insluitingen (het pictogram onderaan de linkerzijbalk), zet Supr Bundle & Subscriptions aan en klik op Opslaan. In oudere versies van de app heette deze schakelaar Subscriptions (alleen thema's 1.0).


Waar de widget verschijnt


Je hoeft niets te slepen. De widget plaatst zichzelf op je productpagina's, direct boven de knop om aan de winkelwagen toe te voegen, en werkt op elk thema op dezelfde manier, ook op oudere (vintage) thema's. Om hem ergens anders te zetten, zie Een exacte positie kiezen.


  • Hij verschijnt op elke productpagina waarvan het product in een Gepubliceerde aanbieding zit, welk producttemplate het product ook gebruikt.
  • Je bundelopties staan direct naast de abonnementsopties. Of de bundelopties erboven of eronder staan, stel je in via Design > Elementen > Pagina-indeling > Bundel bovenaan.
  • De ruimte boven en onder de widget stel je in via Design > Afstand > Rond de widget.
  • De widget heeft geen eigen knop om aan de winkelwagen toe te voegen. Hij gebruikt de knop van je thema, dus je productpagina heeft het blok Koopknoppen van het thema nodig.


Een exacte positie kiezen


Er zijn twee manieren om de widget te verplaatsen: de instelling Plaatsing op de pagina Design, die voor alle productpagina's tegelijk geldt (een opgeslagen design heeft een eigen Plaatsing, voor de aanbiedingen die het gebruiken), of het blok Subscriptions + Bundles, dat je precies naar de gewenste plek sleept.


Met de instelling Plaatsing:


  1. Ga in de app naar Design. Het gedeelte Plaatsing verschijnt zodra de widget is ingeschakeld (zie de stappen hierboven).
  2. Kies een Positie op productpagina:
    • Boven de knop om aan de winkelwagen toe te voegen (automatisch): de standaard.
    • Onder de koopknoppen: onder de knop om aan de winkelwagen toe te voegen en de express-checkoutknoppen, zoals Nu kopen.
    • Boven de aantalkiezer: boven het aantalveld. Toont je thema het aantal op dezelfde regel als de knop om aan de winkelwagen toe te voegen, dan komt de widget boven die regel.
    • Aangepast (CSS-selector): overal op de pagina. Typ bij CSS-selector een CSS-selector voor een element van je productpagina, bijvoorbeeld .product__title, en kies bij De widget plaatsen of de widget vóór of na dat element komt, of erin aan het begin of einde.
  4. Klik op Opslaan.


Bestaat de gekozen positie niet op een pagina (bijvoorbeeld een productpagina zonder aantalkiezer, of een selector die niets vindt), dan valt de widget terug op zijn automatische positie boven de knop om aan de winkelwagen toe te voegen, zodat hij nooit verdwijnt. De instelling geldt voor elk thema waarop je de widget inschakelt.


Weet je niet welke CSS-selector je moet gebruiken? Neem contact op met support met een link naar je productpagina en waar je de widget wilt hebben, dan sturen we er een.


Met het blok: wil je de widget op één exacte plek, bijvoorbeeld onder de prijs of onder een regel met reviews, voeg dan het blok Subscriptions + Bundles toe waar je het wilt hebben:


  1. Ga naar Online winkel > Thema's en klik op Aanpassen.
  2. Open een productpagina met de templatekiezer bovenaan de editor (bijvoorbeeld Producten > Standaardproduct).
  3. Klik in de sectie met productinformatie op Blok toevoegen, daarna op Apps en dan op Subscriptions + Bundles.
  4. Sleep het blok naar de plek waar je de widget wilt hebben en klik op Opslaan.


Laat de app-insluiting aanstaan. Overal waar een blok Subscriptions + Bundles op de pagina staat, verwijdert de kopie van de insluiting zichzelf, dus je krijgt hierdoor nooit twee widgets.


Een blok hoort bij het template, niet bij één product. Als je het verplaatst, verplaats je de widget bij elk product dat dat template gebruikt. Gebruiken je producten meer dan één producttemplate, herhaal dit dan bij elk template waar je de nieuwe positie wilt. Templates zonder blok houden de automatische positie boven de knop om aan de winkelwagen toe te voegen.


De widget op andere pagina's tonen


Je kunt ook verkopen vanaf een pagina die niet de eigen pagina van het product is, zoals een landingspagina, een collectiepagina, je homepage of een blogbericht. De complete widget verschijnt daar, met dezelfde bundelopties, abonnementsopties en hetzelfde design dat je op de pagina Design hebt ingesteld.


  1. Open in je thema-editor de gewenste pagina.
  2. Voeg een sectie toe die één product toont. De meeste thema's noemen dat Uitgelicht product.
  3. Klik in die sectie op Blok toevoegen, daarna op Apps en dan op Subscriptions + Bundles.
  4. Klik op het blok en stel zijn Product in. Buiten een productpagina kan het blok niet weten welk product je bedoelt, dus je moet het opgeven. Totdat je dat doet, toont de thema-editor Nog niets te tonen: dit blok heeft geen product geselecteerd.
  5. Houd het eigen blok Koopknoppen van de sectie. De widget gebruikt die knop om aan de winkelwagen toe te voegen.
  6. Klik op Opslaan.


Je kunt er meer dan één op dezelfde pagina plaatsen. Elk houdt zijn eigen opties en prijzen, en de knop om aan de winkelwagen toe te voegen van elk product draagt de keuze die de shopper voor dat product heeft gemaakt.


De app-insluiting alleen toont de widget alleen op productpagina's. Gebruik voor elke andere pagina het blok zoals hierboven.


Een andere optie voor een knop, een banner of een e-mail is een snelle abonneerlink: onder Groei > Snelle abonneerlinks maak je een link die direct naar de checkout gaat met het product en het abonnement al gekozen. Zie Uitnodigingen voor abonnementen maken (snelle abonneerlinks).


Popups voor snel toevoegen en snel bekijken


Veel thema's hebben een knop Snel toevoegen of Snel bekijken op productkaarten in collecties en op de homepage. Of de widget daar verschijnt, hangt af van het thema:


  • Thema's waarvan de popup het volledige productformulier laadt (bijvoorbeeld Dawn met standaard snel toevoegen): de widget en bundelopties verschijnen in de popup als het blok Subscriptions + Bundles in je producttemplate staat. Voeg het toe zoals beschreven in Een exacte positie kiezen.
  • Horizon en de thema's die erop zijn gebouwd: bij een product met een abonnement opent de knop voor snel toevoegen de productpagina in plaats van een popup, en de widget staat daar zoals gewoonlijk.
  • Andere thema's: toont de popup geen widget of een kapotte, zet dan snel toevoegen uit in de thema-editor (meestal een instelling bij de collectie- of productrastersectie), zodat shoppers naar de productpagina gaan, of neem contact op met support, dan bekijken we je thema.


PageFly en andere pagebuilders


Er is geen widget-ID, shortcode of insluitcode, en code plakken in een element Aangepaste code of HTML werkt niet. De widget is een Shopify-appblok, en Shopify laat appblokken alleen via de thema-editor toevoegen. Pagebuilders ondersteunen dit met een eigen element voor appblokken.


Op een productpagina van PageFly hoef je niets te doen. Met de app-insluiting ingeschakeld (zie de stappen hierboven) plaatst de widget zichzelf boven de knop om aan de winkelwagen toe te voegen, net als op de productpagina van een thema.


Op een landingspagina van PageFly:


  1. Open in de PageFly-editor je pagina en sleep het element App blocks (onder Shopify-elementen) naar de plek waar je de widget wilt hebben. PageFly staat één element App blocks per pagina toe, en het heeft een Online Store 2.0-thema nodig.
  2. Volg de melding van PageFly om de thema-editor te openen en klik daarna op Blok toevoegen, Apps, Subscriptions + Bundles.
  3. Klik op het blok en stel zijn Product in op het product waarop je aanbieding is gericht.
  4. Zorg dat de pagina ook de knop van PageFly heeft om datzelfde product aan de winkelwagen toe te voegen, en sla daarna op en publiceer.


De eigen handleiding van PageFly voor dit element: How to use the App blocks element.


GemPages, Shogun en andere builders werken op dezelfde manier: productpagina's krijgen de widget via de app-insluiting, en andere pagina's hebben het element van de builder voor Shopify-appblokken nodig, met Subscriptions + Bundles erin toegevoegd. Vermeldt je builder het blok niet, neem dan contact op met support.


Voeg het product zodra je pagina live is aan het winkelmandje toe met een geselecteerd abonnement en controleer of het winkelmandje het toont. Zo niet, stuur ons dan de link naar de pagina, dan plaatsen we de widget voor je.


Instellen op een niet-gepubliceerd thema


Widget inschakelen opent altijd je live (gepubliceerde) thema. Om eerst op een ander thema in te stellen en te testen:


  1. Ga naar Online winkel > Thema's, zoek het thema en klik op Aanpassen (of Thema bewerken).
  2. Open App-insluitingen, zet Supr Bundle & Subscriptions aan en klik op Opslaan.
  3. Bekijk een voorbeeld van dat thema en open een product dat in een van je aanbiedingen zit.


De widget verschijnt alleen op thema's waar hij is aangezet, dus je live thema blijft ongewijzigd totdat je hem daar ook aanzet. Je aanbiedingen worden door elk thema gedeeld: zodra de widget in je live thema aanstaat, verschijnt elke Gepubliceerde aanbieding daar.


Problemen oplossen


Verschijnt de widget niet na het opslaan, controleer dan of de thema-editor succesvol heeft opgeslagen. Je kunt opnieuw op Widget inschakelen klikken om het nogmaals te proberen.


Zie je de widget nog steeds niet op je productpagina's, doorloop dan De abonnementswidget wordt niet getoond in mijn winkel. Verschijnt hij twee keer of op de verkeerde plek, zie dan De abonnementswidget verschijnt twee keer of onderaan de pagina.


Veelgestelde vragen


Moet ik een insluitcode of Liquid-snippet aan mijn thema toevoegen?
Nee. Met Design > Widget inschakelen zet je de widget in je thema aan, en je klikt in de thema-editor op Opslaan. Er hoeft niets te worden geplakt.


Ik heb op Widget inschakelen geklikt, maar er is niets veranderd in mijn winkel. Waarom?
Bijna altijd is de thema-editor gesloten zonder op Opslaan te klikken. Klik opnieuw op Widget inschakelen en klik rechtsboven in de thema-editor op Opslaan.


Heb ik zowel de app-insluiting als het appblok nodig?
Je hebt de app-insluiting nodig. Het blok Subscriptions + Bundles is optioneel: voeg het alleen toe om een exacte positie te kiezen of om de widget te tonen op een pagina die geen productpagina is. Als je beide gebruikt, wordt de widget nooit twee keer getoond.


De thema-editor zegt dat het appblok niet kon worden toegevoegd. Wat nu?
Gebruik in plaats daarvan de app-insluiting: Design > Widget inschakelen, en dan Opslaan. De insluiting heeft geen plek in je productsectie nodig, dus hij werkt op thema's waarvan de productsectie geen appblokken accepteert.


Moet ik de widget aan elk product toevoegen?
Nee. De widget verschijnt bij elk product dat in een Gepubliceerde aanbieding zit. Je kiest de producten in de aanbieding, onder Van toepassing op, niet in het thema.


Kan ik de widget op mijn homepage of een landingspagina tonen?
Ja. Voeg een sectie Uitgelicht product toe, voeg daaraan het blok Subscriptions + Bundles toe en stel zijn Product in. Zie De widget op andere pagina's tonen.


Kunnen klanten op de winkelwagenpagina een abonnement kiezen?
Ja, met de add-on Upsell in winkelwagen op de pagina Design: een knop Abonneer en bespaar onder elk product dat eenmalig is gekocht, op de winkelwagenpagina en in de winkelwagenlade, zet dat product om naar zijn eerste abonnementsoptie. Om een andere frequentie te kiezen, kiezen klanten op de productpagina. Op Shopify Plus kunnen ze ook bij het afrekenen overstappen met de Checkout Subscription Picker, zie Bij het afrekenen overstappen op een abonnement. Zie Upsell in winkelwagen.


Kan ik de widget in plaats daarvan onder de knop om aan de winkelwagen toe te voegen zetten?
Ja. Zet op de pagina Design Plaatsing > Positie op productpagina op Onder de koopknoppen en klik op Opslaan. Zie Een exacte positie kiezen.


Hoe verplaats ik de widget naar boven de knop om aan de winkelwagen toe te voegen?
Met de app-insluiting aan komt hij daar vanzelf. Staat hij ergens anders, zie dan De abonnementswidget verschijnt twee keer of onderaan de pagina.


Gerelateerde handleidingen


Bijgewerkt op: 24/10/2026

Was dit artikel nuttig?

Deel uw feedback

Annuleer

Dankuwel!