Je eigen widget ontwerpen

Met de ontwerper voor aangepaste widgets schrijf je zelf de HTML en CSS van je abonnementswidget, je bundelopties en het vak eromheen, zodat de widget er precies uitziet als de rest van je productpagina. Hij zit in bèta: vraag ons in de chat om hem voor je winkel in te schakelen.

De ontwerper openen

1. Ga naar Supr Bundles & Subscriptions > Design.
2. Klik op het design Aangepast (Liquid). De eerste keer opent dit de ontwerper, zodat je je design kunt maken.

Klik op Opslaan om je wijzigingen te bewaren. Elke wijziging die je opslaat, wordt bewaard onder Versies, zodat je altijd terug kunt.

Je design in je winkel gebruiken

Zodra je design is opgeslagen, kun je Aangepast (Liquid) op de pagina Design kiezen zoals elk ander design, voor de abonnementswidget, voor de bundelwidget, of voor beide. Kies het en sla de pagina Design op. Vanaf dan is elke opslag in de ontwerper meteen live in de widgets die het gebruiken.

De drie tabbladen

• Abonnementswidget: de abonnementsopties en de rij voor eenmalige aankoop.
• Bundelopties: de bundelbalk en elk van zijn opties, inclusief Stel een box samen, vaste bundels, add-ons en gratis cadeaus.
• Lay-out: alles wat het app-blok toont, in één vak: de titel van de aanbieding, de abonnementswidget, de bundelopties, en een eigen knop Toevoegen aan winkelwagen en aantal.

Het tabblad Lay-out heeft één schakelaar, Deze lay-out gebruiken: als die aan staat, plaatst je lay-out op elke productpagina de titel van de aanbieding, beide widgets en je eigen knop Toevoegen aan winkelwagen. De andere twee tabbladen volgen de pagina Design, zoals hierboven.

Elk tabblad heeft een lijst Beginnen met een sjabloon. Een sjabloon vervangt alleen de markup en stylesheet van dat tabblad, zodat je je bundelopties met het ene sjabloon kunt beginnen en je abonnementswidget met een ander.

Een design van ons supportteam importeren

Als ons team een design voor je maakt, sturen ze het als één blok tekst.

1. Open de ontwerper en klik op Design importeren.
2. Plak het hele blok en klik op Importeren. Het vervangt elk sjabloon, elke stylesheet en elk label op alle drie de tabbladen.
3. Controleer de preview en klik dan op Opslaan.
4. Als je winkel het design nog niet gebruikt, kies je op de pagina Design Aangepast (Liquid) voor de widget.

Een design kan ook je merkkleur, afronding en spatiëring van de pagina Design meenemen. De ontwerper toont ze in een banner voordat je opslaat, en bij het opslaan blijven ze bij het design. Ze veranderen ook de stijl van je andere widgets; klik op Pagina Design laten zoals hij is om het design zonder die waarden op te slaan.

Hoe een sjabloon werkt

