Een sticky balk voor toevoegen aan winkelwagen toevoegen

De sticky 'toevoegen aan winkelwagen'-balk houdt je aanbiedingen binnen handbereik terwijl shoppers de productpagina bekijken. Met de knop kunnen ze terugscrollen naar de aanbiedingen of de geselecteerde aanbieding rechtstreeks aan de winkelwagen toevoegen. Je kunt de balk tonen nadat shoppers voorbij de widget hebben gescrold of vanaf het laden van de pagina.

Schakel de sticky 'toevoegen aan winkelwagen'-balk in

De sticky balk wordt per bundel ingesteld in de bundelbewerker.

1. Open de bundel die je wilt bewerken.
2. Open het tabblad Add-ons en vouw vervolgens Sticky 'toevoegen aan winkelwagen' uit.
3. Schakel de optie naast de titel Sticky 'toevoegen aan winkelwagen' in.

De balk wordt getoond op productpagina's waarop deze bundel verschijnt. Zorg er daarom voor dat de bundel is gepubliceerd en dat je widget is ingesteld om op de juiste producten te worden weergegeven.

Kies wat de knop doet

De knopactie heeft twee opties:

• Scroll naar de aanbiedingen brengt de shopper terug naar de widget om een aanbieding te kiezen.
• Voeg de geselecteerde aanbieding toe aan de winkelwagen toont de geselecteerde aanbieding en voegt deze toe met de gekozen producten, cadeaus en extra's.

In de modus voor toevoegen aan de winkelwagen volgt de balk wijzigingen in de geselecteerde aanbieding, varianten, aantallen, abonnementen en add-ons. Het totaal komt overeen met de voettekst van de widget. Je kunt Prijs tonen, Oorspronkelijke prijs tonen, Badge voor besparing tonen en Prijs in de knop tonen inschakelen.

Als een shopper nog een variant moet kiezen of een bundelvak moet invullen, brengt de knop de shopper naar de widget om dit af te ronden. Als er geen aanbieding is geselecteerd, wordt de shopper gevraagd opties te kiezen. Bij thema's die rechtstreeks toevoegen verhinderen, valt de knop terug op scrollen naar de widget. Kortingen met alleen optionele add-ons gebruiken de actie om naar de aanbiedingen te scrollen, zodat shoppers hun keuzes in de widget kunnen maken. Deze knop gebruikt de normale winkelwagenflow, niet Nu kopen.

Kies wanneer de balk verschijnt

Kies onder De balk tonen voor Nadat de widget uit beeld is gescrold of Altijd, vanaf het laden van de pagina. Beide werken met elke knopactie. Bestaande balken behouden hun gedrag na het scrollen, tenzij je dit wijzigt.

Als Altijd is geselecteerd, start de modus voor toevoegen aan de winkelwagen met je vooraf geselecteerde aanbieding en volgt deze latere selecties. Als je toestaat dat de pagina wordt geladen zonder geselecteerde aanbieding, moeten shoppers een aanbieding kiezen voordat de balk deze kan toevoegen.

Kies een lay-out: Zwevend versus Vast

Gebruik de optie Lay-out van de sticky balk om te kiezen hoe de balk op de pagina staat:

• Zwevend - een gecentreerde kaart die met een kleine tussenruimte binnen de randen staat en afgeronde hoeken behoudt.
• Vast - een balk over de volledige breedte die aan de onderrand is vastgemaakt en van rand tot rand loopt.

De twee lay-outs gaan verschillend om met afgeronde hoeken. Als je overschakelt naar Vast, wordt de hoekradius van de balk ingesteld op 0, zodat deze strak tegen de randen van het scherm kan staan. Als je overschakelt naar Zwevend, wordt een afgeronde hoek hersteld als de radius 0 was. Je kunt de hoekradius daarna verder aanpassen in de stijlopties, zie hieronder, maar Vast is ontworpen om vierkant te blijven.

Tonen op desktop en mobiel

Twee selectievakjes bepalen waar de balk verschijnt:

• Tonen op desktop
• Tonen op mobiel

Beide zijn standaard ingeschakeld. Je kunt een van beide uitschakelen, bijvoorbeeld om de sticky balk alleen op mobiel te tonen, waar de oorspronkelijke knop voor toevoegen aan de winkelwagen waarschijnlijk uit beeld scrollt.

Controleer de daadwerkelijke mobiele pagina met je langste aanbiedingstitel en prijs. Op smalle schermen vereenvoudigt de balk sommige details van de oorspronkelijke prijs, besparing en knopprijs om de actie leesbaar te houden. Verwacht niet dat elk desktopdetail op een kleine telefoon wordt weergegeven.

