Оформление карточек товара в интернет-магазине

Узнайте о вкладках, бейджах, табах, тегах, рекомендациях и других возможностях делать идеальные карточки товаров
  • Название
  • Изображения
  • Артикул
  • Статус наличия
  • Количество
  • Варианты товара
  • Вывод изображения в зависимости от варианта товара
  • Старая/новая цена
  • Добавление в корзину
  • Быстрый заказ
  • Параметры
  • Бейдж на изображение
  • Теги
  • Блок с преимуществами
  • Добавление в избранное
  • Выезжающая панель
  • «Смотрите также»
  • «Смотрите также» после добавления в корзину
  • Дополнительная информация
  • Описание
  • Расширенное описание
Карточка товара — пожалуй, самое важное, что есть в интернет-магазинах
Каждому товару соответствует отдельная страница — карточка товара. Гибкая настройка дизайна и насыщенный состав информации
Бейдж
Название товара
Артикул
Цена
Варианты товара
Количество
Кнопки 
Параметры
Описание
Доп. информация
Теги
Преимущества
Расширенное описание из блоков
Блок «Смотрите также»
Наличие
Расширенное описание из блоков
Выезжающая панель
Выезжающая панель
Название товара
Артикул
Цена
Наличие
Варианты товара
Количество
Кнопки
Параметры
Описание
Преимущества
Теги
Доп. информация
Расширенное описание из блоков
Расширенное описание из блоков
Блок «Смотрите также»
Бейдж
Название продукта
Настройка названия продукта: выравнивание посередине или по левому краю, сверху или справа от изображения, отступ от названия
Изображения
Cтруктура, соотношение сторон блока, соотношение сторон изображения, кадрирование, скругление углов, изображение на мобильных и взаимодействие
1. Структура изображений
Есть 4 варианта структуры, на видео наглядно показываем как меняется вид карточки при разных вариантах. P.S.: В последнем варианте правая часть карточки (с текстом) двигается вниз при скролле (в режиме редактирования этого не видно)
2. Соотношение сторон блока, соотношение сторон изображения и кадрирование
Настройте соотношение сторон блока и изображений так, чтобы всю важную информацию было видно невооружённым глазом
3. Скругление углов, изображения на мобильных и взаимодействие
Скругление углов можно настроить потянув за ползунок или ввести значение в поле справа.
Изображения на мобильных будет отображаться в зависимости от выбранных настроек: по ширине информации или на 100% экрана (см. ниже)
на 100% экрана
по ширине информации
Артикул и статус наличия
Настройка отображения артикула и статуса наличия, названия, шрифта и отступа. В статусе наличия + настройка текста, если количество товара = 0 и круг наличия
Количество товара
Настройка вида выбора, цвета, ширины, радиуса скругления углов и отступов
Есть 2 вида поля с количеством товаров: кнопки + и –, поле для ввода. Вводить количество можно как с помощью кнопок, так и с помощью клавиатуры. Гибкие настройки дизайна позволяют гармонично вписать поле для ввода количества в любую карточку товара
Варианты товара и вывод изображения в зависимости от варианта товара
В карточке есть возможность настроить варианты товаров: размеры, цвета и то, что вам нужно. Для каждого варианта можно задать собственную цену, артикул и фото
Есть 3 вида выбора варианта товара: выпадающий список с обводкой, выпадающий список и сразу показываем все. У каждого вида можно настроить скругление, цвет фона, цвет текста, отступы, размеры
Настроить варианты можно в разделе «Цены»
Цена
Добавляйте свою цену для каждого варианта товара. Укажите старую цену
2 варианта отображения цены: справа от количества и отдельной строкой. Старую цену можно настроить в режиме создания товара в разделе «Цена»
Добавление в корзину
Информирование клиента о том, что товар в корзине возможно в 2 вариантах:
Гибкие настройки дизайна
1. В попапе:
2. В боковой панели:
Быстрый заказ
Тип быстрого заказа в 2 вариантах: просто форма и полноценная форма
Гибкие настройки полей формы и дизайна кнопки
1. Просто форма
2. Полноценная форма
Настроить поля полноценной формы быстрого заказа нужно в режиме создания товара в разделе «Формы»
Гибкие настройки дизайна полноценной формы:
Параметры
Параметры - это характеристики товара. По ним можно осуществлять фильтрацию. Они выводятся в карточке товара. Например, калорийность, содержание сахара
На примере параметры – калорийность и состав (см выше).
Чтобы создать параметр, нужно зайти в Настройки – Интернет-магазин – Параметры
Для отображения уже созданных параметров в карточке зайдите в режим создания товара и в разделе «Параметры» выберите подходящий для данного товара. Это нужно проделать для каждого товара индивидуально
Параметры
Параметры
Бейдж на изображение
Выделите важную информацию с помощью бейджа. Гибкие настройки расположения
Чтобы добавить бейдж, зайдите в режим создания товара – раздел «Преимущества» – Бейдж в карточке товара на изображении
Теги
Теги помогают найти товар по каким-либо характеристикам. В нашем примере теги товара – без сахара, боксы и новинка. Теги кликабельны и ведут на страницу с товарами, у которых есть такой же тег
В режиме создания и редактирования товара зайдите в раздел «Преимущества» и в самом низу страницы добавьте нужные теги. В поле «Ссылка» справа от тегов пропишите соответствующие ссылки для удобства поиска товара
Теги
Теги
Блок с преимуществами
Выделяйте самое главное.
Преимущества настраиваются в режиме редактирования дизайна
Добавление в избранное
Позволяет быстро находить понравившееся товары. Находится в верхнем правом углу изображения
Выезжающая панель
Выезжающая панель появляется при просмотре карточки товара с компьютеров после прокрутки экрана вниз. На мобильных панель не отображается
«Смотрите также» в двух вариантах
В каждой карточке товара можно выбрать товары, которые будут показаны как рекомендованные
В боковой панели
2. Блок «смотрите также» после добавления товара в корзину
1. Блок «Смотрите также» под информацией об основном товаре
В попапе
Дополнительная информация
Добавляйте всю необходимую информацию о товаре не боясь нагрузить карточку
Настроить дополнительную информацию можно а режиме создания товара в разделе описание в самом низу страницы. Добавить можно до 4 разделов доп. информации
Описание
Опишите основные характеристики товара
Настроить описание (краткое описание) можно в режиме создания товара в разделе «Описание»
Описание
Описание
Расширенное описание
Формируйте расширенные описания товаров с помощью блочного редактора
Настроить расширенное описание можно в режиме создания товара в разделе «Полное описание». Добавляйте любые готовые блоки или создавайте уникальный дизайн с помощью гибкого блока
Среднее время запуска проекта с собственным доменом составляет 5 часов, далее можно внедрить 100+ инструментов для развития вашего бизнеса онлайн
Заботливая служба поддержки поможет запустить проект без стресса и нервов. Попробуйте Базиум в действии прямо сейчас