Покупка CSS шаблоны

Современные CSS-шаблоны оформления покупки

Зачеркнутая цена, яркий бейдж распродажи и кнопка, которая становится блеклой, когда нужный размер закончился, — все это задается таблицей стилей. CSS-шаблоны оформления покупки заранее предлагают эти стили для карточек товаров, блоков с ценами и элементов выбора параметров. Вы настраиваете палитру и отступы под свой бренд, а визуальные правила для каждого сценария покупки уже готовы к работе.

Визуальные состояния, на которые обращают внимание покупатели

Цена и кнопка покупки привлекают больше всего внимания на карточке товара. Качественные стили выделяют их с помощью насыщенности шрифта, размера и отступов. Короткая строка с характеристиками или примечание о доставке остаются более мелкими и ненавязчивыми — их легко прочитать и так же легко пропустить. Приведенные ниже состояния встречаются в большинстве магазинов, и каждому из них требуется свой вид:

• цена со скидкой рядом со старой, которая перечеркнута и сделана менее контрастной;
• выбранный параметр, который заметно отличается от соседних невыбранных размеров;
• недоступный вариант или отключенная кнопка, по которым сразу видно, что они неактивны;
• стили наведения и фокуса, показывающие готовность элемента к нажатию, в том числе при навигации с клавиатуры.

Уведомления об остатках и скидочные бейджи несут чисто информационный характер. Селекторы параметров и кнопка покупки, напротив, призывают к клику. Грамотная стилизация подчеркивает эту разницу, чтобы красный бейдж никогда не выглядел как интерактивный элемент.

Описания разной длины, узкие экраны

Правила Grid и Flexbox определяют, как ряд карточек ведет себя при неодинаковой длине описаний. Длинное название товара может сместить цену и кнопку ниже, чем в соседней карточке, затрудняя сравнение позиций в ряду. Надежные шаблоны закрепляют оба элемента в нижней части каждой карточки, чтобы они выстраивались в единую линию независимо от объема текста над ними. На экранах телефонов карточки перестраиваются в меньшее число колонок, а кнопка часто растягивается на всю ширину карточки для удобного нажатия. Цена, варианты выбора и кнопка выстраиваются вертикально именно в том порядке, в каком их изучает покупатель.

Повторно используемые классы для плотных сеток карточек

Поскольку одни и те же элементы повторяются в десятках карточек, стили удобнее всего оформлять в виде повторно используемых классов для карточки, цены и бейджа скидки. Nicepage Theme Colors применяют глобальную цветовую схему на всех страницах проекта, сохраняя единообразие акцентов на кнопках и ценах, при этом каждое предложение сохраняет собственную выразительность. Компактный каталог требует плотного размещения карточек и лаконичных кнопок.

Товарам с несколькими характеристиками нужны более высокие карточки, больше пространства между переключателями и кнопка, расположенная под последним выбором. Оптимальным решением обычно становится тот шаблон, стили которого уже рассчитаны на вашу самую насыщенную карточку, бейджи и состояния.