Stel de titel en knoptekst in

In de modus om naar aanbiedingen te scrollen heeft de sticky balk twee tekstvelden:

• Titel - de tekst naast de knop. Deze ondersteunt sjabloonvariabelen, zodat je dynamische waarden kunt invoegen, zoals {{product_title}} (de standaardwaarde), {{saved_percentage}} of {{price_total}}. Gebruik de variabele-invoeger in het veld om ze toe te voegen.
• Knoptekst - het label op de sticky knop. De standaardwaarde is "Bundel kiezen".

De modus voor toevoegen aan de winkelwagen toont de titel van de geselecteerde aanbieding en gebruikt het eigen veld Tekst van de knop Toevoegen aan winkelwagen. De twee knopteksten hebben afzonderlijke vertalingen, dus als je de tekst van de ene modus wijzigt, wordt die van de andere niet overschreven.

Onder Tekst van de sticky balk kun je ook de badge voor gratis cadeaus, badges voor één en meerdere add-ons en de tekst van de knop Kies opties wijzigen. Laat {{count}} in het bericht voor meerdere add-ons staan, zodat het werkelijke aantal kan worden weergegeven.

De ingesloten afteltimer toevoegen, optioneel

Je kunt een afteltimer in de sticky balk tonen met het selectievakje Afteltimer tonen in sticky balk.

Voor deze optie moet de afteltimer zijn ingeschakeld voor dezelfde bundel. Als de afteltimer is uitgeschakeld, is het selectievakje uitgeschakeld en kan het niet worden geselecteerd. Zodra je de afteltimer inschakelt, kun je deze optie inschakelen.

De ingesloten afteltimer gebruikt opnieuw de compacte titel uit je instellingen voor de afteltimer en de stijl volgt het thema van de sticky balk.

Als je de afteltimer later uitschakelt, wordt de afteltimer van de sticky balk automatisch uitgeschakeld.

Geef de sticky balk een stijl

Open de groep Stijl van sticky 'toevoegen aan winkelwagen' om het uiterlijk aan te passen. De opties zijn gegroepeerd in accordeons:

• Achtergrond - effen kleur of verloop voor de balk.
• Container - randkleur, randbreedte, hoekradius, opvulling en schaduw.
• Titel - tekstkleur, tekengrootte en tekendikte.
• Prijs - stijl van de prijstekst in de modus voor toevoegen aan de winkelwagen.
• Knop - achtergrondkleur, tekstkleur, tekengrootte, tekendikte, opvulling en hoekradius.
• Productafbeelding - afbeeldingsgrootte, hoekradius, randbreedte en randkleur.
• Afteltimer - achtergrondkleur, tekstkleur, tekengrootte, tekendikte en opvulling. Deze groep verschijnt alleen wanneer de ingesloten afteltimer is ingeschakeld.

Gebruik de vooraf ingestelde kleurenkiezer bovenaan de sectie om snel een samenhangend uiterlijk te krijgen. Deze biedt ook Hoeken van sticky ATC afstemmen op hoofdwidget, waarmee de hoekradius van de balk wordt ingesteld op die van je hoofdwidget voor de bundel, zodat beide consistent aanvoelen.

Opmerking over de hoekradius

Houd er rekening mee dat de lay-out Vast een hoekradius van 0 afdwingt. Als je een afgeronde radius instelt bij de stijlopties van de Container, maar de hoeken er nog steeds vierkant uitzien, controleer dan of de lay-out is ingesteld op Zwevend.

Sla op en test beide acties

Sla op en test vervolgens een specifieke productpagina waarop de korting actief is. Scroll in de scrollmodus voorbij de aanbiedingen en gebruik de sticky knop om terug te gaan. Selecteer in de modus voor toevoegen aan de winkelwagen een aanbieding en varianten en voeg deze vervolgens toe via de sticky knop. Controleer de aantallen, varianten en het totaal in de winkelwagen en bij het afrekenen. Herhaal dit op mobiel en test een niet-beschikbare of onvolledige keuze: de balk moet de shopper terugbrengen om de selectie af te ronden.

In ons voorbeeld voegt Koop 2 twee Ivory Small-tassen toe met een subtotaal van $43.20 na 10% korting. Als je een niet-beschikbare combinatie van Blush Small kiest, verandert de sticky actie in Kies opties; als je dit wijzigt in een beschikbare maat, wordt Toevoegen aan winkelwagen hersteld. De afteltimer blijft visueel en stopt de korting niet wanneer de teller nul bereikt. Zie Afteltimer voor informatie over gedrag bij het verlopen.