Artikelen over: Widgets

De abonnementswidget

Om deze pagina te openen ga je naar Supr Bundles & Subscriptions > Design

Op de Design-pagina bepaal je hoe je abonnementswidget en je bundelwidget eruitzien op je productpagina's: het design, de kleuren, de hoeken en afstanden, welke onderdelen zichtbaar zijn, de teksten die klanten lezen en je eigen CSS. Beide widgets ontwerp je samen op deze ene pagina, zodat ze bij elkaar en bij je thema passen. Dat is de uniforme widgetervaring: één set instellingen, beide widgets, elk design.

Als de pagina Je widgets zijn nog niet live meldt, klik dan eerst op Widget inschakelen. Zie De abonnementswidget inschakelen in de online winkel.

Inhoudsopgave

Wat is de abonnementswidget?
Hoe de pagina is opgebouwd
Het voorbeeld
Design
Kleuren
Vorm
Afstand
Lettertype
Elementen
Koppen en de titel van de aanbieding
Een elementrij lezen
Badges
Standaardkleuren en eigen kleuren
Prijzen
De volgorde waarin dingen verschijnen
Labels
Aangepaste CSS
Designs per aanbieding
Je wijzigingen opslaan
Je vorige design herstellen
De regel Powered by Supr
Hulp bij je design
Tips en best practices
Veelgestelde vragen
Gerelateerde handleidingen

Wat is de abonnementswidget?

De abonnementswidget staat boven je knop om aan de winkelwagen toe te voegen en laat zien op welke manieren een product te koop is: de eenmalige aankoop en je abonnementsopties. Klanten kiezen hun leverfrequentie, zien de eventuele korting en voegen het product toe aan hun winkelwagen. Heeft je aanbieding ook bundelopties, dan verschijnt de bundelwidget samen met de abonnementswidget op dezelfde productpagina.

Wat de widgets aanbieden, dus welke opties, welke kortingen en of de rij voor de eenmalige aankoop zichtbaar is, stel je per aanbieding in onder Aanbiedingen. Hoe de widgets eruitzien en welke gedeelde teksten ze tonen, stel je in op deze pagina.

Hoe de pagina is opgebouwd

Het voorbeeld links, dat met je meescrolt.
Eén instellingenkaart rechts, met de secties in deze volgorde: Design, Kleuren, Vorm, Afstand, Lettertype, Elementen en Aangepaste CSS.
Labels, een eigen kaart onder de instellingenkaart, voor de teksten die je klanten lezen.
Instellingen voor add-ons onder beide, voor de extra's rond de widget, zoals de badge naast de productprijs, de tekst van de knop om aan de winkelwagen toe te voegen en de datumkiezer voor de leverdatum. Zie Add-ons voor de productpagina.
Vorig design herstellen, alleen bij winkels die hun widgets al hadden gestyled voordat deze pagina bestond.
Hulp nodig om dit op je merk af te stemmen?, met een knop Chatten met een expert die een chat met ons team opent.

Het voorbeeld

Het voorbeeld staat naast de instellingen en scrolt met je mee, zodat je tijdens het aanpassen ziet wat er verandert. Het toont je productpagina zoals een klant die ziet, met de bundel- en abonnementswidget in de volgorde waarin ze echt worden getoond, en daaronder het veld voor de leverdatum als je dat gebruikt.

Gebruik Voorbeeldproduct erboven om het voorbeeld te bekijken met de opties en prijzen van een echt product in plaats van voorbeeldgegevens, en Voorbeeldvariant om een product te controleren waarvan de varianten verschillend geprijsd zijn.

Elke wijziging verschijnt in het voorbeeld voordat je opslaat, dus je kunt van alles proberen en weer negeren. Op een desktopscherm wordt het voorbeeld nooit hoger dan het venster: de kop en de voettekst blijven staan en de widgets scrollen ertussen.

Kleuren en afstanden kunnen in je live thema nog iets afwijken, omdat het voorbeeld draait in het Shopify-beheer en niet in je winkel. Open een productpagina in je winkel om het eindresultaat te zien.

Design

Deze sectie toont het abonnementsdesign en de bundelindeling die nu live staan, elk met een miniatuur.

Klik op Wijzigen om Kies een design te openen.
Gebruik de schakelaar bovenaan om Abonnementswidget of Bundelwidget te kiezen. Je kunt typen in Designs zoeken of op categorie filteren.
Klik op het design dat je wilt. De galerij sluit en het voorbeeld toont het design.
Sla op met de opslagbalk bovenaan de pagina. Er verandert niets in je winkel totdat je opslaat.

Abonnementsdesigns, in de categorieën van de galerij:

Conversie
- Checkbox: één selectievakje om te schakelen tussen eenmalig en abonnement.
- Aurora: vloeiende randen met kleurverloop en een glinsteringseffect. Hiermee begint een nieuwe winkel.
- Lure: het paradepaardje, met voordelen die in het oog springen en een kortingsbanner.
Klassiek
- Classic+: een gedetailleerde indeling met ruimte voor vooruitbetaalde opties en meerdere keuzes. De prijs staat bovenaan en volgt de optie die een klant heeft gekozen, en elke optie houdt zijn eigen prijs met het kortingslabel ernaast.
- Dropdown+: alle details in een compacte vervolgkeuzelijst. De prijs staat bovenaan en volgt de optie die een klant heeft gekozen, zodat de rijen in de vervolgkeuzelijst een gewone lijst met frequenties blijven.
- Panel+: een indeling met tabbladen en een keuzerondje bij elke optie.
Minimalistisch
- Classic: een eenvoudige indeling voor opties waarbij per bestelling wordt betaald, met maximaal drie keuzes.
- Dropdown: de meest compacte manier om je opties te tonen.
- Panel: nette, eenvoudige paneelknoppen.
Esthetisch
- Blobs: een geanimeerde stijl die de aandacht trekt.

Bundelindelingen:

Panels: rijen, elk in een eigen paneel met rand. Hiermee begint een nieuwe winkel.
Cards: horizontale kaarten, handig om twee of drie opties naast elkaar te vergelijken.
List: verticale rijen met een keuzerondje bij elke optie. De meest compacte.

