Если у интернет-магазина есть витрина, то карточка товара — это прилавок, продавец и касса в одном месте. Покупатель приходит из поиска, рекламы или каталога с конкретным вопросом: подойдёт ли мне эта вещь, можно ли ей доверять и сколько всё это в итоге будет стоить. Всё, что карточка не успела объяснить за минуту, превращается в закрытую вкладку.
Парадокс в том, что именно на этой странице магазины экономят больше всего. Каталог и главную рисуют старательно, а карточки заполняют по остаточному принципу: три фотографии от поставщика, описание, скопированное с сайта производителя, и кнопка «Купить» где-то внизу. В результате трафик есть, а заказов мало — и причина не в рекламе.
В этой статье разберём карточку товара по блокам: что в ней должно быть, в каком порядке это показывать, как подавать цену, характеристики и отзывы и на каких ошибках магазины теряют деньги чаще всего. Материал основан на практике проектирования магазинов, в том числе тех, что мы делали в студии Mevero для мебели и косметики.
Какую задачу решает карточка товара
У карточки три последовательные задачи. Первая — подтвердить, что посетитель попал туда, куда хотел: название, фото и цена должны совпадать с ожиданием из поисковой выдачи или рекламного объявления. Вторая — снять сомнения: подходит ли размер, совместимо ли с имеющимся, как выглядит вживую, что говорят другие покупатели. Третья — сделать следующий шаг лёгким и безопасным: добавить в корзину, выбрать вариант, уточнить наличие.
Отсюда главный принцип: карточка проектируется вокруг вопросов покупателя, а не вокруг данных, которые есть у магазина. Данные из товарной базы — артикул, вес упаковки, код производителя — нужны складу, а не человеку. Полезное упражнение: выпишите десять вопросов, которые покупатели задают менеджерам по телефону и в чате по этому товару, и проверьте, что на странице есть ответ на каждый.
Анатомия карточки: из каких блоков она состоит
Хорошая карточка устроена по понятной схеме. На десктопе она обычно делится на две колонки: слева галерея, справа заголовок, цена, выбор вариантов и кнопка. Ниже располагаются описание, характеристики, отзывы и связанные товары. На смартфоне колонки превращаются в вертикальный поток, и порядок блоков становится критичным.
| Блок | Что решает | Частая ошибка |
|---|---|---|
| Галерея | Показывает товар и его детали | Одно фото в низком разрешении |
| Заголовок | Подтверждает, что это нужный товар | Название из базы с артикулом и сокращениями |
| Цена и наличие | Сообщает условия покупки | Цена «от», неясно, есть ли товар |
| Выбор вариантов | Размер, цвет, комплектация | Варианты в виде отдельных карточек |
| Кнопка покупки | Ведёт к корзине | Сливается с фоном или спрятана |
| Описание и характеристики | Отвечает на вопросы | Текст производителя без правки |
| Отзывы | Даёт социальное доказательство | Только положительные и безымянные |
| Доставка и возврат | Снимает страх риска | Условия на отдельной странице |
Галерея: фото решают больше, чем текст
В интернете нельзя потрогать товар, поэтому фотография берёт на себя роль осязания. Покупатель смотрит на изображения дольше, чем читает любой другой блок, и по ним судит о качестве, а заодно и о самом магазине. Фото с watermark чужого сайта или картинки, видимо взятые у поставщика, сразу снижают доверие.
Сколько фотографий нужно
Минимум — пять-шесть кадров для товара, который выбирают визуально. Главное фото на чистом фоне, затем ракурсы с разных сторон, крупные планы материала и швов, товар в использовании и в масштабе. Для одежды важна модель с указанием роста и размера, для мебели — интерьерные кадры, для косметики — текстура и упаковка рядом с рукой, чтобы было понятно, какого она размера.
Технические правила галереи
- Изображения должны увеличиваться без потери резкости: покупателю нужно разглядеть фактуру.
- Миниатюры — под главным фото или сбоку, с понятным указанием активного кадра.
- На смартфоне галерея листается свайпом, а не мелкими стрелками; счётчик кадров показывает, сколько их всего.
- Первое изображение грузится с приоритетом, остальные подгружаются лениво — иначе страница тормозит, а мы отдельно разбирали, как оптимизировать изображения для скорости и поиска.
- Видео и вращение на триста шестьдесят градусов полезны для сложных товаров, но не должны запускаться со звуком автоматически.
Заголовок, цена и наличие
Название товара в карточке — это не поле из базы, а фраза, по которой человек узнаёт предмет. Хорошая формула: тип товара, бренд или модель, ключевая характеристика. «Диван угловой Норд, велюр, серый» работает лучше, чем «ДУ-Норд/вл/сер-04». Артикул стоит оставить, но мелким шрифтом рядом.
Цена — самый читаемый элемент справа от галереи. Правила простые: крупный шрифт, чёткий контраст, отсутствие мелких символов, которые можно принять за скидку. Если есть акция, старую цену показывают зачёркнутой рядом с новой, а размер экономии указывают в рублях или процентах. Если цена зависит от выбранного варианта, она должна пересчитываться мгновенно, без перезагрузки страницы.
Наличие — не менее важная информация. Фраза «В наличии» ничего не говорит, пока непонятно где и когда товар можно получить. Хорошо работает формула: «В наличии на складе, доставим завтра» или «Заберите сегодня в пункте выдачи». Если товара нет, не убирайте страницу: предложите подписаться на уведомление о поступлении и покажите похожие позиции, иначе потеряете и посетителя, и накопленный поисковый вес страницы.
Выбор вариантов и кнопка покупки
Размер, цвет, объём, комплектация — всё, что покупатель выбирает до добавления в корзину, должно быть на виду и не требовать переходов. Цвета лучше показывать образцами, размеры — кнопками с понятным состоянием: доступен, недоступен, выбран. Недоступные варианты не прячут, а зачёркивают, чтобы человек видел полный ряд и не думал, что магазин что-то скрывает.
Кнопка «В корзину» — главный элемент страницы, и она должна выделяться среди остального интерфейса. Хорошая кнопка контрастна, имеет достаточный размер для нажатия пальцем, подписана глаголом и не конкурирует с другими цветными элементами. После нажатия нужна мгновенная обратная связь: счётчик корзины обновляется, появляется небольшое уведомление с кнопкой перехода к оформлению. Подробнее о том, что происходит дальше, мы писали в материале про корзину и оформление заказа без потерь.
Дополнительные действия — «В избранное», «Сравнить», «Купить в один клик» — должны оставаться второстепенными. Если вторичных кнопок слишком много или они такого же цвета, покупатель теряется в выборе и откладывает решение.
Описание и характеристики: пишем для человека
Самая распространённая беда карточек — одинаковые описания, скопированные с сайта поставщика. Они не помогают покупателю и вредят продвижению: поисковые системы видят дублированный контент и понижают такие страницы. Описание нужно писать заново или хотя бы переработать, добавив то, что знает именно ваш магазин.
Структура описания
Начните с короткого абзаца, который объясняет, кому и для чего подходит товар. Затем — три-пять ключевых преимуществ списком, но не общих («высокое качество»), а проверяемых: материал, толщина, срок службы, гарантия. В конце — нюансы: на что обратить внимание, с чем сочетается, как ухаживать. О том, как писать так, чтобы тексты читали люди и любили поисковики, подробно рассказано в статье про тексты для сайта.
Характеристики таблицей
Технические параметры удобнее подать таблицей из двух колонок. Группируйте их по смыслу: размеры, материалы, комплектация. Единицы измерения указывайте всегда, а для сложных терминов добавляйте подсказку. Характеристики, по которым покупатели фильтруют каталог, обязательно должны совпадать с теми, что указаны в карточке, иначе фильтры начнут показывать ошибочные результаты.
Отзывы, рейтинг и доказательства надёжности
Покупатели доверяют другим покупателям больше, чем магазину. Блок отзывов с рейтингом, датой и описанием опыта работает сильнее любых рекламных обещаний. Важно показывать не только пятёрки: набор исключительно положительных отзывов выглядит подозрительно. Грамотный ответ магазина на критику, наоборот, укрепляет репутацию.
- Показывайте средний рейтинг и количество отзывов рядом с названием, чтобы он был виден сразу.
- Давайте возможность отсортировать отзывы по полезности и по оценке.
- Разрешайте покупателям прикладывать фото: пользовательские снимки убеждают лучше студийных.
- Добавьте вопросы и ответы: каждый вопрос — это возможное возражение, которое теперь снято публично.
- Разместите рядом с блоком покупки значки гарантий: возврат, официальная гарантия, безопасная оплата.
Отдельной большой темой является сбор отзывов и их корректная подача на странице — мы разбираем её в статье об отзывах покупателей на сайте. Не забывайте и о микроразметке: рейтинг в сниппете повышает кликабельность выдачи, об этом рассказано в материале про микроразметку Schema.org.
Доставка, оплата, возврат: убираем страх риска
Среди причин отказа от покупки на последних шагах стоит неизвестная стоимость доставки и непонятные условия возврата. Эти данные нужно показать до корзины, прямо в карточке. Достаточно компактного блока с тремя строками: способы получения со сроками, способы оплаты, условия возврата. Если доставка бесплатна от определённой суммы, покажите, сколько осталось до порога.
Хорошо работает калькулятор доставки: покупатель вводит город или индекс и сразу видит срок и цену для себя. Это экономит время и снимает главную тревогу — «а во сколько мне обойдётся с учётом всего». В нашей практике добавление такого блока в карточки мебельного магазина «Древо» заметно сократило количество вопросов в чате; подробности можно посмотреть в кейсе по интернет-магазину мебели.
Рекомендации и перекрёстные продажи
Нижняя часть карточки — место для связанных товаров. Но нужно различать три сценария. Первый — похожие товары: для тех, кому не подошёл текущий. Второй — аксессуары и сопутствующие позиции: для тех, кто решил купить и готов добавить. Третий — комплекты, где экономия очевидна. Каждый блок должен называться по смыслу: «Похожие модели», «С этим покупают», «Соберите комплект», а не обобщённо «Рекомендуем».
Не нужно показывать больше шести-восьми позиций в ряду, иначе страница превращается в каталог, а внимание уходит от главного. Следите и за тем, чтобы рекомендации не вытесняли кнопку покупки на мобильных: она всегда должна быть доступна.
Мобильная версия карточки
Значительная часть заказов начинается со смартфона, поэтому карточка должна быть спроектирована для малого экрана, а не просто «сжата». Галерея занимает верхнюю часть экрана и листается жестом, заголовок и цена идут сразу под ней, затем выбор вариантов и закреплённая кнопка. Характеристики и описание складываются в раскрывающиеся блоки, чтобы не растягивать страницу до бесконечности. Подробнее об этом — в материале о мобильной версии интернет-магазина.
SEO карточки товара
Карточка — основная точка входа из поиска по коммерческим запросам. Чтобы она хорошо ранжировалась, нужны уникальное название и описание, корректные теги title и description, понятный адрес страницы, хлебные крошки, микроразметка товара с ценой, наличием и рейтингом. Обо всём этом мы писали отдельно, в том числе о том, как писать мета-теги. Важно, чтобы вариации одного товара не создавали десятки дублей: используйте одну страницу с выбором параметров либо настраивайте канонические адреса.
Типичные ошибки карточек товара
- Одно-два фото плохого качества и никаких деталей.
- Скопированное описание производителя без адаптации.
- Кнопка покупки теряется среди других элементов или находится ниже первого экрана на смартфоне.
- Цена и наличие неочевидны, а итоговая стоимость с доставкой выясняется только в корзине.
- Характеристики в виде сплошного текста без структуры.
- Нет отзывов, вопросов и ответов, нет гарантий и условий возврата.
- Варианты товара не переключаются без перезагрузки или ведут на разные страницы-дубли.
- Блок рекомендаций перегружен и отвлекает от покупки.
Как улучшать карточки на практике
Не пытайтесь переделать все карточки сразу. Выберите десять-двадцать товаров с наибольшим трафиком и сделайте для них идеальный шаблон, затем распространите его на остальной ассортимент. Измеряйте конверсию в добавление в корзину, глубину прокрутки, клики по вкладкам и по фото. Для проверки гипотез используйте A/B-тестирование: например, сравните положение кнопки или формат блока доставки. Если вы хотите, чтобы это проектировал отдельный специалист, а не шаблон по умолчанию, загляните на страницу разработки интернет-магазинов и на описание этапов нашей работы.
Итог
Продающая карточка товара — это ответ на все вопросы покупателя в правильном порядке: что это, как выглядит, сколько стоит, когда будет, что говорят другие и как купить. Сильная галерея, понятная цена, заметная кнопка, живое описание и честные отзывы создают ту самую уверенность, которая превращает визит в заказ. Карточку нельзя сделать один раз и забыть: её нужно измерять и улучшать, как любой другой рабочий инструмент. Если вы планируете магазин или хотите пересмотреть существующие карточки, напишите нам через страницу контактов — обсудим структуру и поможем подобрать решение под ваш ассортимент.
