> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# De abonnementswidget in je online winkel inschakelen

| Ga naar deze pagina via [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget)

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](#3-videoles)
* [Stapsgewijze instructies](#3-stapsgewijze-instructies)
* [Waar de widget verschijnt](#3-waar-de-widget-verschijnt)
* [Een exacte positie kiezen](#3-een-exacte-positie-kiezen)
* [De widget op andere pagina's tonen](#3-de-widget-op-andere-paginas-tonen)
* [Popups voor snel toevoegen en snel bekijken](#3-popups-voor-snel-toevoegen-en-snel-bekijken)
* [PageFly en andere pagebuilders](#3-pagefly-en-andere-pagebuilders)
* [Instellen op een niet-gepubliceerd thema](#3-instellen-op-een-niet-gepubliceerd-thema)
* [Problemen oplossen](#3-problemen-oplossen)
* [Veelgestelde vragen](#3-veelgestelde-vragen)
* [Gerelateerde handleidingen](#3-gerelateerde-handleidingen)

### 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.

${frame}[](https://www.youtube.com/embed/UpHcV7CoYVg)

### 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](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/screenshot-2025-07-12-at-19571_gm3jkw.png =757xauto)
4. 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](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/5c6ce361-b562-467d-bf5c-f57834_bnt2do.png)
5. 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](#3-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.
3. 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)](https://supr-bundles-and-subscriptions.crisp.help/nl/article/creating-subscription-invitations-quick-subscribe-links-1444st5/).

### 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](#3-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](https://help.pagefly.io/page-structure-and-elements/shopify-elements/custom-content/how-to-use-shopify-app-block-element-with-pagefly-section).

**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](https://supr-bundles-and-subscriptions.crisp.help/nl/article/the-subscription-widget-is-not-displayed-in-my-store-1d3klfw/). Verschijnt hij twee keer of op de verkeerde plek, zie dan [De abonnementswidget verschijnt twee keer of onderaan de pagina](https://supr-bundles-and-subscriptions.crisp.help/nl/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-im7fci/).

### 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](#3-de-widget-op-andere-paginas-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](https://supr-bundles-and-subscriptions.crisp.help/nl/article/what-shoppers-see-in-the-cart-and-at-checkout-jvosff/#3-bij-het-afrekenen-overstappen-op-een-abonnement-shopify-plus). Zie [Upsell in winkelwagen](https://supr-bundles-and-subscriptions.crisp.help/nl/article/product-page-add-ons-l7btnu/#3-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](#3-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](https://supr-bundles-and-subscriptions.crisp.help/nl/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-im7fci/).

### Gerelateerde handleidingen

* [[Videohandleiding] Hoe zet je de APP-INSLUITING aan](https://supr-bundles-and-subscriptions.crisp.help/nl/article/video-guide-how-to-enable-app-embed-k30t48/)
* [De abonnementswidget](https://supr-bundles-and-subscriptions.crisp.help/nl/article/the-subscription-widget-mv3kvz/)
* [De abonnementswidget wordt niet getoond in mijn winkel](https://supr-bundles-and-subscriptions.crisp.help/nl/article/the-subscription-widget-is-not-displayed-in-my-store-1d3klfw/)
* [De abonnementswidget verschijnt twee keer of onderaan de pagina](https://supr-bundles-and-subscriptions.crisp.help/nl/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-im7fci/)
* [Uitnodigingen voor abonnementen maken (snelle abonneerlinks)](https://supr-bundles-and-subscriptions.crisp.help/nl/article/creating-subscription-invitations-quick-subscribe-links-1444st5/)
* [Wat er met de widgeteditor is gebeurd](https://supr-bundles-and-subscriptions.crisp.help/nl/article/what-happened-to-the-widget-editor-1wuoza9/)