Elk design stel je op deze pagina in, in de secties hieronder, dus je hoeft nergens anders heen en niets dubbel in te stellen. Er is steeds maar één abonnementsdesign en één bundelindeling live in je winkel, en elke aanbieding gebruikt die. De instellingen van de andere blijven bewaard, dus heen en weer wisselen kost je niets.

Van design wisselen heeft nooit invloed op je aanbiedingen, je prijzen of je abonnees.

Neon en de Aangepast-designs staan niet meer in de galerij. Een winkel die er al een gebruikt, behoudt het en ziet de kaart nog steeds. Een aangepast design is geschreven in HTML en CSS in plaats van samengesteld uit instellingen, daarom heeft het een link Aanpassen die de code opent die ons team voor je heeft geschreven. Zie Wat er met de widgeteditor is gebeurd.

Zodra je wijzigingen op deze pagina hebt opgeslagen, verschijnt in deze sectie een knop Terugzetten naar standaard. Die zet je kleuren, vorm, afstand, lettertype, elementen, labels en aangepaste CSS terug naar wat de app standaard meelevert, voor elk design, en laat het design en de bundelindeling die je hebt gepubliceerd ongemoeid. Net als alles hier gaat het pas in als je opslaat.

Kleuren

Eén keuze, die naar alle designs tegelijk wordt geschreven, zodat je winkel zijn look behoudt als je later van design wisselt. Elk soort antwoord staat op een eigen regel onder een kleine kop:

Van je thema, als eerste: het gestippelde swatch Overnemen van je thema neemt alles over van je thema, gevolgd door de eigen kleurenschema's van je thema, getoond als swatches in hun eigen kleuren. Een schema kiezen neemt de achtergrond en de tekst ervan over. Deze regel verschijnt alleen als je thema kleurenschema's publiceert.
Hoofdkleur en Achtergrond, bij thema's die een kleurenpalet publiceren in plaats van kleurenschema's, zoals Horizon. Zie hieronder.
Eén kleur, en alles volgt: de gewone kleuren, langs het kleurenwiel van blauw tot roze en rood, met de neutrale kleuren als laatste en je eigen kleuren aan het eind. Een kleur kiezen stelt je primaire kleur in, en alles wat de widgets tekenen volgt die: de optie die een klant heeft gekozen, de randen, de keuzerondjes en de besparingsbadges. De tekst op een badge wordt voor je gekozen, zodat hij leesbaar blijft, welke kleur je ook kiest. Voor de meeste winkels is dit het hele werk.
Kleurverloop: dertien kant-en-klare mengingen, elk getekend in zijn eigen kleuren, te beginnen met Aurora en eindigend met de enige neutrale, Ink & silver. Daartussen staan Middernacht, Bloesem, Roos, Zonsondergang, Zand, Gloed, Munt, Bos, Oceaan, Lagune en Amethist. Kies er een en de drie kleurstops verschijnen eronder, Basis, Tweede en Derde, zodat je ze kunt bijstellen. Deze regel verschijnt alleen zolang een design dat een kleurverloop kan tonen is gepubliceerd; bij de andere zou hij niets doen.

Publiceert je thema een kleurenpalet in plaats van kleurenschema's, dan is er geen paar om over te nemen. Je kiest dan zelf uit twee rijen in de eigen kleuren van het thema:

Hoofdkleur is de kleur waarin je widgets worden getekend: de optie die een klant heeft gekozen, de randen, de keuzerondjes en de badges. Je tekst volgt die kleur, dus je hoeft niets extra in te stellen.
Achtergrond is de kaart erachter.

Een kleur kan niet allebei zijn. Kies je een kleur die de andere rij al gebruikt, dan wisselen de twee van plaats. Een paar van licht op donker omkeren is dus één klik in plaats van drie.

Het zijn alternatieven, geen lagen, omdat ze dezelfde vraag beantwoorden. Een kleurverloop is een kleur als elke andere: de stop Basis is wat de rest van de widget overneemt, dus de gekozen optie, de randen en de badges volgen die allemaal. Kies je in plaats daarvan een effen kleur, dan worden die designs vlak getekend, en een themaschema kiezen neemt het paar van dat schema over en leidt de kleur af van de tekst ervan.

Een kleurverloop bereikt alles op de widget dat de aandacht moet trekken, niet alleen de omlijsting. Bij de optie die een klant heeft gekozen worden de optienaam en de prijs ermee getekend. Bij elke optie, gekozen of niet, worden de badges, de besparingslabels en de regels voor gratis cadeau en gratis verzending ermee getekend. De regels voor het cadeau en de gratis verzending schuiven langzaam heen en weer, wat opvalt zonder de aandacht van de prijs weg te trekken. Je kortingsbadge neemt de menging over in elk design, omdat de badge op een abonnementsoptie en de badge op een bundeloptie hetzelfde object zijn; geef de badge een eigen kleur op zijn rij onder Elementen en hij houdt die.

Een regel voor een gratis cadeau of gratis verzending heeft een omlijsting in jouw kleur zolang de optie niet is gekozen, en wordt ermee gevuld zodra een klant die optie kiest. Dat geldt voor een effen kleur net zo goed als voor een kleurverloop, dus een rij opties toont één effen kleurblok op de optie die de klant echt heeft gekozen, en de rest leest als aanbiedingen die nog openstaan.

Welke menging je ook kiest, de tekst erop wordt zo gekozen dat hij leesbaar blijft. De losse optie blijft erbuiten: dat is de gewone rij voor één stuk tegen de volle prijs in plaats van een deal, dus die houdt een gewone omlijsting en zijn prijs in je gebruikelijke kleur.

Stel dit eerst in en gebruik daarna Elementen hieronder alleen voor de onderdelen die je anders wilt hebben.

Het glinsteren van Aurora uitzetten. Aurora is alleen geanimeerd zolang er een menging is om te tekenen. Kies een effen kleur onder Eén kleur, en alles volgt en Aurora wordt vlak getekend, zonder glinstering. Wil je het kleurverloop houden maar de beweging kwijt, kies dan een ander design of vraag het ons in de chat.

