Инфографика в карточке товара: главное изображение, которое продаёт на Ozon, WB и OpenCart

Инфографика для карточки товара — это визуальное представление ключевой информации о продукте на главном изображении: иконки, текстовые выноски, размеры, бейджи, преимущества. Не «украшательство», а инструмент конверсии, который за секунды отвечает на вопрос покупателя «стоит ли это открывать».

С 2009 года разрабатываю интернет-магазины на OpenCart — больше 150 проектов. И каждый раз, когда мы делаем магазин, вопрос карточек товаров всплывает: на своём сайте — своя верстка и изображения, на Ozon — свои требования, на Wildberries — свои. И если на маркетплейсах за вас инфографику могут сделать агрегаторы, то на своём сайте всё нужно продумывать самим. (только не через халтурные OCMOD-модификаторы — они ломают при каждом обновлении ядра)

В этом руководстве — как создавать инфографику для товаров на Ozon, Wildberries и Яндекс.Маркете, какие принципы работают всегда, и как перенести эти принципы на свой магазин на OpenCart. Если нужно доработать карточки товаров в OpenCart — закажите доработку.

Что такое инфографика в карточке товара и зачем она нужна

А почему обычное фото товара на белом фоне проигрывает карточке с инфографикой, даже если товар качественный?

Представьте конвейерную ленту в гипермаркете, на которой товары движутся один за другим. У вас есть секунда, чтобы понять — это моё или нет. Онлайн-маркетплейс устроен ещё жёстче: товар не рассматривают, его сканируют взглядом.

Инфографика в карточке решает четыре задачи:

• Привлекает внимание в выдаче среди десятков однотипных карточек.
• Отвечает на главные вопросы за 1–2 секунды: что это, сколько, какой материал, какой размер.
• Повышает конверсию — по данным исследований, карточки с инфографикой конвертируют на 20–40% лучше, чем без неё.
• Снижает возвраты — покупатель видит реальные характеристики и меньше разочаровывается при получении.

Разница между своим сайтом и маркетплейсом: на Ozon и WB инфографика — это основной инструмент борьбы за клик в выдаче. На своём сайте на OpenCart — это элемент доверия и информирования в карточке товара.

Что говорят исследования: на что смотрят покупатели

А куда именно смотрит покупатель на карточке и как использовать это знание?

У карточки товара есть 1–2 секунды, чтобы привлечь внимание. В этот момент человек не читает описание — он оценивает визуал.

Зоны внимания на главном изображении:

• Верхний левый угол + верхняя треть — самая ценная зона. Здесь должен быть главный оффер.
• Центр и левый край — место для подтверждения первого впечатления: материал, размер, качество.
• Нижняя зона — второстепенная информация.

Принцип 4W: главное изображение должно отвечать на четыре вопроса:

• Кто — производитель или бренд.
• Что — какой товар представлен.
• Какой — цвет, размер, вкус, модификация.
• Сколько — объём, количество, комплектация.

Если хотя бы один из этих элементов приходится искать — вероятность перехода в карточку снижается.

Как создать продающую инфографику: пошаговая инструкция

А как технически сделать инфографику, которая работает?

Шаг 1: Определите главный оффер

Верхний левый угол изображения — самая ценная зона. Сюда попадает взгляд Прежде всего, «Комплект 5 в 1», «Натуральный состав».

Не ставьте сюда логотип или мелкие подписи. Покупатель ищет выгоду, а не название бренда.

Шаг 2: Продумайте композицию и контраст

Чем сильнее товар выделяется на фоне, тем выше вероятность, что на него обратят внимание.

• Товар должен занимать 60–80% кадра.
• Фон — спокойный, однотонный, без отвлекающих деталей.
• Текст — контрастный, читаемый на маленьком экране.
• Минимализм работает лучше перегруженных решений.

Шаг 3: Тестируйте гипотезы

Ozon и Wildberries позволяют проводить A/B-тесты изображений. Не полагайтесь на вкус дизайнера — тестируйте.

Шаг 4: Соблюдайте правила площадок

У каждого маркетплейса есть требования к изображениям: размеры, безопасные зоны, расположение элементов. Проверьте охранные поля — области, которые не должны перекрываться интерфейсом площадки.

Принцип 4W: что должен увидеть покупатель с первого взгляда

А что именно должно быть на главном изображении, чтобы покупатель сразу понял — это то, что нужно?

Из наблюдений за поведением пользователей появился принцип 4W — четыре вопроса, на которые должно отвечать главное изображение:

Если в карточке товара на Ozon или Wildberries хотя бы один из этих пунктов приходится искать — конверсия падает.

Как адаптировать инфографику под разные категории товаров

А как делать инфографику для разных товаров — одежда, электроника, косметика, продукты?

Про товары для дома и работу с каталогом — в статье Как управлять каталогом товаров в OpenCart.

Нужна помощь с каталогом и карточками в OpenCart? Закажите доработку

3 главных правила эффективной инфографики

А какие правила работают для любой категории товаров и любой площадки?

