Widgets voor je webshop

Drie blokken tekenen je niveauaanbiedingen op de productpagina: de Quantity Break Table, de Quantity Break Picker en de tabel Spend More Save More. Je plaatst ze één keer in je thema; daarna volgen ze de korting, tonen ze de niveaus en verdwijnen ze zodra de aanbieding stopt.

Instellen

Zet Show on storefront aan in de korting.

Open de korting — een staffelkorting, een meer uitgeven, meer besparen of een prijslijst — en zet Show on storefront aan. Het staat standaard aan bij een nieuwe staffelkorting en een nieuwe korting meer uitgeven, meer besparen. De statusregel van de kaart vertelt je precies wat kopers krijgen, of waarom de widget verborgen blijft.
Klik op Add naast het blok dat je wilt.

Het paneel Add to your theme onderaan die kaart noemt elk blok precies zoals de thema-editor het noemt, met één regel over wat het is, en een knop Add die je thema-editor opent met het blok klaar om te plaatsen.
Plaats het blok in de thema-editor en sla op.

Zet het blok waar het hoort op de productpagina — meestal bij de prijs of de koopknop — en klik op Save.
Pas de instellingen van het blok aan in de thema-editor.

Elk label, elke kleur en elk gedrag hieronder is een instelling van het blok zelf in de thema-editor.

Quantity Break Table

Toont elk niveau van een staffelaanbieding als een tabel op de productpagina: het aantal, wat de koper krijgt, en de prijs.

General

Border color — de rand van de tabel. Standaard #d9d9d9.
Roundness — hoekradius, 0–24 px. Standaard 8.
Borderless — standaard uit. Staat hij aan, dan vervalt de rand.

Header background — leeg gebruikt de standaard van het ontwerp.
Header text — de tekstkleur van de kop.

Body

Cell padding — 4–32 px. Standaard 14.
Body background
Body text
Highlight unlocked tier — standaard aan. Markeert de rij die bij het gekozen aantal hoort.
Highlight color — standaard #e8f5e9.

Columns

Display quantities as range — standaard uit. Staat hij aan, dan wordt “2–4” getoond in plaats van “2+”.
Quantity label template — bijvoorbeeld Buy {quantity}+; {quantity} wordt automatisch vervangen. Leeg houdt “2+”. Bereiken blijven ongemoeid.
Quantity label — standaard “Buy”.
Show savings column — standaard aan. Altijd zichtbaar bij aanbiedingen met een bedrag eraf.
Savings label — standaard “Get”.
Off-each label — standaard “off each”. Gebruikt bij procentuele aanbiedingen.
Amount-off label — standaard “off”. Gebruikt bij aanbiedingen met een bedrag eraf; dat bedrag is het totaal voor de artikelen die in aanmerking komen, dus de standaard doet een uitspraak over het totaal, nooit over één artikel.
Fixed-price label — standaard “each”. Gebruikt bij aanbiedingen met een vaste prijs.
Show prices column — standaard aan. Wordt automatisch verborgen bij aanbiedingen met een bedrag eraf en bij producten met meer dan 50 varianten.
Price label — standaard “Price”.
Show original price — standaard aan. Streept de volle prijs door naast elke prijs met korting.
Show base row — standaard aan. Voegt een rij tegen de volle prijs toe voor aantallen onder het eerste niveau.

Message

Code hint prefix — standaard “Use code”. Alleen te zien bij kortingscodes.
Linked message — optionele tekst boven of onder de tabel.
Message position — Above of Below. Standaard Below.

Quantity Break Picker

Dezelfde aanbieding als aantikbare dealkaarten die de koper kiest en in één keer aan de winkelwagen toevoegt.

General

Heading — standaard “Choose your bundle”.
Card border — standaard #d9d9d9.
Selected accent — de kleur van de rand en het keuzerondje van de gekozen kaart.
Roundness — 0–24 px. Standaard 8.
Card padding — 4–32 px. Standaard 14.
Card background
Card text

Cards

Show single-item card — standaard aan. Zet een kaart “Buy 1” boven de niveaus.
Single-item label — standaard “Buy 1”.
Pre-selected tier — 0–10. Standaard 0, wat de standaardselectie aanhoudt. Telt alleen niveaus die echt zichtbaar zijn, dus een verborgen niveau wordt nooit vooraf gekozen.
Tier label — standaard Buy {quantity}; {quantity} wordt automatisch vervangen.
Off-each label — standaard “off each”. Gebruikt bij procentuele aanbiedingen.
Amount-off label — standaard “off”. Gebruikt bij aanbiedingen met een bedrag eraf, als uitspraak over het totaal.
Fixed-price label — standaard “each”. Gebruikt bij aanbiedingen met een vaste prijs (prijs per artikel).
Per-product suffix — standaard “of the same product”. Te zien als de aanbieding per product telt.
Per-variant suffix — standaard “of the same variant”. Te zien als de aanbieding per variant telt.
Show unit prices — standaard aan. Wordt automatisch verborgen bij aanbiedingen met een bedrag eraf en bij producten met meer dan 50 varianten.
Show original price — standaard aan. Streept de volle prijs door boven elke prijs met korting.
Each label — standaard “each”.
Most popular tier — 0–10. Standaard 0 = geen label; 1 = het eerste niveau.
Most popular text — standaard “Most popular”.
Most popular background — standaard #1a1a1a.
Most popular text color — standaard #ffffff.

