Aankoop CSS-sjablonen

Moderne aankoop-CSS-templates

Een doorgestreepte prijs, een opvallende aanbiedingsbadge en een knop die vervaagt wanneer een maat is uitverkocht, komen allemaal voort uit het stylesheet. Aankoop-CSS-templates bieden u deze stijlen vooraf voor productkaarten, prijsblokken en optiekeuzes. U past het kleurenpalet en de tussenruimtes aan uw merk aan, waarna de visuele regels voor elke koopsituatie direct op hun plek staan.

Visuele statussen die klanten opmerken

De prijs en de koopknop dragen het meeste gewicht op een productkaart. Goede stijlen geven ze prioriteit via lettergewicht, afmetingen en witruimte. Een korte specificatieregel of een verzendopmerking blijft kleiner en subtieler, makkelijk leesbaar en net zo eenvoudig over te slaan. De onderstaande statussen komen in de meeste webwinkels voor en hebben elk een eigen uiterlijk nodig:

• een actieprijs naast de oude prijs, die is doorgestreept en gedimd;
• een geselecteerde optie die duidelijk verschilt van de niet-geselecteerde maten ernaast;
• een niet-beschikbare variant of een uitgeschakelde knop die in één oogopslag inactief oogt;
• hover- en focus-stijlen die tonen dat een element klaar is om te worden geactiveerd, ook voor toetsenbordgebruikers.

Voorraadmededelingen en kortingsbadges zijn uitsluitend ter informatie bedoeld. Optiekeuzes en de koopknop vragen juist om een klik. Een goede styling houdt dat verschil zichtbaar, zodat een rode badge nooit lijkt op iets waarop geklikt kan worden.

Ongelijke beschrijvingen, smalle schermen

Grid- en Flexbox-regels bepalen hoe een rij kaarten omgaat met producten met ongelijke beschrijvingen. Een lange productnaam kan de prijs en de knop verder omlaag duwen dan bij de kaart ernaast, waardoor de rij lastig te vergelijken is. Degelijke templates verankeren beide onderaan elke kaart, zodat ze over de hele rij uitgelijnd blijven, ongeacht wat de tekst erboven doet. Op een telefoon schikken kaarten zich in minder kolommen en rekt de knop vaak uit over de volledige breedte van de kaart om gemakkelijk aantikken mogelijk te maken. Prijs, opties en knop stapelen zich vervolgens in de volgorde waarin een koper ze leest.

Herbruikbare classes voor compacte kaartenrasters

Aangezien dezelfde onderdelen zich herhalen over tientallen kaarten, werken de stijlen het beste als herbruikbare classes voor de kaart, de prijs en de aanbiedingsbadge. Nicepage Theme Colors passen een globaal kleurenschema toe over alle projectpagina's, waardoor accenten van knoppen en prijzen consistent blijven terwijl elk aanbod zijn eigen nadruk behoudt. Een compacte catalogus vraagt om compacte kaarten en korte knoppen.

Producten met meerdere opties vereisen hogere kaarten, meer ruimte tussen selectors en een knop onder de laatste keuze. De beste match is meestal het template waarvan de stijlen uw meest uitgebreide kaart, badges en statussen al dekken.