Mand CSS-sjablonen

Bewerkbare winkelwagen-CSS-templates

Winkelwagen-CSS-templates bepalen hoe een winkelmandje zich op het scherm gedraagt: hoe elke rij wordt uitgelijnd, hoe deze inklapt op een telefoon en hoe het totaalbedrag wordt gescheiden van de bovenstaande lijst. Het meeste werk zit in uitzonderingssituaties, zoals een producttitel van twee regels of een verwijderlink die te dicht bij het afrekenen staat.

Flexbox-uitlijning op smalle schermen

Een winkelwagenrij combineert elementen van zeer uiteenlopende breedtes. CSS Grid houdt de kolommen voor miniatuurafbeelding, titel en prijs over de hele lijst netjes gelijk. Binnen één cel zorgt Flexbox ervoor dat de knoppen en het getal van de aantalkiezer op dezelfde lijn staan.

Op een smal scherm wordt de rij meestal gestapeld, waarbij de aantalknop en de prijs onder de titel verschuiven. Het overzicht verhuist naar onder de lijst, en op brede schermen maken sommige templates dit 'sticky', zodat het totaal in beeld blijft bij een lange winkelmand.

Het helpt om een demo te testen met inhoud waarvoor de stijlen niet direct ontworpen waren:

• een productnaam die lang genoeg is om af te breken, om te zien of de prijzenkolom standhoudt;
• een prijs van vier cijfers naast een oude prijs en een actielabel;
• een weergave op telefoonbreedte met meerdere artikelen, om te zien of gestapelde rijen visueel gescheiden blijven.

Statussen die klanten opmerken tijdens het bewerken

Aantalknoppen hebben duidelijke hover- en focusstijlen nodig, wat van belang is voor klanten die met een toetsenbord door de winkelwagen navigeren. De verwijderactie werkt het best als deze kleiner en subtieler is uitgevoerd, zodat niemand er per ongeluk op klikt tijdens het instellen van het aantal.

Een uitgeschakelde afreken- of bijwerkknop moet er duidelijk inactief uitzien. Wanneer een aantal de voorraad overschrijdt of een artikel niet meer leverbaar is, geven een gekleurde melding en een rand naast die rij precies aan waar het probleem zit.

Kortingen voegen een extra prioriteitslaag toe. De huidige prijs moet het zwaarst wegen, terwijl de oude prijs kan worden doorgehaald en gedimd. Een lege winkelwagen is ook een status: ruime witruimte met één link terug naar de winkel voorkomt dat het op een kapot raster lijkt.

Gewicht en plaatsing van het overzicht

Het besteltotaal en de afrekenknop moeten zwaarder wegen dan elke eenheidsprijs en verwijderlink. Een grotere lettergrootte en een dekkende knopvulling volstaan doorgaans. Met Nicepage Theme Colors kan een gedeeld kleurenschema op een project worden toegepast, waardoor knoppen en prijsaccenten in de winkelwagen consistent blijven met de rest van de webshop.

Een snelle stresstest neemt de meeste twijfels weg: laad een demo met uw langste productnamen en echte prijsnotaties en bekijk deze op telefoonbreedte met een toegepaste korting. Als de rijen netjes uitgelijnd blijven en het afrekenen goed opvalt, zijn de stijlen klaar voor echte bestellingen.