Een heel lichte kleur zet de widget op zijn kop. Een crèmekleur, een lichtgrijs of een gebroken wit is niet te zien op de witte kaart die de designs standaard hebben. Daarom wordt de kaart dan juist donker, in een diepe tint van je eigen kleur, en houden je randen, keuzerondjes en tekst de kleur op volle sterkte erbovenop. Kies een eigen Achtergrond en die wordt in plaats daarvan gebruikt, en terug naar een gewone kleur zet de witte kaart weer terug.

Je primaire kleur omlijnt de optie die een klant heeft gekozen in plaats van hem te overspoelen. Vooral bij het Checkbox-design behoudt de aangevinkte optie zijn eigen achtergrond en neemt de kleur over op zijn rand en zijn vinkje, omdat die optie de hele widget is en niet één rij in een lijst.

Zolang je widgets de eigen kleuren van je thema volgen, krijgt een optie die een klant niet heeft gekozen een omlijsting in die inktkleur, een stap terug, en is de gekozen optie de enige effen omlijsting in de lijst. Lure tekent zijn kortingsbanner als een band van diezelfde teruggenomen inkt in plaats van als een effen blok.

De naam en de prijs op de gekozen optie krijgen niet jouw kleur. Ze worden zo gekozen dat ze leesbaar zijn tegen wat die optie ook als vulling heeft. Stel ze zelf in op de rijen Naam van aanbieding, Naam van optie en Prijs als je iets anders wilt.

Komen de kleuren van je thema niet door zoals je verwacht, kies dan zelf een kleur onder Eén kleur, en alles volgt in plaats van over te nemen van het thema. Sommige thema's geven hun kleuren niet door aan apps.

Als je een design element voor element had gestyled voordat deze pagina bestond, vervangt opslaan hier die kleuren, op dezelfde manier als het de afstanden en afrondingen vervangt die je had ingesteld. Dat is terug te draaien: Je vorige design herstellen hieronder legt uit hoe je die styling terugkrijgt.

Vorm

Afronding bepaalt hoe rond de hoeken zijn.
Randdikte bepaalt de breedte van de randen.

Bij een design dat een rand met kleurverloop tekent, bepaalt de dikte ook die rand, zodat het kleurverloop en de vlakke randen ernaast even zwaar uitkomen. De optie die een klant heeft gekozen, en de optie onder zijn aanwijzer, worden gemarkeerd door hun kleur met diezelfde dikte in plaats van een zwaardere eigen ring. De afronding werkt ook door binnen een bundeloptie: de rijen voor het gratis cadeau, de gratis verzending en de add-ons worden er op afgestemd.

Afstand

Afstand bestaat uit drie delen:

Binnen elke optie: Opvulling boven en Opvulling onder bepalen de ruimte boven en onder de inhoud van elke abonnementsoptie en bundeloptie. Laat je de onderkant ongemoeid, dan volgt die de bovenkant. Horizontale opvulling bepaalt beide zijkanten.
Tussen de widgets: Tussenruimte is de ruimte tussen de bundelwidget, de abonnementswidget en het veld voor de leverdatum, voor als de onderdelen te dicht op elkaar of te ver uit elkaar staan.
Rond de widget: Ruimte boven en Ruimte onder het geheel. Gebruik ze als je thema de widget te dicht bij de knop om aan de winkelwagen toe te voegen of bij de prijs zet.

Alles geldt tegelijk voor je abonnementswidget en je bundelwidget, en voor het veld voor de leverdatum eronder.

Omdat één instelling overal een waarde bepaalt, vervangt opslaan hier afstanden en afrondingen die je mogelijk had ingesteld op afzonderlijke onderdelen van een design voordat deze pagina bestond. Dat is terug te draaien: zie Je vorige design herstellen.

Lettertype

Eén lettertype voor je abonnementswidget en je bundelopties samen, titels inbegrepen:

Volgt je thema, de standaard: titels gebruiken het koplettertype van je thema en al het andere het lettertype voor lopende tekst, dezelfde verdeling als je thema maakt.
Hoofdtekstlettertype van thema of Koplettertype van thema: de hele widget in dat ene lettertype.
Systeem, Serif of Monospace: een lettertype dat elk apparaat al heeft.
Aangepast: typ de naam van een lettertype dat je thema al laadt, zoals Futura PT, precies zoals je thema het noemt. Je kunt er een paar opgeven, gescheiden door komma's, en het eerste dat de browser heeft wordt gebruikt. Alleen letters, cijfers, spaties, komma's en koppeltekens blijven behouden. Heeft de browser het niet, dan valt de widget terug op het lettertype voor lopende tekst van je thema.

De app laadt zelf nooit een lettertype, dus een aangepast lettertype is alleen zichtbaar als je thema (of een andere app) het al laadt op de productpagina. Groottes en gewichten blijven per rij staan onder Elementen.

Het voorbeeld in het beheer kan de lettertypen van je winkel niet laden, dus de lettertypen van je thema en een aangepast lettertype worden daar in het eigen lettertype van het beheer getoond. Open een productpagina in je winkel om het echte resultaat te zien.

Elementen

Deze sectie heeft één rij per onderdeel van de widget, in de volgorde waarin je de productpagina leest. Een rij geldt voor elk design dat dat onderdeel heeft, dus de kop verbergen verbergt hem in alle designs, en een rij die je gepubliceerde design niet kan toepassen wordt helemaal niet getoond.

Beide widgets: Titel van aanbieding, Varianten als stalen tonen, Kortingsbadge, Kortingsbadge bij elke optie (alleen bij Classic+) en Berichtbadge.
Abonnementsopties: Kop, dan het vlak (Achtergrond, Rand, Keuzerondje), dan de tekst erop: Naam van aanbieding, Sectiekop, Naam van optie, Beschrijving, Leveringsfrequentie, Prijs, Doorgestreepte prijs, Prijs per eenheid, Voordelen, Pictogram voordeel, Kop van voordelen en Infotooltip.
Bundelopties: Kop, Achtergrond, Rand, Keuzerondje, Titel, Prijs, Doorgestreepte prijs en Prijs per eenheid.
Leverdatum: Kop, Veld en Rand, de styling van het datumveld onder de widgets. Deze sectie verschijnt pas zodra de Datumkiezer is ingeschakeld in Instellingen voor add-ons. Zie Add-ons voor de productpagina.
Pagina-indeling: Bundel bovenaan, of de bundelwidget boven de abonnementswidget staat, en Bundelprijzen synchroniseren, of bundelprijzen de prijs per levering van het gekozen abonnement volgen. Beide staan standaard aan.