1. Минимизируйте текст. Не более 5–7 слов на главном изображении. Если текста много, 80–90% покупателей его пропустят. Ключевой посыл должен читаться за секунды.
2. Создавайте динамику. Меняйте масштаб между изображениями в карточке: один кадр — крупный план деталей, следующий — полная композиция. Это удерживает внимание.
3. Проверяйте гипотезы. Ваш вкус может не совпадать с ожиданиями аудитории. Используйте тепловые карты и A/B-тесты. Цифры скажут точнее, какой макет работает.

Как настроить инфографику и изображения в OpenCart

А как технически организовать работу с изображениями товаров на собственном сайте на OpenCart?

OpenCart даёт базовые возможности для работы с изображениями, но для полноценной инфографики нужно дорабатывать:

Подробнее — в статье Как оптимизировать изображения в OpenCart.

Настроим изображения в OpenCart под ваш каталог — закажите доработку

Требования маркетплейсов к главным изображениям

А какие технические требования к изображениям на каждой площадке?

Подробнее про работу с маркетплейсами — в статье Интеграция маркетплейсов с OpenCart.

Кейс: как обновление карточек подняло конверсию на 28%

А что даёт правильная инфографика на реальных цифрах?

Интернет-магазин товаров для дома на OpenCart (3 000 позиций). Основной трафик — из Яндекса. Карточки товаров — стандартные фото на белом фоне без инфографики.

Проблема: конверсия 1.5%, высокий показатель отказов на карточках (65%). Покупатели не понимали, что именно они покупают — размеры, материалы, комплектация были только в текстовом описании.

Что сделали за месяц:

• Добавили на главные изображения иконки материалов и размеров.
• Разместили бейджи с ключевыми преимуществами (хит продаж, бесплатная доставка).
• Настроили галерею с зумом в OpenCart.
• Добавили изображения товаров в интерьере (контекстные фото).

Результат за 2 месяца:

• Конверсия выросла с 1.5% до 2.0% (+28%).
• Показатель отказов на карточках снизился с 65% до 48%.
• Среднее время на странице товара выросло на 40%.
• Возвраты снизились на 15% — покупатели лучше понимали, что заказывают.

Бюджет на доработку — 22 000 ₽ (доработка галереи + дизайн инфографики для топ-100 товаров).

Подробнее — в кейсе магазина товаров для дома.

Хотите улучшить карточки? Закажите аудит карточек товаров

Чек-лист: проверка главного изображения за 2 минуты

А что конкретно проверить в каждой карточке товара?

Контент:

• ☑ Главный оффер в верхнем левом углу.
• ☑ Текст читается за 2 секунды на мобильном экране.
• ☑ Не более одного сообщения сверху.
• ☑ Товар занимает 60–80% кадра.
• ☑ Высокий контраст текста и фона.
• ☑ Чистый фон, без отвлекающих деталей.
• ☑ Текст — не более 5–7 слов.

Технические требования:

• ☑ Размер соответствует требованиям площадки (800×800+).
• ☑ Охранные поля соблюдены.
• ☑ Формат — JPG или PNG (WebP для своего сайта).
• ☑ Цвета натуральные, без искажающих фильтров.
• ☑ ALT-тег заполнен ключевыми словами.

Проверка гипотез:

• ☑ Запущен A/B-тест на Ozon/WB (если продаёте там).
• ☑ Проверена тепловая карта взгляда.
• ☑ Сравнена конверсия старой и новой карточки.

Как найти и исправить ошибки в OpenCart?
Подробный разбор — в этом разделе.

Типичные ошибки в инфографике товаров

А какие ошибки в инфографике встречаются чаще всего и как их избежать?

Про управление ассортиментом — в статье Управление ассортиментом: ABC-XYZ анализ.

Часто задаваемые вопросы

Какой размер должен быть у главного изображения на Ozon?

Минимум 800×800 px, оптимально — 1200×1200 px. Формат — JPG или PNG. Фон — белый или светлый. Охранные поля — 10% от края.

Сколько текста можно размещать на главном изображении?

Не более 5–7 слов. Длинные фразы не читаются — их пропускают 80–90% покупателей.

Нужна ли инфографика на своём сайте (OpenCart) или только на маркетплейсах?

На своём сайте инфографика тоже нужна — особенно на карточках товаров, которые получают трафик из поиска. Она повышает доверие и конверсию. Но требования к оформлению мягче, чем на маркетплейсах.

Как часто нужно обновлять изображения товаров?

Минимум раз в квартал для топ-100 товаров. Тестируйте новые гипотезы: A/B-тесты на Ozon/WB показывают, что даже смена цвета бейджа может поднять CTR на 10–15%.

Какие инструменты использовать для создания инфографики?

Canva — для быстрых решений, Figma — для профессиональной работы, Photoshop — для сложной ретуши. Для массовой обработки изображений в OpenCart — модули с автогенерацией.

Что делать с изображениями на старых товарах?

Начните с топ-20% товаров, которые дают 80% выручки. Обновите их инфографику, замерьте результат. Если конверсия выросла — масштабируйте на весь каталог.

Об авторе

С 2009 года занимаюсь разработкой и доработкой интернет-магазинов на OpenCart — больше 150 проектов. Работал с каталогами от 100 до 100 000 товаров — настройка карточек, изображений и контента.

Если нужна доработка OpenCart или техподдержка — обращайтесь.

Антон Баринов — разработчик интернет-магазинов на OpenCart с 2009 года, основатель opencart-cms.ru.