Laat de winkelwagenlade aansluiten bij je winkel

Open je winkelwagenontwerp en selecteer Stijl. Dit tabblad bepaalt het algemene uiterlijk van de lade en hoe deze wordt geopend.

Kleuren kiezen

De rij Themakleuren biedt kleuren uit je gepubliceerde thema. Kies er een en selecteer een Paletstijl: Schoon, Getint of Donker. Je kunt ook een aangepaste kleur kiezen of een willekeurige kleur proberen.

Standaard herstelt de standaardkleuren en behoudt de indeling, zoals de breedte van de lade en de hoekradius.

De kleuren van één blok wijzigen

Onder Kleuren bewerken bevat de eerste rij, Lade, de basiskleuren: achtergrond, tekst, accent, accenttekst, gedempte tekst, besparingen en randen. Daaronder heeft elk blok van de lade een eigen rij, bijvoorbeeld de koptekst, de aankondigingsbalk, de beloningenbalk, de upsells, de voettekst en de afrekenknop. De rij van een blok wordt weergegeven wanneer dat blok is ingeschakeld.

Laat de kleur van een blok leeg, dan volgt het blok de kleuren van de lade. Als je een themakleur, aangepaste of willekeurige kleur of Standaard kiest, worden alle blokkleuren gewist, zodat de lade met een schone basis begint.

De indeling van de lade instellen

De kaart Indeling bepaalt waar de lade staat en hoe deze zich gedraagt:

• Positie van lade: kies de linker- of rechterrand.
• Indeling van lade: Vastgemaakt staat tegen de rand; Zwevend laat ruimte rond de lade en toont Afstand tot randen, van 0 tot 80 px.
• Hoogte van koptekst: Standaard of Compact. Compact halveert de ruimte boven en onder de titel van de winkelwagen, zodat er op kleine schermen meer van de winkelwagen past.
• Breedte van lade: van 280 tot 700 px.
• De winkelwagen openen wanneer een product wordt toegevoegd: zie Automatisch openen hieronder.

Het voorbeeld in de editor behoudt een eigen vaste breedte, zodat de bediening bruikbaar blijft. Sla op en controleer de storefront om de werkelijke breedte van de lade te beoordelen. Op een smal scherm wordt de lade beperkt tot de beschikbare ruimte.

De vorm en tekst instellen

De kaart Vorm en tekst bevat de laatste details:

• Hoekradius: van 0 tot 20 px.
• Tekstgrootte: van 90 tot 120%. Hiermee wordt alle tekst in de lade tegelijk geschaald, terwijl het lettertype van je thema behouden blijft.
• Schaduwen: schakel diepte-effecten in of uit.

Productafbeeldingen aanpassen

Afbeeldingsvorm is Vierkant of Portret (3:4). Dit geldt voor afbeeldingen van winkelwagenitems en elke upsellafbeelding, zodat de hele drawer op dezelfde manier wordt bijgesneden.

De kaart Afbeeldingen bevat alle afbeeldingsformaten op één plek: Afbeeldingsformaat winkelwagenitem, Afbeeldingsformaat upsell in lijst (upsells in de indelingen Verticale lijst en Eén tegelijk), Afbeeldingsformaat voor carrousel en zij-upsells (de indeling Carrousel en elke kaart voor een zij-upsell) en Afbeeldingsformaat add-on.

Rand rond afbeeldingen van winkelwagenitems voegt een dunne lijn toe rond elke productfoto in de winkelwagen. Schakel dit in wanneer je foto's een witte achtergrond hebben, zodat ze opvallen in de drawer. Nieuwe winkelwagens beginnen zonder deze rand en upsell- en add-onafbeeldingen krijgen er nooit een.

Automatisch openen beheren

Open de winkelwagen wanneer een product wordt toegevoegd staat op de kaart Lay-out. Als je dit uitschakelt, wordt de drawer niet meer automatisch geopend na een toevoeging. Klanten kunnen de drawer nog steeds openen met het winkelwagenpictogram.

In dit voorbeeld zorgt een blauwe themakleur met Getint en Zwevend voor een lichtblauwe achtergrond en een tussenruimte van 16 px. Sla op en controleer de storefront op desktop en mobiel. Zie aangepaste HTML en CSS voor wijzigingen buiten deze instellingen. Aangepaste CSS staat onderaan bij Stijl, onder Geavanceerd.