Binnen Abonnementsopties en Bundelopties markeert een kleine kop Alleen in dit design de rijen die bij het design horen dat je hebt gepubliceerd en bij geen ander. De lijst verandert met het design dat je publiceert. Bijvoorbeeld:

Vervolgkeuzelijst levering, bij de designs die een keuzelijst tonen voor de leveringsfrequentie (Dropdown, Dropdown+, Lure en Checkbox): de vulling, de tekst en het pijltje erin, en de grootte en het gewicht van die tekst.
Dikke rand en Beschrijving verbergen tot gekozen, bij Aurora.
Dikke rand bij de bundelopties, in de indelingen die hem kunnen tekenen.

De twee widgetsecties staan in de volgorde waarin de widgets op je productpagina op elkaar liggen, dus degene die een klant als eerste ziet, bereik je ook als eerste. Zet Bundel bovenaan om en ze wisselen meteen van plaats.

Rand en Achtergrond hebben elk twee kleuren: eerst de gewone, dan die voor de optie die een klant heeft gekozen. Staat dit op standaard, dan volgt de gekozen kleur je primaire kleur, en dat is wat de meeste winkels willen.

De tweede kleur van de bundelrij Titel, die voor een gekozen optie, verschijnt alleen waar er een gevulde optie is om op te staan. Je bundelopties markeren de gekozen optie met een subtiele accentkleur, en Panels geeft met de sterkte van de rand aan welke optie is gekozen. Zou je liever hebben dat de gekozen optie helemaal gevuld is, stuur dan een bericht naar support en wij stellen het voor je in.

Naam van aanbieding en Naam van optie zijn twee rijen, geen één. Bij de designs die beide tonen is de naam van de aanbieding de regel boven een set keuzes, "Abonneer en bespaar", en de naam van de optie is één keuze daarbinnen, "Levering elke maand". Bij de designs die een platte lijst met opties tonen is er geen naam van de aanbieding, dus doet alleen de rij voor de naam van de optie iets.

Voordelen is één rij voor beide voordelenlijsten: de vinkjes onder een abonnementsoptie en de vinkjes onder de rij voor de eenmalige aankoop. De kleur, grootte en dikte gelden voor beide. De rij heeft ook een veld Tussenruimte voor de ruimte tussen de regels; laat je dat ongemoeid, dan volgt het je opvulling. Wat elk voordeel zegt, stel je in waar je het hebt geschreven, bij de opties van de aanbieding.

Pictogram voordeel is een eigen rij bij de twee designs die een vinkje tekenen, Lure en Checkbox. De eerste kleur is het vinkje en de omlijsting ervan, de tweede is de schijf erachter, die doorzichtig blijft totdat je hem een kleur geeft. Aurora tekent zijn vinkje uit het eigen kleurverloop van het design, dus dat volgt Kleuren.

Twee dingen stel je hier niet in, omdat ze bij de aanbieding horen en niet bij je design. Of de rij voor de eenmalige aankoop zichtbaar is en welke optie als eerste is geselecteerd, stel je per aanbieding in: zie De optie voor eenmalige aankoop van een product verwijderen. En de productafbeelding bij een bundeloptie is de afbeelding die je bij die optie uploadt.

Koppen en de titel van de aanbieding

Een productpagina kan een titel van de aanbieding en maximaal drie sectiekoppen hebben.

Titel van aanbieding is een rij onder Beide widgets. Hij toont de naam van je aanbieding één keer helemaal bovenaan, boven de bundelopties, de abonnementsopties en de leverdatum. Het is de Naam van aanbieding die je de aanbieding op de pagina Aanbiedingen hebt gegeven, dus hernoem je de aanbieding, dan volgt de pagina. Hij staat uit totdat je hem aanzet, en de kleur, grootte en dikte stel je in op de rij.