Een sjabloon is gewone HTML met Liquid-strings tussen dubbele accolades, zoals {{ selling_plan.name }} of {{ tier.price | money }}. Typ {{ in de editor om elke string te zien die het onderdeel dat je bewerkt accepteert, met wat hij toont; het gedeelte Naslag noemt ze ook. Al het andere tussen dubbele accolades, en elke Liquid-tag behalve een opmerking, wordt geweigerd met de regel waarop het staat.

Er zijn geen voorwaarden. Om iets zonder waarde te verbergen, gebruik je CSS: een lege prijs of badge toont niets, dus :empty verbergt dat element. De gekozen abonnementsoptie heeft een aangevinkt keuzerondje (.sss-liquid-row:has(> input:checked)) en de gekozen bundeloptie heeft de klasse .sss-bundle-block__tier--selected.

De app bewaart de onderdelen die je winkel nodig heeft om te werken: de keuzerondjes, de variantkiezers, de aantalkiezers en de gegevens die de webwinkel leest om prijzen actueel te houden en de juiste artikelen aan de winkelwagen toe te voegen. Jouw markup staat eromheen en erin.

Abonnementswidget

• Omhulsel: alles rond de opties, zoals een kop of een rij met vertrouwenskenmerken. Plaats de opties met {{ sss.options }}. Je kunt ook {{ sss.one_time }}, {{ sss.add_to_cart }} en {{ sss.quantity }} plaatsen.
• Aanbiedingsgroep: één keer per aanbieding getekend. Toon de opties als rijen met {{ sss.group.options }}, of maak van de hele aanbieding één kaart met een keuzelijst ({{ sss.plan_picker }}) of knoppen ({{ sss.plan_picker_pills }}).
• Abonnementsoptie en Eenmalige aankoop: elk één rij.
• Voordeelregel, Gratis cadeau en Loyaliteitsbeloning: hoe één voordeel, cadeau of beloning eruitziet, in een optie geplaatst met {{ sss.benefits }}, {{ sss.gifts }} en {{ sss.rewards }}.

Prijzen omvatten besparingen, de prijs per dag, per portie en per eenheid, de prijs na de eerste bestellingen en de factureringsregel. Om een prijs per portie te tonen, voeg je het veld Porties toe onder Productvelden en vul je het in bij elke variant.

Bundelopties

• Bundelbalk: alles rond de opties. Plaats ze met {{ sss.tiers }}.
• Bundeloptie: één optie, bijvoorbeeld een pakketgrootte. Hij kan de titel, badge, prijs, volledige prijs, prijs per eenheid en besparingen van de optie tonen. Plaats de samensteller, de producten van een vaste bundel, add-ons, cadeaus en variantkiezers waar je wilt met {{ sss.tier.builder }}, {{ sss.tier.products }}, {{ sss.tier.addons }}, {{ sss.tier.gifts }} en {{ sss.tier.variant_pickers }}. Alles wat je weglaat, volgt je markup.
• Bundelproduct: hoe één product eruitziet in een vaste bundel, een optie Stel een box samen en de add-ons: de afbeelding, titel, prijs, leverancier en sticker.

Om een sticker zoals "Bestseller" op een product te tonen, voeg je het veld Bundelsticker toe onder Productvelden en vul je het in bij het product. Vertaal het met Translate & Adapt van Shopify. Stickers worden getoond voor de eerste 20 bundelproducten op een pagina.

Zet Een samensteller per groep tonen aan om de groepen van een optie Stel een box samen als tabbladen te tonen, met telkens één open groep. Elk tabblad toont de naam en ondertitel van de groep, die je instelt bij de groep in Aanbiedingen.

Labels en vertalingen

Je eigen woorden staan onder Labels, en je print er een met {{ sss.labels.name }}. Een label dat in een abonnementsoptie wordt gebruikt, kan de waarden van die optie bevatten, zoals Billed {price} {billing_frequency}, zodat de hele zin in elke taal één label blijft. Vertaal je labels onder Instellingen > Vertalingen > Widgets.

De labels van een sjabloon beginnen in de taal van je winkel. Bij het opslaan wordt elk label dat je niet hebt herschreven ook vertaald naar de andere talen van je winkel, tenzij je het al zelf hebt vertaald. Labels die je zelf schrijft, vertaal je zelf.

Stylesheets

Elk tabblad heeft een eigen stylesheet. Elke regel wordt bij het opslaan beperkt tot het onderdeel dat hij stijlt, zodat je CSS de rest van je thema niet kan veranderen. De stylesheet kan geen scripts laden of buiten de widget reiken.

Voorbeeld bekijken

De preview naast de editor tekent je design zoals de webwinkel het zal tonen. Kies een van de voorbeeldproducten, of klik op Een product uit je winkel bekijken om het op een van jouw producten te zien. De eigen lettertypen en stijlen van je thema zijn alleen zichtbaar in je winkel. De preview voert je JavaScript niet uit.

JavaScript

In het vak JavaScript onderaan de ontwerper staat een script voor je design. Het draait één keer op elke pagina waar je design de abonnementswidget of de bundelopties tekent, nadat ze zijn getekend. Een pagina kan meer dan één widget tonen, dus vind ze allemaal met document.querySelectorAll.

Wat de ontwerper niet doet

• Een sjabloon kan niet de eigen klassenamen of data-attributen van de app gebruiken (zoals purchase-option-* of data-tier-total); de editor vertelt je welke als hij het weigert.
• Wij ondersteunen de ontwerper zelf. Het bouwen en onderhouden van de markup en CSS van je design is aan jou of je ontwikkelaar.

Bijgewerkt op: 24/10/2026