Button

Button text — standaard “Add to cart”.
Added text — standaard “Added!”.
Unavailable text — standaard “Unavailable”.
After adding to cart — Go to the cart page (de standaard), Refresh the page (zodat het thema het nieuwe aantal in de winkelwagen toont) of Stay on this page (toont een bevestiging met een link naar de winkelwagen).
In-cart text — standaard {count} in cart. Te zien na het toevoegen als je op de pagina blijft; {count} is hoeveel van de toegevoegde artikelen in de winkelwagen zitten.
Cart link text — standaard “View cart”.
Button background — standaard #1a1a1a.
Button text color — standaard #ffffff.

Message

Code hint prefix — standaard “Use code”. Alleen te zien bij kortingscodes.
Linked message — optionele tekst boven of onder de kaarten.

Bundle composer

Let shoppers mix variants per tier — standaard uit. Staat hij aan, dan toont het gekozen niveau één rij per artikel, zodat kopers de bundel zelf samenstellen. Niet te zien bij aanbiedingen per variant.
Bundle button text — standaard “Add bundle”.
Items word — standaard “items”. Gebruikt wanneer er geen geldtotaal kan worden getoond: “Add bundle • 3 items”.
Unresolved text — standaard “Choose options”.
Message position — Above of Below. Standaard Below.

Spend More Save More

Toont elk uitgavenniveau van een aanbieding meer uitgeven, meer besparen op de productpagina: geef dit uit, krijg zoveel korting.

General

Border color — standaard #d9d9d9.
Roundness — 0–24 px. Standaard 8.
Borderless — standaard uit.

Header

Header background — leeg gebruikt de standaard van het ontwerp.
Header text

Body

Cell padding — 4–32 px. Standaard 14.
Body background
Body text
Highlight unlocked tier — standaard aan. Markeert het hoogste niveau dat de winkelwagen heeft bereikt.
Highlight color — standaard #e8f5e9.

Columns

Spend label — standaard “Spend”.
Savings label — standaard “Get”.
Off-the-order label — standaard “off the order”.
Off eligible items label — standaard “off eligible items”. Wordt gebruikt in plaats van het off-the-order-label als de korting sommige artikelen uitsluit.

Message

Code hint prefix — standaard “Use code”. Alleen te zien bij kortingscodes.
Linked message — optionele tekst boven of onder de tabel.
Message position — Above of Below. Standaard Below.

Custom theme selectors

Sale Badges en Price Drops vinden hun plek in je thema automatisch. Werkt dat niet in een bepaald thema, dan opent Theme selectors op de pagina Promotions een venster met drie optionele CSS-selectors die de app naar de eigen elementen van je thema wijzen:

Badge container in product cards — het element binnen elke productkaart waar badges aan vastzitten. Eén invoer dekt elke pagina die productkaarten toont.
Price element on the product page — het element dat de prijs op een productpagina bevat, waar de prijs met korting verschijnt.
Price element in product cards — het element dat de prijs binnen elke productkaart bevat.

Laat een veld leeg om de automatische plaatsing te houden. Elke selector is maximaal 200 tekens en moet een geldige CSS-selector zijn — het veld zegt het meteen als dat niet zo is. Een selector die nergens op past valt terug op automatische plaatsing, en een selector die geen prijs bevat tekent niets in plaats van een verkeerd getal door te strepen.

Hoe de koper het ziet

Elk blok rendert op de productpagina op de plek waar je het hebt gezet, met de echte niveaus van de aanbieding. De picker voegt daarnaast toe aan de winkelwagen. Dekt de aanbieding het product dat de koper voor zich heeft niet, of is de aanbieding gepauzeerd of afgelopen, dan toont het blok niets in plaats van een verlopen belofte.

Limieten en aandachtspunten

Eén widget per product. Dekken twee aanbiedingen met weergave aan hetzelfde product, dan verschijnt daar maar één widget. De kaart Show on storefront van de korting telt ze en biedt Choose which one shows aan. Elke korting geldt nog steeds op eigen voorwaarden.
Prijzen verdwijnen boven 50 varianten. De prijskolom en de stuksprijzen van de picker worden automatisch verborgen bij aanbiedingen met een bedrag eraf en bij producten met meer dan 50 varianten.
De aanbieding pauzeren verbergt de widget — op de kaart staat dan “Not shown (offer paused)” en biedt de schakelaar niet meer aan, zodat een gepauzeerde aanbieding er nooit actief uit kan zien.
De weergaveschakelaar gaat alleen over weergave. Show on storefront uitzetten verbergt de widget; de korting blijft gelden. Pauzeer de aanbieding om de korting te stoppen.
Theme selectors gelden voor de hele winkel, niet per promotie: ze opslaan verandert de plaatsing voor elke Sale Badge en Price Drop op de winkel.

Verwant

Doelbalk in de winkelwagen — het vierde blok, dat de voortgang naar het volgende uitgavenniveau toont.
Staffelkorting — de korting achter de tabel en de picker.
Meer uitgeven, meer besparen — de korting achter de uitgaventabel.
Prijslijst — de andere korting die de niveautabel voedt.
App embed — nodig voor badges en price drops, niet voor deze blokken.