Varianten als stalen tonen is een rij onder Beide widgets. Staat die aan, dan toont elke variantkeuze in beide widgets elke optie als staal in plaats van als vervolgkeuzelijst: zelf samen te stellen boxen en hun productlijst, add-ons, gratis cadeaus (bij bundelopties en abonnementsopties), de producten in een vaste bundel, en de keuzes per artikel bij staffelkortingen en Koop X, krijg Y. Heb je in Shopify een kleur of afbeelding ingesteld bij de optiewaarde (bijvoorbeeld het staal bij een optie Kleur), dan toont het staal die; andere opties, zoals maten, tonen hun naam. Een waarde die uitverkocht is, wordt doorgestreept en kan niet worden gekozen. De stalen nemen de kleuren van je widget over: het gekozen staal wordt getekend in je accentkleur. De stalen komen uit de optiewaarden van het Shopify-product: open het product in Shopify en koppel onder Varianten de kleuroptie aan de categoriemetaveld Kleur en kies het staal van elke waarde (zie Shopify's handleiding, Categoriemetavelden gebruiken). Het staat aan voor nieuwe winkels en uit voor winkels die eerder zijn geïnstalleerd, totdat je het aanzet.

Elke sectie heeft een eigen rij Kop, met een eigen schakelaar, kleur, grootte, gewicht en indeling: Abonnementsopties > Kop, Bundelopties > Kop en Leverdatum > Kop. De indelingen zijn:

Gecentreerd met lijnen, de kop in het midden met aan beide kanten een lijn. Hiermee begint een nieuwe winkel.
Gecentreerd, de kop in het midden zonder lijnen.
Eenvoudig, de kop los aan het begin van de rij.

Wat elke kop zegt, stel je op een andere plek in:

Abonnementskop: het veld Sectietitel in Labels. Dat begint als {{subscription_name}}, wat de Naam van abonnement van de aanbieding toont, de naam die je boven de abonnementsopties van de aanbieding hebt ingesteld (vertaald samen met de aanbieding). Typ in plaats daarvan je eigen woorden ("Nooit meer zonder!"), of combineer de twee ("{{subscription_name}}, op elk moment opzegbaar"). Laat je het veld leeg, dan werkt het als {{subscription_name}}.
Bundelkop: het veld Naam van bundel bij de aanbieding, boven de bundelopties. Laat je het leeg, dan staat in de kop "Bundle & Save". Wil je helemaal geen bundelkop tonen, schakel dan Bundelopties > Kop uit onder Elementen.
Kop van de leverdatum: Kop van datumkiezer, in Instellingen voor add-ons > Datumkiezer.

Dit zijn allemaal teksten die een klant leest, dus ze zijn allemaal vertaalbaar. Namen van aanbiedingen, namen van abonnementen en namen van bundels vertaal je in Instellingen > Vertalingen onder Aanbiedingen; de widgetlabels onder Widgets.

Een elementrij lezen

Een rij is één regel. De naam van het element links met zijn schakelaar ernaast, daarna in kolommen rechts:

De kleur, als swatch waarop je klikt om de kleurkiezer te openen.
De kleur bij de optie die een klant heeft gekozen, als tweede swatch, bij de onderdelen die er anders uitzien zodra ze gekozen zijn.
De tekstgrootte, in pixels.
De tekstdikte, van dun tot zwart.

Wat per rij verschilt, is de schakelaar: de naam van de optie, de achtergronden en de randen kunnen niet worden verborgen, dus die rijen hebben geen schakelaar, en de achtergronden en randen zijn alleen een kleur, omdat er geen tekst is om de grootte van in te stellen.

Twee velden horen bij geen van die kolommen, dus ze staan op een eigen regel eronder: een Tussenruimte, voor een element dat uit meer dan één regel bestaat, en een Prijsindeling. De voordelenlijst heeft het eerste, en de doorgestreepte prijs heeft beide.

Op een smal scherm vallen de instellingen onder de naam op een eigen regel. Styling verschijnt alleen zolang het element aanstaat, en een wijziging wordt geschreven naar elk design dat het element heeft, dus als je later van design wisselt, blijft je styling behouden. Houd de muis boven de naam van een rij om te zien wat die omvat.

Badges

Er zijn twee badges, en het zijn twee rijen onder Beide widgets, omdat elke badge één keer voor beide widgets wordt ingesteld:

De Kortingsbadge wordt berekend uit je korting en leest "-20%" bij een abonnementsoptie en "Bespaar 20%" bij een bundeloptie.
De Berichtbadge is de badge die je zelf schrijft bij een bundeloptie, in het veld Badge, zoals "Meest gekozen".

Elke badge heeft een eigen vorm, achtergrondkleur, tekstkleur, tekstgrootte en tekstdikte. De kleuren van de kortingsbadge staan standaard op standaard, wat je primaire kleur volgt; kies een kleur op de rij om je eigen kleur in te stellen.

Er zijn vier vormen:

Bubbel, een afgeronde pil naast de titel.
Label, een bagagelabel met een punt aan de voorkant.
Zwevend, de pil los van de rij getild met een zachte schaduw eronder.
Lint, een strook die aan de bovenrand van de rij is geplakt. Hiermee begint een nieuwe winkel bij de kortingsbadge.

Zwevend en Lint verlaten de rij, dus bij die twee kun je kiezen waar langs de rij ze staan: Begin, Midden of Einde.

Classic+ toont de kortingsbadge twee keer: één keer in de koptekst boven de opties, en één keer bij elke optie eronder. De tweede heeft een eigen rij, Kortingsbadge bij elke optie. Zet die uit om alleen de badge in de kop te laten staan, of geef hem een eigen kleur, grootte, gewicht en vorm (Bubbel of Label). Dropdown+ toont maar één badge, in de kop.

Wil je de kortingsbadge verbergen, schakel dan zijn rij uit. Wat de badge zegt ("Bespaar 20%", "20% korting") stel je in onder Labels.

Standaardkleuren en eigen kleuren

Elke kleur op een elementrij begint op standaard, en standaard betekent je primaire kleur overal waar de primaire kleur dat onderdeel bepaalt: de rand, het keuzerondje, de achtergrond bij selectie. Stel het één keer in bij Kleuren en ze volgen allemaal.

Je ziet het verschil aan de swatch. Een gestippelde omlijsting betekent dat de kleur je palet nog volgt; een effen omlijsting betekent dat je hem zelf hebt ingesteld. Een geruite swatch betekent dat de tekst geen eigen kleur heeft en de kleur van de tekst eromheen overneemt, totdat je er een kiest. Houd de muis erboven om te zien welke het is en wat de kleur is.

Klik op de swatch en kies een kleur, en dat ene onderdeel stapt uit de groep en houdt jouw kleur, wat de primaire kleur ook is. Om het terug te zetten klik je opnieuw op de swatch en kies je Standaard gebruiken: het onderdeel sluit weer aan en neemt de huidige primaire kleur over.

Onderdelen die de primaire kleur niet bepaalt, zoals de naam van de optie of de doorgestreepte prijs, lezen standaard als de kleur die het design meelevert. Bij een design dat een kleurverloop tekent, leest de rand standaard als het kleurverloop.

Een kleur wijzigen onder Kleuren werkt door in elk onderdeel dat nog op standaard staat, ook bij designs die je op dit moment niet gebruikt. Terug naar het gestippelde swatch Overnemen van je thema geeft die onderdelen terug aan de kleuren die hun design meelevert.

Prijzen

Prijzen hebben eigen rijen binnen Elementen, en de twee widgets worden apart gehouden, zodat je er één kunt wijzigen en de andere laat zoals hij is. Voor elke widget kun je uitzetten:

Prijs, het bedrag bij elke abonnementsoptie of bundeloptie.
Doorgestreepte prijs, de volle prijs doorgestreept naast de afgeprijsde.
Prijs per eenheid, de prijs per stuk, zoals "€3,50 per stuk". Bij de abonnementswidget staat hij standaard uit en bij de bundelopties aan.

Voorstel om groter te kiezen (bundelopties, uit tenzij je hem aanzet) voegt onder de staffelkortingen een link toe zoals "Voeg er 1 toe en bespaar 15%", zolang een klant een kleiner pakket heeft gekozen en een groter pakket meer bespaart. Erop klikken kiest het grotere pakket. Hij verschijnt alleen bij gewone staffelkortingen, niet bij een zelf samen te stellen box, een vaste bundel, Koop X, krijg Y of een optie met een gratis cadeau, en de tekst ervan is het veld Voorstel om groter te kiezen in Labels.

De gebruikelijke reden om een prijs uit te zetten is dat je thema hem al boven de widget toont en je het liever niet twee keer zegt. Wil je alleen de prijs per eenheid tonen, zet dan Prijs uit en Prijs per eenheid aan.

Alle drie hebben een kleur, een grootte en een dikte. De rij Prijs van de abonnementen heeft ook de tweede swatch, voor de prijs bij de optie die een klant heeft gekozen.

De rij Doorgestreepte prijs van de abonnementen heeft nog twee velden, op een regel onder de grootte en de dikte:

Prijsindeling: Naast elkaar houdt beide prijzen op één regel. Onder elkaar zet de doorgestreepte prijs op een eigen regel boven de huidige.
Tussenruimte, de ruimte tussen de twee prijzen, in pixels.

Elk design houdt zijn eigen antwoorden bij, dus instellen bij het design dat je publiceert laat de andere zoals ze waren.

Classic+ en Dropdown+ tonen één prijs bovenaan de widget, en die volgt de optie die een klant heeft gekozen. De prijs uitzetten verbergt ook die.

Prijs per eenheid wordt alleen aangeboden bij designs die er een tonen. De tekst eromheen, "/ stuk" of "{{unit_price}} / {{unit_name}}", stel je in onder Labels. De eenheidsprijs die je thema onder de productprijs toont (per 100 g enzovoort) is een aparte add-on, Prijsdetails van abonnement, in Add-ons voor de productpagina.

De volgorde waarin dingen verschijnen

Welke widget eerst komt: Elementen > Pagina-indeling > Bundel bovenaan. Staat standaard aan; zet uit om de abonnementswidget boven de bundelopties te zetten.
De volgorde van de abonnementsopties: open de aanbieding onder Aanbiedingen en sleep de opties aan hun handvat in Abonnementsopties, en sla de aanbieding daarna op. De winkel toont ze in die volgorde.
De rij voor de eenmalige aankoop: gebruik bij de aanbieding de pijlen omhoog en omlaag op de rij Eenmalige aankoop om hem bovenaan of onderaan de lijst te zetten.
De volgorde van de bundelopties: sleep ze in Bundelopties bij de aanbieding. De rij van de losse optie verplaats je op dezelfde manier naar boven of onder als de rij voor de eenmalige aankoop.
Welke optie is geselecteerd bij het laden van de pagina: klik op Standaard maken op die rij in de aanbieding. Zie De standaardoptie instellen.
Een product in meer dan één aanbieding: het abonnement van elke aanbieding is een eigen groep in de widget. Stel de volgorde van de groepen in bij Instellingen voor add-ons > Volgorde van aanbiedingen. Die volgorde wordt ook bij het afrekenen gebruikt.

Labels

Hier herformuleer je de tekst die je klanten lezen, in de hoofdtaal van je winkel. Het staat onder de instellingenkaart, in een eigen kaart. Elk veld geldt voor elk design van die widget, dus je teksten gaan mee als je een ander design probeert, en de kaart toont alleen de velden die je gepubliceerde design echt toont.

Abonnementswidget: Sectietitel (accepteert {{subscription_name}} voor de Naam van abonnement van de aanbieding), Rij eenmalige aankoop, Kortingsbadge, percentage, Kortingsbadge, bedrag korting, Kortingsbadge, vaste prijs, Kop van abonnementsopties, Regel vooruitbetaald, Kortingsbanner, Titel van infotooltip, Optierij (de regel die voor elke frequentie in de lijst wordt getoond), Prijs per eenheid, en de frequentiesuffixen Elke dag tot en met Elke N jaar ("/ maand", "/ {{n}} weken").
Bundelwidget: Besparingslabel, percentage, Besparingslabel, box met staffels, Besparingslabel, bedrag, Suffix per eenheid ("/stuk"), Rij gratis verzending, Losse optie, Rij gratis cadeau en Voorstel om groter te kiezen ("Voeg er nog {remaining} toe en bespaar {value}%").
Zelf samen te stellen box: alles wat een optie voor een zelf samen te stellen box rond de keuzes toont, zoals de Kop 'Bevat', Kop van keuzes, Opdracht om te kiezen, Selectieteller en Minimum niet gehaald ("Kies minimaal {min} artikelen").
Beloningen en gratis cadeaus: de koppen boven beloningen van Koop X, krijg Y en gratis cadeaus, en het woord Gratis dat als hun prijs wordt getoond.

Sommige velden gebruiken plaatsaanduidingen tussen accolades, en elk veld vertelt je waar zijn plaatsaanduidingen voor staan. Laat ze in je tekst staan en verplaats ze naar waar de zin ze nodig heeft. Laat een veld leeg om terug te gaan naar de ingebouwde tekst.

Sommige teksten staan niet onder Labels, omdat ze bij één aanbieding of bij een add-on horen:

Namen, beschrijvingen en voordelen van abonnementsopties: bij elke abonnementsoptie onder Aanbiedingen (Naam van optie, Beschrijving, Voordelen). Voor optienamen is er geen bulkbewerking, dus wijzig ze aanbieding voor aanbieding; tekst voor de hele winkel, zoals de frequentiesuffixen, bewerk je hier één keer.
De naam, beschrijving en voordelen van de rij voor de eenmalige aankoop: bij de rij Eenmalige aankoop van de aanbieding. Laat de Naam leeg en de rij gebruikt Rij eenmalige aankoop uit Labels.
Titels, ondertitels en badges van bundelopties, en de kop Naam van bundel: bij de aanbieding.
De tekst van de knop om aan de winkelwagen toe te voegen, de badge naast de productprijs en de teksten van de leverdatum: in Instellingen voor add-ons, zie Add-ons voor de productpagina.

Deze velden bepalen de tekst in de hoofdtaal van je winkel. Om hem voor je andere talen te vertalen, gebruik je Instellingen > Vertalingen. Een vertaling daar gaat voor op wat je hier typt voor die taal.

Aangepaste CSS

De laatste sectie van de instellingenkaart, onder Elementen, voor alles wat de instellingen hierboven niet bereiken. CSS die je hier schrijft geldt voor beide widgets op je productpagina, en het voorbeeld toont wat het doet voordat je opslaat.

Elk design heeft zijn eigen aangepaste CSS: die van het winkeldesign geldt overal waar het winkeldesign wordt gebruikt, en die van een opgeslagen design overal waar dat design wordt gebruikt. Een nieuw design begint met een kopie van de CSS van het design waarvan het is gemaakt, en een design dat is gemaakt voordat designs een eigen CSS hadden, gebruikt die van het winkeldesign totdat je het opslaat. Overschakelen naar een andere indeling in de sectie Design behoudt hem. Als je CSS hebt geschreven in de oude editor per design, geldt die CSS er nog steeds bovenop.

Laat dit leeg, tenzij je de selectors kent die je zoekt. CSS die je hier schrijft wordt niet gecontroleerd, dus een kapotte regel kan een deel van je widget op je productpagina's verbergen. Wil je een wijziging die de instellingen niet dekken, zoals het centreren van de widget, vraag het ons dan in de chat en wij schrijven het voor je.

De widgets accepteren geen eigen HTML. De indeling komt van het design dat je publiceert, en alles wat je kunt wijzigen staat op deze pagina.

Designs per aanbieding

Elke aanbieding gebruikt je winkeldesign, tenzij je hem een eigen design geeft, zodat één aanbieding er anders uit kan zien dan de rest: bijvoorbeeld een premium navulclub in de donkere kleuren van je merk, naast je dagelijkse Subscribe & Save.

Geef een aanbieding een eigen design

Ga naar Supr Bundles & Subscriptions > Aanbiedingen en open de aanbieding.
Klik in het voorbeeld, in de rij Design onder de productkiezer, op Nieuw design. De aanbieding krijgt een design dat naar hem is vernoemd (een aanbieding Coffee Club krijgt Coffee Club Design), als kopie van je winkeldesign, en de designeditor opent erop in een venster op volledig scherm over de aanbieding.
Het voorbeeld in het venster is het eigen voorbeeld van de aanbieding: hetzelfde product en dezelfde variant die je in de aanbieding bekeek, en de opties, bundelopties, cadeaus en teksten van de aanbieding zoals ze nu zijn, inclusief niet-opgeslagen wijzigingen. Je kunt daar overschakelen naar een ander product van de aanbieding.
Wijzig het design, de bundelindeling, de kleuren, de vorm, de afstand en de elementen. Beide voorbeelden volgen elke wijziging terwijl je die maakt. Om het een andere naam te geven typ je de nieuwe naam in Naam van design bovenaan de kaart Design.
Sluit het venster en sla de aanbieding op. Het design wordt samen met de aanbieding opgeslagen, dus er is geen Opslaan in het venster: Negeren bij de aanbieding maakt ook het design en zijn wijzigingen ongedaan, en er wordt niets bewaard totdat je de aanbieding opslaat.

Zodra de aanbieding een eigen design heeft, toont de keuzelijst in de rij zijn naam en neemt Design bewerken de plaats in van Nieuw design. Design bewerken opent hetzelfde venster opnieuw, en de wijzigingen worden op dezelfde manier met de aanbieding opgeslagen. Met de keuzelijst Design schakel je de aanbieding tussen het Winkeldesign, zijn eigen design en elk ander opgeslagen design, opgeslagen met de aanbieding; wegschakelen behoudt het design, dus je kunt het opnieuw kiezen. Om het eigen design van de aanbieding te verwijderen klik je in het venster op de prullenbak naast Naam van design en sla je de aanbieding op.

Een aanbieding die al een design gebruikte dat met andere aanbiedingen wordt gedeeld, houdt dat. De rij vertelt dan hoeveel andere aanbiedingen het gebruiken, omdat een wijziging daar ook die aanbiedingen wijzigt. Een gedeeld design heeft, net als elk design dat vanaf de Design-pagina wordt geopend, een eigen Opslaan in de titelbalk van het venster, en dat opslaan geldt voor elke aanbieding die het gebruikt.

Op de Design-pagina. Bovenaan de kaart Design staan het winkeldesign en elk opgeslagen design. Kies er een in de keuzelijst om het te bewerken, klik op Nieuw design om een volgend te beginnen als kopie van het geopende design, en gebruik de potlood- (naam wijzigen) en prullenbakpictogrammen ernaast om het geopende design een andere naam te geven of te verwijderen. Elke aanbieding kan een eigen design hebben, en een winkel kan hier maximaal 50 extra designs bewaren.

Wat een design omvat. Het design en de bundelindeling, de kleuren, de vorm, de afstand, de elementen, de Plaatsing en de Aangepaste CSS. Labels en de instellingen voor add-ons worden door elk design gedeeld. Labels bewerk je bij het winkeldesign: terwijl een opgeslagen design open is, heeft de opmerking onder de instellingen een knop Het winkeldesign bewerken die je daarheen brengt. De kaart Instellingen voor add-ons blijft ook op de pagina staan terwijl een opgeslagen design open is, gemarkeerd als gedeeld, en een wijziging daar geldt voor het winkeldesign en elk opgeslagen design. Vertalingen volgen de indeling van het design, net als bij het winkeldesign.

Op de productpagina. De abonnementswidget van een product gebruikt het design van de eerste aanbieding die hij toont. Welke aanbieding eerst komt, stel je in bij Instellingen voor add-ons > Volgorde van aanbiedingen op deze pagina. Richten aanbiedingen zich op verschillende varianten van hetzelfde product, dan gebruikt elke variant het design van de eerste aanbieding die hij heeft, en de widget wisselt van design zodra de klant een variant kiest: een variant Glazen fles die via je premiumclub wordt verkocht, kan eruitzien als de club, terwijl het blikje ernaast je dagelijkse design houdt. Elke bundeloptie volgt het design van zijn eigen aanbieding. Een design verwijderen zet zijn aanbiedingen terug naar het winkeldesign.

Je wijzigingen opslaan

Op deze pagina wordt niets al doende opgeslagen. Wijzig zoveel je wilt, bekijk alles in het voorbeeld en gebruik dan de opslagbalk bovenaan de pagina om alles in één keer op te slaan, of negeer het en begin opnieuw. Laad na het opslaan een productpagina in je winkel opnieuw om het resultaat te zien.

Deze pagina schrijft één waarde naar elk design tegelijk. Heb je je widgets gestyled in de oude editor per design, dan is je eerste keer opslaan hier het moment waarop je winkel overgaat op de uniforme widgetervaring: een melding Je widgets worden beter vraagt om bevestiging vóór die eerste keer opslaan, en we maken vooraf een kopie van hoe je widgets eruitzagen.

Je vorige design herstellen

Deze sectie is voor winkels die hun widgets hebben gestyled in de oude editor per design, voordat deze pagina die verving. Heb je Supr Bundles & Subscriptions daarna geïnstalleerd, dan is er geen vorig design om naar terug te gaan en geen kaart Vorig design herstellen op je pagina.

Voordat je winkel overgaat op de uniforme widgetervaring, bewaren we een kopie van hoe de widgets eruitzien. Die kopie verloopt niet, en de kaart noemt de datum waarop hij is gemaakt.

Vanaf dan staat een kaart Vorig design herstellen onderaan deze pagina. Gebruik hem en je widgets gaan terug naar precies hoe ze waren vlak voordat je overstapte. Je kunt daarna opnieuw stylen en opnieuw herstellen.

Herstellen vervangt alles wat je sinds het maken van die kopie op deze pagina hebt gewijzigd. Het heeft geen invloed op je aanbiedingen, je prijzen of je abonnees.

Wat er met de widgeteditor is gebeurd legt uit waar elke instelling van de oude editor naartoe is verhuisd.

De regel Powered by Supr

Sommige winkels zien een kleine regel Powered by Supr onder de abonnementswidget, of in de infotooltip ervan. Of hij verschijnt, hangt af van je abonnement: hij wordt automatisch verwijderd bij betaalde abonnementen, en er is geen schakelaar voor op de Design-pagina. De abonnementen staan op onze prijspagina en bij Facturering in de app.

Open na het wijzigen van je abonnement de app één keer en laad dan je productpagina opnieuw, en de regel is weg. Staat hij er nog, stuur ons dan een bericht in de chat en wij kijken het voor je na.

Dezelfde regel kan onderaan de abonnementse-mails staan die we voor je versturen, en hij volgt dezelfde regel.

Hulp bij je design

De kaart Hulp nodig om dit op je merk af te stemmen? onderaan de pagina heeft een knop Chatten met een expert. Ons team kan je helpen een design te kiezen, de kleuren en lettertypen van je thema na te maken, de afstand op mobiel aan te passen of aangepaste CSS te schrijven voor een wijziging die de instellingen niet dekken. Vertel ons hoe je wilt dat de widget eruitziet, een screenshot helpt, en wij stellen het samen met je in.

Tips en best practices

Stel eerst je kleur, vorm en afstand in en kies dan een design. Ze gaan mee naar elk design, dus designs proberen kost je niets.
Laat elementkleuren op standaard staan, tenzij je een reden hebt. Hoe minder uitzonderingen je maakt, hoe beter een nieuw design eruitziet als je er een probeert.
Bekijk het voorbeeld met een echt product, zodat je je eigen prijzen en kortingen ziet.
Toont een design een vervolgkeuzelijst die je niet wilt, dan is overschakelen naar Classic of Panel de snelste manier om hem te verwijderen.
Voor opties naast elkaar in plaats van onder elkaar gebruik je Panel of Panel+ voor abonnementen en de bundelindeling Cards.

Veelgestelde vragen

Kunnen twee aanbiedingen in mijn winkel er verschillend uitzien?
Ja. Maak een opgeslagen design en kies dat voor een van de aanbiedingen, zie Designs per aanbieding.

Hoe pas ik de kleuren aan mijn merk aan?
Kies je kleur bij Kleuren en wijzig daarna alleen de afzonderlijke onderdelen onder Elementen die anders moeten zijn. Sla op met de opslagbalk en laad een productpagina opnieuw.

Een instelling die ik heb gewijzigd, is niet te zien in mijn winkel. Waarom?
Controleer of je hebt opgeslagen en laad de productpagina opnieuw. Is het dan nog niet te zien, dan overschrijft de eigen CSS van je thema de widget daar waarschijnlijk. Stuur ons een bericht in de chat met de link naar het product en wij lossen het op zonder je thema aan te raken.

Kunnen verschillende aanbiedingen verschillende designs gebruiken?
Nee. Er is per winkel één abonnementsdesign en één bundelindeling live, en elke aanbieding gebruikt die. De styling van de andere blijft bewaard, dus wisselen kost niets.

Hoe verberg ik de prijs, de doorgestreepte prijs of de kortingsbadge?
Zet Prijs, Doorgestreepte prijs of Prijs per eenheid uit onder Elementen, apart voor de abonnementsopties en de bundelopties. De kortingsbadge heeft een eigen rij onder Beide widgets.

Hoe zet ik de abonnementswidget boven de bundelopties?
Zet Elementen > Pagina-indeling > Bundel bovenaan uit en sla op.

Hoe wijzig ik "Abonneer en bespaar", "Eenmalige aankoop", "Bespaar 15%" of "/stuk"?
In de kaart Labels. De kop boven de abonnementsopties is Sectietitel, die de Naam van abonnement van de aanbieding toont overal waar {{subscription_name}} staat (de beginwaarde), en de bundelkop is de Naam van bundel van de aanbieding. Zie Teksten in de hoofdtaal wijzigen en vertalen.

De geopende vervolgkeuzelijst voor levering ziet er op Windows anders uit dan op een Mac. Kan ik die stylen?
De gesloten vervolgkeuzelijst style je onder Elementen > Vervolgkeuzelijst levering. De geopende lijst wordt getekend door de browser en het besturingssysteem van de klant, dus die kan niet worden aangepast. Kies Classic of Panel als je liever geen vervolgkeuzelijst hebt.

Kan ik mijn eigen HTML toevoegen, of een design kopiëren dat ik op een andere site zag?
De widgets accepteren geen eigen HTML. Kies hier het dichtstbijzijnde design en style dat, en gebruik dan Chatten met een expert, en ons team helpt je er zo dicht mogelijk bij te komen.

Hoe verwijder ik de regel Powered by Supr?
Hij wordt automatisch verwijderd bij betaalde abonnementen. Zie De regel Powered by Supr.

Gerelateerde handleidingen

Bijgewerkt op: 24/10/2026

Was dit artikel nuttig?

Dankuwel!