Глеб!

Что‑то не так. В обоих ваших вариантах штука с граммами выглядит как переключалка пачек разной массы. Но если исходить из вашего описания, это просто текст, в котором масса текущей упаковки выделена зелёным. Кажется, для начала нужно определиться.

Если эта штука всё же является переключалкой, и вы уверены, что с точки зрения повышения продаж это лучший вариант, то тогда ваша проблема в некомпактной и неэкономной вёрстке. Просто сделайте компактнее:

Ещё можно попытаться показать разницу упаковок кеглем в переключалке:

Если же штука здесь только для информирования, то не до конца понятно, как это будет работать. Как понять, сколько всего будут стоить 10 килограммов? Что покупатель должен сделать с карточкой прямо сейчас, если хочет пачку побольше? Почему необходимо показать всё разом в одной карточке, а не поставить просто рядом три отдельных карточки для разного размера упаковок?

Три карточки рядом могли бы выглядеть так (цифры с потолка):

Обратите внимание, насколько компактнее стала карточка после того, как я убрал фоновую плашку. И при этом — о, диво! — карточки не стали склеиваться друг с другом, и мы легко понимаем, что к чему относится, благодаря соблюдению правила внутреннего и внешнего.

P. S. О том, как бороться с плашками и линейками, я много рассказываю и показываю на курсе «Типографика и вёрстка».

Типографика в вебеНоситель: сайтФормат: текстФормат: иллюстрацияПравило внутреннего и внешнегоДоработка вёрстки
Отправить
Поделиться
Запинить

Комментарии

Игорь Петров

Если можно надёжно поставить три карточки в ряд, например, в банере, то мб можно ещё увеличить наглядность — показать размеры пачек относительно друг‑друга :‑)

23 фев 2022
Глеб Чуйков

Огромное спасибо за решение. Да, я забыл упомянуть, что в одной карточке все граммовки сразу от одного товара для удобства выбора. Тем будет не 1500 карточек, а 400.

Живая версия здесь: https://www.ralfshop.cz/katalog/
Сайт на чешском языке.

23 фев 2022

11 лет назад уже спрашивали подобное: https://bureau.ru/soviet/20111116/

23 фев 2022

Рекомендуем другие советы