Zakup Szablony CSS

Nowoczesne szablony CSS zakupu

Przekreślona cena, wyrazista plakietka promocji i przycisk, który staje się wyszarzony po wyczerpaniu rozmiaru – wszystko to wynika z arkusza stylów. Szablony CSS zakupu dostarczają gotowe style dla kart produktów, bloków cenowych i selektorów opcji. Wystarczy dopasować paletę i odstępy do marki, a reguły wizualne dla każdej sytuacji zakupowej są już na swoim miejscu.

Stany wizualne zauważane przez klientów

Cena oraz przycisk zakupu mają największe znaczenie na karcie produktu. Dobre style nadają im priorytet za pomocą grubości fontu, rozmiaru i odstępów. Krótki wiersz specyfikacji lub uwaga o wysyłce pozostają mniejsze i lżejsze, łatwe do przeczytania i równie łatwe do pominięcia. Poniższe stany występują w większości sklepów i każdy z nich wymaga odrębnego wyglądu:

• cena promocyjna umieszczona obok starej, która jest przekreślona i stonowana;
• wybrana opcja, która wyraźnie wyróżnia się na tle niewybranych rozmiarów obok;
• niedostępny wariant lub wyłączony przycisk, który już na pierwszy rzut oka wygląda na nieaktywny;
• style najechania kursorem i fokusu, które sygnalizują gotowość elementu do kliknięcia, także dla użytkowników klawiatury.

Informacje o stanie magazynowym i plakietki rabatowe służą wyłącznie celom informacyjnym. Z kolei selektory opcji oraz przycisk zakupu zachęcają do kliknięcia. Dobre stylowanie zachowuje tę różnicę, dzięki czemu czerwona plakietka nigdy nie wygląda jak element do kliknięcia.

Nierówne opisy, wąskie ekrany

Reguły Grid i Flexbox decydują o tym, jak rząd kart radzi sobie z produktami o opisach różnej długości. Długa nazwa produktu może zepchnąć cenę i przycisk niżej niż na sąsiedniej karcie, utrudniając porównywanie w całym rzędzie. Dopracowane szablony przypinają oba elementy do dołu każdej karty, dzięki czemu wyrównują się one w rzędzie niezależnie od objętości tekstu powyżej. Na telefonie karty układają się w mniejszą liczbę kolumn, a przycisk często rozciąga się na pełną szerokość karty, ułatwiając dotknięcie. Cena, opcje i przycisk układają się wtedy pionowo w kolejności, w jakiej czyta je kupujący.

Klasy wielokrotnego użytku dla gęstych siatek kart

Ponieważ te same elementy powtarzają się na dziesiątkach kart, style sprawdzają się najlepiej jako klasy wielokrotnego użytku dla karty, ceny i plakietki promocji. Nicepage Theme Colors stosują globalną kolorystykę na stronach projektu, dbając o spójność akcentów przycisków i cen, podczas gdy każda oferta zachowuje własne wyróżnienie. Zwarty katalog wymaga gęstych kart i krótkich przycisków.

Produkty z wieloma opcjami wymagają wyższych kart, większych odstępów między selektorami i przycisku umieszczonego pod ostatnim wyborem. Najlepszym wyborem jest zazwyczaj szablon, którego style obejmują już Twoją najbardziej rozbudowaną kartę, plakietki i stany.