ГлавнаяБлогКарточка товара интернет-магазина: что показать покупателю и как проверить мобильную версию
Карточка товара интернет-магазина: что показать покупателю и как проверить мобильную версию
Команда Cart-Power
Обновлено ·16 мин чтения
В карточке товара покупатель должен быстро найти название, цену, наличие и кнопку покупки. Условия доставки нужны рядом с этим блоком, до перехода в корзину. Остальной состав зависит от товара: одежде нужна таблица размеров, оборудованию — совместимость и комплектация. На телефоне проверьте порядок блоков и удобство выбора варианта, прежде чем добавлять новые элементы. С 1 сентября 2026 года действуют поправки 546-ФЗ к Закону о защите прав потребителей: если товар подлежит обязательной сертификации или декларированию, в его описании нужна ссылка на запись о сертификате или декларации в реестре.
Первую версию статьи мы опубликовали в 2021 году, а в октябре 2026-го дополнили примерами из проектов и автоматической проверкой исходного HTML 170 карточек российских сайтов. Проверка находит места для ручного разбора; по ней нельзя судить, что покупатель видит после загрузки страницы. Примеры решений взяты из карточек, которые мы 13 лет собираем на CS-Cart для клиентов.
Что покупатель должен увидеть на первом экране
Первый экран — всё, что видно до прокрутки. На компьютере рядом с фото обычно помещается блок покупки. На телефоне крупное фото может занять почти весь экран. Проверьте, как быстро покупатель добирается до цены, выбора варианта и кнопки; не пытайтесь уместить туда всю карточку мелким шрифтом.
Типовая ошибка — условия, спрятанные за кликом. В одном магазине, который мы дорабатывали в начале 2026 года, способы доставки на карточке открывались только по клику на слово «доставка». Покупатели не видели, что доставка в их город вообще есть. Мы перенесли блок доставки в блок цены: все способы видны сразу и пересчитываются, как только покупатель выбрал город.
Заодно разобрались, почему страница товара подвисала: доставка пересчитывалась лишний раз. Теперь расчёт запускается, только когда меняются корзина или адрес.
12 элементов карточки: что нужно вашей категории
Сначала проверьте возможности своей темы и версии CS-Cart. Дополнительный модуль нужен под конкретную задачу, которую они не решают. Этот перечень помогает выбрать состав карточки; таблица размеров, видео и комплекты нужны не каждому магазину.
1. Название товара
Название стоит в заголовке страницы (H1). В нём тип товара, бренд, модель и главный отличительный параметр: у смартфона это память и цвет, у перфоратора — энергия удара и тип патрона. По такому названию покупатель сразу понимает, что попал куда нужно, а поиск по сайту находит товар по любому из слов. Название в каталоге и в карточке совпадает, иначе человек засомневается, тот ли товар открыл.
В исходном HTML 15 карточек из 170 нашлось несколько H1, на двух тег не обнаружен. Это повод посмотреть структуру страницы, а не готовый диагноз для поиска. На одной карточке в H1 попала фраза «Наши менеджеры перезвонят Вам…». Проверьте, что видимый заголовок называет товар, а заголовок формы обратного звонка не конкурирует с ним по оформлению.
2. Фото и видео
В магазине товар можно повертеть в руках. На сайте эту работу берут на себя снимки с разных сторон, крупный план фактуры и фото в деле: одежда на человеке, мебель в комнате, инструмент в руке. Дайте открыть каждый снимок крупно.
Видеообзор и распаковка отвечают на вопросы, которые фото не закрывает: как товар раскладывается, звучит, сидит. Модуль «Видеогалерея товаров» ставит ролики YouTube, Shorts, Rutube, VK Видео и свои файлы прямо среди фотографий и на отдельную вкладку. Ролик добавляется ссылкой, превью и вертикальный формат модуль берёт с хостинга. Товары, которые хочется покрутить в руках, показывает круговой обзор 360°, собранный из обычных фотографий.
3. Цена и выгода
Цена стоит рядом с названием и кнопкой, крупно. При скидке видны обе цены и разница. Если товар сравнивают за килограмм, литр или метр, покажите и эту цену. В CS-Cart и Multi-Vendor начиная с 4.15.1 для этого есть штатный модуль «Цена за единицу»: в товаре задают единицу измерения и её количество в упаковке.
Единицы учёта магазина не всегда совпадают с привычками покупателя. Плитку выбирают по площади в квадратных метрах, хотя CS-Cart ведёт цену и остаток в штуках. Мы сделали переключатель цены «за штуку / за м²» и отдельный фильтр по цене за метр. В магазине чая каждая фасовка на 25, 50 и 100 г стала вариацией товара, и её цена считается от цены за грамм.
На оптовом портале карточке нужна таблица цен. У одного нашего клиента покупатель с доступом к оптовым ценам видит в карточке таблицу видов цен, от розницы и РРЦ до трёх оптовых уровней, а гость видит свои цены. Когда 1С снижает любую из четырёх цен, рядом появляется зачёркнутая старая.
Покупатель должен видеть цену текстом. Автоматическая проверка не обнаружила цену в рублях в исходном HTML 45 карточек из 170. Цена могла загружаться скриптом или отображаться в другом формате, поэтому эти страницы требуют ручной проверки. Если стоимость зависит от комплектации, объясните расчёт; нижнюю границу «от …» указывайте только для предложения, которое можно заказать за эту сумму. Если цены часто меняются, график истории цены показывает покупателю, что скидку не придумали накануне акции. Там же есть кнопка подписки на снижение цены для тех, кто пока не готов купить.
4. Наличие
До корзины покупатель должен знать, есть ли товар и когда он у него будет. Штатных «в наличии» и «нет в наличии» для этого мало. Статус «под заказ, 5–7 дней» помогает оценить ожидание, если магазин подтвердил этот срок у поставщика. Модуль «Свои статусы наличия товаров» ставит товарам и вариациям статусы «под заказ», «ожидается», «последний экземпляр», а в расширенном режиме меняет текст в зависимости от остатка.
Если складов несколько, покажите, где именно лежит товар. В магазине плитки над кнопкой «В корзину» стоит блок «Доступное количество в г. …» со списком складов и количеством на каждом. Для товара на складе поставщика указывайте «Под заказ» с подтверждённым сроком. Статус «В пути» подходит, когда товар уже отгружен. При нулевом собственном остатке карточку можно оставить на витрине с такими условиями. Производитель, который продаёт ещё и через партнёров, показывает в карточке, у кого из них товар есть сейчас, со ссылкой на сайт партнёра и подпиской «Сообщить, когда появится у партнёра».
5. Выбор вариантов
Цвет, размер и объём выбирают на странице товара, не возвращаясь в каталог. Выбранный вариант меняет фото, цену и наличие, иначе покупатель положит в корзину не то, что видел.
Показывать ли каждый цвет отдельной позицией в каталоге? Для одежды, обуви и техники мы советуем такой вариант: в каталоге видна вся палитра, и покупатель находит свой цвет до перехода в карточку. Размеры лучше оставить переключателем, иначе каталог заполнится одинаковыми картинками. В CS-Cart это решают настройки группы вариаций: по документации вариации могут занимать в каталоге одну позицию или по позиции на цвет, а размер при этом выбирается на странице товара.
Вариации, которые ищут отдельно, стоит вывести со своим адресом. Для маркетплейса загородного строительства мы сделали так, что выбранные вариации получают свой URL, title, description и описание и попадают в карту сайта.
Оптовику удобнее таблица. Модуль «Таблица вариантов для заказа» выводит все размеры или цвета с полями количества: набор кладётся в корзину одной кнопкой, оптовая скидка считается от общего количества.
6. Таблица размеров
Для одежды и обуви таблица размеров стоит рядом с выбором размера и открывается поверх страницы. PDF, который скачивается на телефон и теряется в загрузках, — лишний шаг перед покупкой. Таблица своя для каждого типа товара: бельё и пальто меряют по-разному. Модуль «Таблицы размеров» выводит таблицу вкладкой или ссылкой у выбора размера и привязывает её к категории или характеристике, чтобы не настраивать каждый товар.
7. Доставка, оплата и возврат
До перехода в корзину покупателю нужны срок и стоимость доставки. Модуль «Стоимость доставки в карточке товара» показывает на странице способы, сроки и цену доставки, с выбором пункта выдачи и иконками служб. Порог бесплатной доставки подталкивает добрать корзину: строку «Добавьте ещё на 800 ₽ — доставим бесплатно» с полосой прогресса выводит модуль уведомления о бесплатной доставке.
Рядом укажите способы оплаты и краткие условия возврата, включая способ вернуть товар без визита в магазин, а полные правила дайте по ссылке. Если есть рассрочка или оплата частями, напишите об этом в карточке: покупатель дорогого товара ищет такую строку ещё до корзины.
8. Кнопка «В корзину»
Основное действие выделено контрастом и подписано «В корзину» или «Купить». После нажатия покупатель видит, что товар добавлен, и может перейти к оформлению. Если рядом есть быстрая покупка, оформите её спокойнее, чтобы две кнопки не спорили за внимание: модуль «Покупка в один клик» ведёт сразу к оплате и оставляет уже собранную корзину нетронутой.
9. Описание и характеристики
Таблицу характеристик дополните описанием: для каких задач подходит товар и как им пользоваться. Состав, размеры, вес, комплектация, гарантия и срок службы стоят на странице, а не в файле для скачивания. В CS-Cart по характеристикам строятся фильтры каталога, поэтому их заполняют одинаково у всех товаров категории.
Оптовикам и сервисным инженерам нужен код, который легко скопировать. На оптовом портале мы вывели в карточку код номенклатуры из 1С с кнопкой копирования, и по этому коду ищет живой поиск.
Если товар подлежит обязательной сертификации или декларированию, с 1 сентября 2026 года в его описании нужна ссылка на запись о сертификате или декларации в реестре (ст. 26.1 Закона о защите прав потребителей в редакции 546-ФЗ).
10. Отзывы и рейтинг
Отзывы снимают страх, что товар не совпадёт с ожиданием, и читать их покупатель должен в карточке, без перехода на другие сайты. Доверия больше, когда у отзыва есть фото покупателя, отдельные плюсы и минусы и отметка, что товар купили именно здесь. Модуль «Расширенные отзывы» добавляет оценки по параметрам, фото и видео покупателей, метку «Подтверждённая покупка» и ответ магазина под каждым отзывом.
11. Вопросы и ответы
Ответ на вопрос в карточке смогут прочитать и следующие покупатели. Не придётся заново объяснять в чате, подходит ли крепление или входит ли кабель в комплект. Модуль «Вопросы и ответы о товаре» добавляет в карточку такую секцию: отвечают магазин и другие покупатели, ответ с высшей оценкой поднимается наверх. Общие вопросы о доставке, гарантии и уходе удобнее собрать во вкладку: модуль FAQ выводит её в карточке товара и в категориях. В исходном HTML признаки вопросов и ответов нашлись у 29 карточек из 170. Детектор учитывал и разметку, и текстовые совпадения, поэтому число не показывает, сколько страниц содержат отдельный блок с ответами о товаре.
12. Сопутствующие товары и комплекты
Предложите совместимые аксессуары и расходники: чехол к телефону, нужный кабель к технике, коврик к палатке. Для каждого проверьте совместимость с выбранным вариантом основного товара. Модуль «Дополнительные товары / Аксессуары» собирает комплект прямо в карточке: покупатель выбирает товар в каждом слоте, видит сумму и кладёт всё в корзину одной кнопкой, в заказе комплект идёт одной строкой. Если к товару продаётся услуга или опция вроде «С установкой», подойдёт «Товар как опция». Блок похожих товаров нужен тому, кому этот товар не подошёл: он удерживает покупателя на сайте.
Что карточка обязана сообщить покупателю по закону
При дистанционной продаже, в том числе через интернет-магазин, продавец до заключения договора сообщает покупателю основные потребительские свойства товара, адрес и полное фирменное наименование продавца, место изготовления, цену и условия приобретения, доставку, срок службы, срок годности и гарантийный срок, порядок оплаты и срок действия предложения. Это п. 2 ст. 26.1 Закона о защите прав потребителей. Полное наименование и ОГРН продавца (у ИП — ФИО и ОГРНИП), адрес организации, телефон или email и способы направить претензию обычно размещают в подвале и на странице контактов (пп. 22 и 24 Правил продажи, ПП РФ № 657). Свойства, цена, гарантия и сроки живут в карточке.
С 1 сентября 2026 года действуют поправки 546-ФЗ, срок вступления в силу установлен его ст. 2. Если товар подлежит обязательному подтверждению соответствия, продавец сообщает об этом ссылкой в описании товара. Ссылка ведёт на страницу с записью о сертификате или декларации в реестре сертификатов и деклараций о соответствии или в Едином реестре ЕАЭС (абз. 2 п. 2 ст. 26.1).
Для маркетплейса есть отдельная норма. П. 4 ст. 10 того же закона обязывает владельца агрегатора дать продавцам техническую возможность поставить такую ссылку в описание товара. Если товар не подлежит обязательному подтверждению соответствия, продавец должен иметь возможность указать это в описании. Норма не распространяется на товары, бывшие в употреблении, и на продажу в торговом объекте, где покупатель может ознакомиться с этими сведениями. Если покупатели платят за товары продавцов на счёт владельца маркетплейса на Multi-Vendor, он считается владельцем агрегатора, и такое поле нужно в форме товара в кабинете продавца. Если деньги сразу уходят продавцам, статус спорный. Площадку из реестра посреднических платформ закон приравнивает к агрегатору при любой схеме оплаты. Статус вашей площадки уточните у юриста.
Раздел о требованиях закона приведён по редакциям на октябрь 2026 года и не является юридической консультацией; применимость к вашему ассортименту и площадке проверьте с юристом.
На практике это отдельное поле в карточке товара: ссылку вносят при заведении товара или импортом из учётной системы, и она выводится в описании. Вписывать её руками в текст описания у тысяч товаров — верный путь к пропускам. Отметка «подтверждение не требуется» в законе упомянута только для маркетплейсов: владелец площадки должен дать продавцу возможность её поставить. Обычному магазину она не обязательна. Какие товары вашего ассортимента подлежат обязательной сертификации или декларированию, сверьте с поставщиком, органом по сертификации или юристом.
Подписка на снижение цены, «Сообщить, когда появится», отзывы с фото и Вебвизор обрабатывают персональные данные. На сайте нужна политика обработки, а формы должны собирать отдельное согласие (ч. 1 ст. 9 закона № 152-ФЗ). Для публикации имени и фото в отзыве нужно согласие на распространение (ст. 10.1), для писем с акциями — согласие на рекламу (ст. 18 закона «О рекламе»).
Мобильная карточка товара: что меняется на телефоне
На телефоне оставьте те элементы, которые нужны выбранному товару, и проверьте порядок блоков на небольшом экране.
Название, цена и наличие находятся рядом с выбором варианта и кнопкой. Если закрепляете «В корзину» внизу экрана, проверьте, что она не закрывает контент и не мешает выбрать размер или количество.
Длинное описание и характеристики можно свернуть. Срок, стоимость доставки и наличие оставьте рядом с блоком покупки, чтобы их не приходилось искать среди вкладок.
Галерея листается свайпом, видео играет в карточке без перехода на другой сайт, вертикальные ролики остаются вертикальными.
Широкие таблицы с размерами или оптовыми ценами прокручиваются по горизонтали внутри своего блока, а страница целиком не съезжает вбок.
Выбор вариантов и комплекты собираются под ширину экрана. В одном проекте мы по макету переделали мобильную карточку комплекта оборудования: фото, название, количество, цена за штуку, скидка, цена за комплект и галочка «добавить в комплект».
Условный пример порядка блоков. Высота фото и состав карточки зависят от товара; важные сведения должны находиться быстро, но вся карточка не обязана помещаться в первый экран.
Одного удобного порядка блоков мало, если карточка долго загружается. В магазине автозапчастей мы закрыли от ботов тяжёлые скрипты и персональную выдачу, перевели картинки в WebP, поправили ленивую загрузку и добавили заглушки секций. По замерам 2 июня и 1 августа 2025 года оценка PageSpeed карточки на телефоне выросла с 26 до 65, на компьютере — с 65 до 93. Такие правки приходится повторять: каждый новый модуль и счётчик снова утяжеляет страницу. О мобильной версии сайта целиком мы писали в статье «Как сделать мобильную версию сайта правильно».
Что проверить для поиска: разбор HTML 170 карточек
В сентябре 2026 года мы собрали исходный HTML 170 карточек российских производителей и магазинов из списка возможных клиентов. Отбирали сайты для предложения доработок, поэтому эти доли нельзя переносить на весь рынок.
Скрипт получал ответ сервера без выполнения JavaScript и искал теги, разметку и текстовые признаки. Вручную из выборки исключили страницы, которые не были карточками. Каждый найденный пробел ещё нужно проверить в браузере и инструментах поисковой системы.
Что искал скрипт
Результат в исходном HTML
Следующая проверка
Товарная разметка
не найдена на 72 из 170, 42 %
проверить разметку после отрисовки страницы и ошибки в ней
Канонический адрес (canonical)
не найден на 72, 42 %
найти возможные дубли и проверить, какой адрес Google выбрал основным
Цена в рублях
не найдена на 45, 26 %
посмотреть цену в браузере и отрисованную страницу для робота
Признаки хлебных крошек
не найдены на 34, 20 %
проверить, виден ли путь в категорию и работает ли навигация
Meta description
не найден на 23, 14 %
оценить описание страницы и сниппеты по её основным запросам
Заголовок H1
15 страниц с несколькими H1, 2 без H1
проверить, какой заголовок видит покупатель и называет ли он товар
Отсутствие canonical не доказывает, что у карточки есть дубли: Google выбирает основной адрес по нескольким сигналам. Описание в выдаче он подбирает под запрос из текста страницы или meta description. Несколько H1 тоже требуют просмотра страницы; по одному числу тегов нельзя оценить понятность карточки.
Разметка Product помогает передать Google данные о товаре для расширенного представления в поиске, но не гарантирует его показ. На CS-Cart её можно добавить модулем «Разметка в формате JSON-LD»: предложение товара по правилам товарных листингов Google, вариации как ProductGroup, видео, вопросы покупателей. Title, description и H1 для тысяч товаров можно заполнять по шаблонам, проверяя результат на товарах из разных категорий. Устройство разметки и порядок проверки разобраны в статье о микроразметке в магазине на CS-Cart.
Как проверить свою карточку
Начните с одной карточки из самой продаваемой категории. Первую проверку можно пройти без подрядчика.
Откройте карточку на телефоне через мобильный интернет, без Wi-Fi.
Найдите цену, наличие, выбор варианта, кнопку и условия доставки. Отметьте, что скрыто за непонятной вкладкой или далеко от блока покупки.
Переключите цвет или размер: должны смениться фото, цена и наличие.
Выберите в расчёте доставки другой город и пункт выдачи.
Откройте исходный код страницы (Ctrl+U на компьютере) и найдите цену. Если её нет, проверьте отрисованную страницу через проверку URL в Search Console. Google выполняет JavaScript, но доступность конкретной цены роботу нужно подтвердить отдельно.
Проверьте адрес карточки в проверке расширенных результатов Google или в валидаторе микроразметки Яндекс Вебмастера. Если товарная разметка есть, сверьте цену и наличие с видимой карточкой и исправьте ошибки.
Посмотрите в Вебвизоре Метрики десяток записей сессий на карточке: где покупатели останавливаются, что открывают и откуда уходят.
Частые вопросы о карточке товара
Что такое карточка товара в интернет-магазине?
Это страница одного товара: название, фото, цена, наличие, варианты, описание, характеристики, отзывы и кнопка покупки. Покупатель попадает на неё из каталога, поиска по сайту, рекламы или поисковой выдачи и здесь решает, класть ли товар в корзину.
Чем карточка в своём магазине отличается от карточки на Ozon и Wildberries?
На маркетплейсе вид карточки задаёт площадка: продавец заполняет поля, фото и описание по её правилам. В своём магазине вы сами решаете, что показать: остатки по своим складам, свои условия доставки, оптовые цены для зарегистрированных клиентов, комплекты. За сведения о товаре отвечаете вы — и в своём магазине, и на маркетплейсе.
Какой цвет указать, если у платья верх одного цвета, а низ другого?
В характеристику «Цвет» поставьте основной цвет, по которому платье будут искать в фильтре, а сочетание напишите в названии варианта: «чёрный/белый». Если таких товаров много, заведите в фильтре значение «разноцветный», чтобы платья не выпадали из подборки по цвету.
Что добавить в раздел с размерной сеткой?
Добавьте инструкцию, как снять мерки, параметры модели на фото и размер вещи на ней. Опишите посадку: в размер, маломерит или большемерит. Эти три подсказки помогут выбрать размер до заказа.
Когда переделывать карточку рано
Если до карточек мало кто доходит, сначала разберитесь, почему магазин не находят: с этим работает SEO-аудит. Если Метрика засорена ботами, выводы о карточке по ней делать нельзя. В одном из наших аудитов боты давали 49 % визитов с отказами 90–99 %, и начинать пришлось с чистки аналитики. Если вы продаёте только на маркетплейсах, карточку задаёт площадка, и эта статья о своём магазине. Если штатная карточка темы проходит проверку и жалоб на неё нет, дополнительный модуль пока не нужен. Добавляйте его под подтверждённую задачу.
Когда карточка на вид полная, а покупатели из неё всё равно уходят, закажите UX-аудит. Мы пройдём путь покупателя на телефоне и компьютере, разберём записи сессий и карты кликов в Метрике и через 7 рабочих дней после получения доступов отдадим список правок с приоритетами, прототипами и сметой. Стоимость аудита фиксированная: 36 000 ₽ с НДС 5 %. Если правки начинаем в течение месяца, стоимость аудита засчитываем в них. Дизайнеры и разработчики CS-Cart у нас в штате: дизайн экранов и доработки в коде делаем по смете из отчёта.
Основная проверка норм, кейсов и модулей проведена 6 октября 2026 года. 19 октября уточнены методика проверки 170 страниц, рекомендации по поиску и штатная цена за единицу в CS-Cart; цена и условия UX-аудита повторно сверены со страницей услуги. 27 октября 2026 года правовые формулировки повторно сверены с первоисточниками.
Получите консультацию специалиста по вашему проекту
Содержание
Получите консультацию специалиста по вашему проекту
Как снизить зависимость от маркетплейсов:… Разбираемся, почему собственный интернет-магазин нужен не для ухода с маркетплейсов, а как второй канал продаж: для защиты маржи, повторных заказов…
Комиссии маркетплейсов превысили 40%: зачем бизнесу… Обобщили данные различных исследований по маркетплейсам, чтобы на их основе показать реальную картину рынка. Разбираем, какие преимущества даёт собственный онлайн-канал…
ИИ-продвижение интернет-магазина: как попасть в… Объясняем, как интернет-магазинам на CS-Cart попадать в ответы нейросетей (ChatGPT, Алиса). Разбираем, чем ИИ-продвижение отличается от классического SEO.
Посадочные страницы по низкочастотным запросам:… Статья о том, как превратить комбинации фильтров каталога в посадочные страницы под низкочастотные запросы, которые лучше ранжируются и попадают в…
Сайт использует cookie и Яндекс Метрику. Метрика работает, пока вы от неё не откажетесь — кнопкой «Отклонить необязательные» или в «Настройках cookie». Технические cookie нужны для работы сайта и всегда включены. Подробнее — в политике конфиденциальности.
Настройка файлов cookie
Здесь можно выбрать, какие cookie разрешить. Технические нужны для работы и защиты сайта, их отключить нельзя. Аналитические и рекламные работают, пока вы их не отключите. Выбор хранится год, потом сайт спросит снова. Изменить его можно в любой момент кнопкой «Настройки cookie» внизу страницы. Как мы используем cookie, описано в разделе о cookie политики конфиденциальности.
Пришлём руководство на вашу почту
Пришлём чек-лист на вашу почту
Чек-лист будет отправлен на указанную Вами электронную почту
Карточка товара интернет-магазина: что показать покупателю и как проверить мобильную версию
В карточке товара покупатель должен быстро найти название, цену, наличие и кнопку покупки. Условия доставки нужны рядом с этим блоком, до перехода в корзину. Остальной состав зависит от товара: одежде нужна таблица размеров, оборудованию — совместимость и комплектация. На телефоне проверьте порядок блоков и удобство выбора варианта, прежде чем добавлять новые элементы. С 1 сентября 2026 года действуют поправки 546-ФЗ к Закону о защите прав потребителей: если товар подлежит обязательной сертификации или декларированию, в его описании нужна ссылка на запись о сертификате или декларации в реестре.
Первую версию статьи мы опубликовали в 2021 году, а в октябре 2026-го дополнили примерами из проектов и автоматической проверкой исходного HTML 170 карточек российских сайтов. Проверка находит места для ручного разбора; по ней нельзя судить, что покупатель видит после загрузки страницы. Примеры решений взяты из карточек, которые мы 13 лет собираем на CS-Cart для клиентов.
Что покупатель должен увидеть на первом экране
Первый экран — всё, что видно до прокрутки. На компьютере рядом с фото обычно помещается блок покупки. На телефоне крупное фото может занять почти весь экран. Проверьте, как быстро покупатель добирается до цены, выбора варианта и кнопки; не пытайтесь уместить туда всю карточку мелким шрифтом.
Типовая ошибка — условия, спрятанные за кликом. В одном магазине, который мы дорабатывали в начале 2026 года, способы доставки на карточке открывались только по клику на слово «доставка». Покупатели не видели, что доставка в их город вообще есть. Мы перенесли блок доставки в блок цены: все способы видны сразу и пересчитываются, как только покупатель выбрал город.
Заодно разобрались, почему страница товара подвисала: доставка пересчитывалась лишний раз. Теперь расчёт запускается, только когда меняются корзина или адрес.
12 элементов карточки: что нужно вашей категории
Сначала проверьте возможности своей темы и версии CS-Cart. Дополнительный модуль нужен под конкретную задачу, которую они не решают. Этот перечень помогает выбрать состав карточки; таблица размеров, видео и комплекты нужны не каждому магазину.
1. Название товара
Название стоит в заголовке страницы (H1). В нём тип товара, бренд, модель и главный отличительный параметр: у смартфона это память и цвет, у перфоратора — энергия удара и тип патрона. По такому названию покупатель сразу понимает, что попал куда нужно, а поиск по сайту находит товар по любому из слов. Название в каталоге и в карточке совпадает, иначе человек засомневается, тот ли товар открыл.
В исходном HTML 15 карточек из 170 нашлось несколько H1, на двух тег не обнаружен. Это повод посмотреть структуру страницы, а не готовый диагноз для поиска. На одной карточке в H1 попала фраза «Наши менеджеры перезвонят Вам…». Проверьте, что видимый заголовок называет товар, а заголовок формы обратного звонка не конкурирует с ним по оформлению.
2. Фото и видео
В магазине товар можно повертеть в руках. На сайте эту работу берут на себя снимки с разных сторон, крупный план фактуры и фото в деле: одежда на человеке, мебель в комнате, инструмент в руке. Дайте открыть каждый снимок крупно.
Видеообзор и распаковка отвечают на вопросы, которые фото не закрывает: как товар раскладывается, звучит, сидит. Модуль «Видеогалерея товаров» ставит ролики YouTube, Shorts, Rutube, VK Видео и свои файлы прямо среди фотографий и на отдельную вкладку. Ролик добавляется ссылкой, превью и вертикальный формат модуль берёт с хостинга. Товары, которые хочется покрутить в руках, показывает круговой обзор 360°, собранный из обычных фотографий.
3. Цена и выгода
Цена стоит рядом с названием и кнопкой, крупно. При скидке видны обе цены и разница. Если товар сравнивают за килограмм, литр или метр, покажите и эту цену. В CS-Cart и Multi-Vendor начиная с 4.15.1 для этого есть штатный модуль «Цена за единицу»: в товаре задают единицу измерения и её количество в упаковке.
Единицы учёта магазина не всегда совпадают с привычками покупателя. Плитку выбирают по площади в квадратных метрах, хотя CS-Cart ведёт цену и остаток в штуках. Мы сделали переключатель цены «за штуку / за м²» и отдельный фильтр по цене за метр. В магазине чая каждая фасовка на 25, 50 и 100 г стала вариацией товара, и её цена считается от цены за грамм.
На оптовом портале карточке нужна таблица цен. У одного нашего клиента покупатель с доступом к оптовым ценам видит в карточке таблицу видов цен, от розницы и РРЦ до трёх оптовых уровней, а гость видит свои цены. Когда 1С снижает любую из четырёх цен, рядом появляется зачёркнутая старая.
Покупатель должен видеть цену текстом. Автоматическая проверка не обнаружила цену в рублях в исходном HTML 45 карточек из 170. Цена могла загружаться скриптом или отображаться в другом формате, поэтому эти страницы требуют ручной проверки. Если стоимость зависит от комплектации, объясните расчёт; нижнюю границу «от …» указывайте только для предложения, которое можно заказать за эту сумму. Если цены часто меняются, график истории цены показывает покупателю, что скидку не придумали накануне акции. Там же есть кнопка подписки на снижение цены для тех, кто пока не готов купить.
4. Наличие
До корзины покупатель должен знать, есть ли товар и когда он у него будет. Штатных «в наличии» и «нет в наличии» для этого мало. Статус «под заказ, 5–7 дней» помогает оценить ожидание, если магазин подтвердил этот срок у поставщика. Модуль «Свои статусы наличия товаров» ставит товарам и вариациям статусы «под заказ», «ожидается», «последний экземпляр», а в расширенном режиме меняет текст в зависимости от остатка.
Если складов несколько, покажите, где именно лежит товар. В магазине плитки над кнопкой «В корзину» стоит блок «Доступное количество в г. …» со списком складов и количеством на каждом. Для товара на складе поставщика указывайте «Под заказ» с подтверждённым сроком. Статус «В пути» подходит, когда товар уже отгружен. При нулевом собственном остатке карточку можно оставить на витрине с такими условиями. Производитель, который продаёт ещё и через партнёров, показывает в карточке, у кого из них товар есть сейчас, со ссылкой на сайт партнёра и подпиской «Сообщить, когда появится у партнёра».
5. Выбор вариантов
Цвет, размер и объём выбирают на странице товара, не возвращаясь в каталог. Выбранный вариант меняет фото, цену и наличие, иначе покупатель положит в корзину не то, что видел.
Показывать ли каждый цвет отдельной позицией в каталоге? Для одежды, обуви и техники мы советуем такой вариант: в каталоге видна вся палитра, и покупатель находит свой цвет до перехода в карточку. Размеры лучше оставить переключателем, иначе каталог заполнится одинаковыми картинками. В CS-Cart это решают настройки группы вариаций: по документации вариации могут занимать в каталоге одну позицию или по позиции на цвет, а размер при этом выбирается на странице товара.
Вариации, которые ищут отдельно, стоит вывести со своим адресом. Для маркетплейса загородного строительства мы сделали так, что выбранные вариации получают свой URL, title, description и описание и попадают в карту сайта.
Оптовику удобнее таблица. Модуль «Таблица вариантов для заказа» выводит все размеры или цвета с полями количества: набор кладётся в корзину одной кнопкой, оптовая скидка считается от общего количества.
6. Таблица размеров
Для одежды и обуви таблица размеров стоит рядом с выбором размера и открывается поверх страницы. PDF, который скачивается на телефон и теряется в загрузках, — лишний шаг перед покупкой. Таблица своя для каждого типа товара: бельё и пальто меряют по-разному. Модуль «Таблицы размеров» выводит таблицу вкладкой или ссылкой у выбора размера и привязывает её к категории или характеристике, чтобы не настраивать каждый товар.
7. Доставка, оплата и возврат
До перехода в корзину покупателю нужны срок и стоимость доставки. Модуль «Стоимость доставки в карточке товара» показывает на странице способы, сроки и цену доставки, с выбором пункта выдачи и иконками служб. Порог бесплатной доставки подталкивает добрать корзину: строку «Добавьте ещё на 800 ₽ — доставим бесплатно» с полосой прогресса выводит модуль уведомления о бесплатной доставке.
Рядом укажите способы оплаты и краткие условия возврата, включая способ вернуть товар без визита в магазин, а полные правила дайте по ссылке. Если есть рассрочка или оплата частями, напишите об этом в карточке: покупатель дорогого товара ищет такую строку ещё до корзины.
8. Кнопка «В корзину»
Основное действие выделено контрастом и подписано «В корзину» или «Купить». После нажатия покупатель видит, что товар добавлен, и может перейти к оформлению. Если рядом есть быстрая покупка, оформите её спокойнее, чтобы две кнопки не спорили за внимание: модуль «Покупка в один клик» ведёт сразу к оплате и оставляет уже собранную корзину нетронутой.
9. Описание и характеристики
Таблицу характеристик дополните описанием: для каких задач подходит товар и как им пользоваться. Состав, размеры, вес, комплектация, гарантия и срок службы стоят на странице, а не в файле для скачивания. В CS-Cart по характеристикам строятся фильтры каталога, поэтому их заполняют одинаково у всех товаров категории.
Оптовикам и сервисным инженерам нужен код, который легко скопировать. На оптовом портале мы вывели в карточку код номенклатуры из 1С с кнопкой копирования, и по этому коду ищет живой поиск.
Если товар подлежит обязательной сертификации или декларированию, с 1 сентября 2026 года в его описании нужна ссылка на запись о сертификате или декларации в реестре (ст. 26.1 Закона о защите прав потребителей в редакции 546-ФЗ).
10. Отзывы и рейтинг
Отзывы снимают страх, что товар не совпадёт с ожиданием, и читать их покупатель должен в карточке, без перехода на другие сайты. Доверия больше, когда у отзыва есть фото покупателя, отдельные плюсы и минусы и отметка, что товар купили именно здесь. Модуль «Расширенные отзывы» добавляет оценки по параметрам, фото и видео покупателей, метку «Подтверждённая покупка» и ответ магазина под каждым отзывом.
11. Вопросы и ответы
Ответ на вопрос в карточке смогут прочитать и следующие покупатели. Не придётся заново объяснять в чате, подходит ли крепление или входит ли кабель в комплект. Модуль «Вопросы и ответы о товаре» добавляет в карточку такую секцию: отвечают магазин и другие покупатели, ответ с высшей оценкой поднимается наверх. Общие вопросы о доставке, гарантии и уходе удобнее собрать во вкладку: модуль FAQ выводит её в карточке товара и в категориях. В исходном HTML признаки вопросов и ответов нашлись у 29 карточек из 170. Детектор учитывал и разметку, и текстовые совпадения, поэтому число не показывает, сколько страниц содержат отдельный блок с ответами о товаре.
12. Сопутствующие товары и комплекты
Предложите совместимые аксессуары и расходники: чехол к телефону, нужный кабель к технике, коврик к палатке. Для каждого проверьте совместимость с выбранным вариантом основного товара. Модуль «Дополнительные товары / Аксессуары» собирает комплект прямо в карточке: покупатель выбирает товар в каждом слоте, видит сумму и кладёт всё в корзину одной кнопкой, в заказе комплект идёт одной строкой. Если к товару продаётся услуга или опция вроде «С установкой», подойдёт «Товар как опция». Блок похожих товаров нужен тому, кому этот товар не подошёл: он удерживает покупателя на сайте.
Что карточка обязана сообщить покупателю по закону
При дистанционной продаже, в том числе через интернет-магазин, продавец до заключения договора сообщает покупателю основные потребительские свойства товара, адрес и полное фирменное наименование продавца, место изготовления, цену и условия приобретения, доставку, срок службы, срок годности и гарантийный срок, порядок оплаты и срок действия предложения. Это п. 2 ст. 26.1 Закона о защите прав потребителей. Полное наименование и ОГРН продавца (у ИП — ФИО и ОГРНИП), адрес организации, телефон или email и способы направить претензию обычно размещают в подвале и на странице контактов (пп. 22 и 24 Правил продажи, ПП РФ № 657). Свойства, цена, гарантия и сроки живут в карточке.
С 1 сентября 2026 года действуют поправки 546-ФЗ, срок вступления в силу установлен его ст. 2. Если товар подлежит обязательному подтверждению соответствия, продавец сообщает об этом ссылкой в описании товара. Ссылка ведёт на страницу с записью о сертификате или декларации в реестре сертификатов и деклараций о соответствии или в Едином реестре ЕАЭС (абз. 2 п. 2 ст. 26.1).
Для маркетплейса есть отдельная норма. П. 4 ст. 10 того же закона обязывает владельца агрегатора дать продавцам техническую возможность поставить такую ссылку в описание товара. Если товар не подлежит обязательному подтверждению соответствия, продавец должен иметь возможность указать это в описании. Норма не распространяется на товары, бывшие в употреблении, и на продажу в торговом объекте, где покупатель может ознакомиться с этими сведениями. Если покупатели платят за товары продавцов на счёт владельца маркетплейса на Multi-Vendor, он считается владельцем агрегатора, и такое поле нужно в форме товара в кабинете продавца. Если деньги сразу уходят продавцам, статус спорный. Площадку из реестра посреднических платформ закон приравнивает к агрегатору при любой схеме оплаты. Статус вашей площадки уточните у юриста.
Раздел о требованиях закона приведён по редакциям на октябрь 2026 года и не является юридической консультацией; применимость к вашему ассортименту и площадке проверьте с юристом.
На практике это отдельное поле в карточке товара: ссылку вносят при заведении товара или импортом из учётной системы, и она выводится в описании. Вписывать её руками в текст описания у тысяч товаров — верный путь к пропускам. Отметка «подтверждение не требуется» в законе упомянута только для маркетплейсов: владелец площадки должен дать продавцу возможность её поставить. Обычному магазину она не обязательна. Какие товары вашего ассортимента подлежат обязательной сертификации или декларированию, сверьте с поставщиком, органом по сертификации или юристом.
Подписка на снижение цены, «Сообщить, когда появится», отзывы с фото и Вебвизор обрабатывают персональные данные. На сайте нужна политика обработки, а формы должны собирать отдельное согласие (ч. 1 ст. 9 закона № 152-ФЗ). Для публикации имени и фото в отзыве нужно согласие на распространение (ст. 10.1), для писем с акциями — согласие на рекламу (ст. 18 закона «О рекламе»).
Мобильная карточка товара: что меняется на телефоне
На телефоне оставьте те элементы, которые нужны выбранному товару, и проверьте порядок блоков на небольшом экране.
Одного удобного порядка блоков мало, если карточка долго загружается. В магазине автозапчастей мы закрыли от ботов тяжёлые скрипты и персональную выдачу, перевели картинки в WebP, поправили ленивую загрузку и добавили заглушки секций. По замерам 2 июня и 1 августа 2025 года оценка PageSpeed карточки на телефоне выросла с 26 до 65, на компьютере — с 65 до 93. Такие правки приходится повторять: каждый новый модуль и счётчик снова утяжеляет страницу. О мобильной версии сайта целиком мы писали в статье «Как сделать мобильную версию сайта правильно».
Что проверить для поиска: разбор HTML 170 карточек
В сентябре 2026 года мы собрали исходный HTML 170 карточек российских производителей и магазинов из списка возможных клиентов. Отбирали сайты для предложения доработок, поэтому эти доли нельзя переносить на весь рынок.
Скрипт получал ответ сервера без выполнения JavaScript и искал теги, разметку и текстовые признаки. Вручную из выборки исключили страницы, которые не были карточками. Каждый найденный пробел ещё нужно проверить в браузере и инструментах поисковой системы.
Отсутствие
canonicalне доказывает, что у карточки есть дубли: Google выбирает основной адрес по нескольким сигналам. Описание в выдаче он подбирает под запрос из текста страницы или meta description. Несколько H1 тоже требуют просмотра страницы; по одному числу тегов нельзя оценить понятность карточки.Разметка Product помогает передать Google данные о товаре для расширенного представления в поиске, но не гарантирует его показ. На CS-Cart её можно добавить модулем «Разметка в формате JSON-LD»: предложение товара по правилам товарных листингов Google, вариации как ProductGroup, видео, вопросы покупателей. Title, description и H1 для тысяч товаров можно заполнять по шаблонам, проверяя результат на товарах из разных категорий. Устройство разметки и порядок проверки разобраны в статье о микроразметке в магазине на CS-Cart.
Как проверить свою карточку
Начните с одной карточки из самой продаваемой категории. Первую проверку можно пройти без подрядчика.
Частые вопросы о карточке товара
Что такое карточка товара в интернет-магазине?
Это страница одного товара: название, фото, цена, наличие, варианты, описание, характеристики, отзывы и кнопка покупки. Покупатель попадает на неё из каталога, поиска по сайту, рекламы или поисковой выдачи и здесь решает, класть ли товар в корзину.
Чем карточка в своём магазине отличается от карточки на Ozon и Wildberries?
На маркетплейсе вид карточки задаёт площадка: продавец заполняет поля, фото и описание по её правилам. В своём магазине вы сами решаете, что показать: остатки по своим складам, свои условия доставки, оптовые цены для зарегистрированных клиентов, комплекты. За сведения о товаре отвечаете вы — и в своём магазине, и на маркетплейсе.
Какой цвет указать, если у платья верх одного цвета, а низ другого?
В характеристику «Цвет» поставьте основной цвет, по которому платье будут искать в фильтре, а сочетание напишите в названии варианта: «чёрный/белый». Если таких товаров много, заведите в фильтре значение «разноцветный», чтобы платья не выпадали из подборки по цвету.
Что добавить в раздел с размерной сеткой?
Добавьте инструкцию, как снять мерки, параметры модели на фото и размер вещи на ней. Опишите посадку: в размер, маломерит или большемерит. Эти три подсказки помогут выбрать размер до заказа.
Когда переделывать карточку рано
Если до карточек мало кто доходит, сначала разберитесь, почему магазин не находят: с этим работает SEO-аудит. Если Метрика засорена ботами, выводы о карточке по ней делать нельзя. В одном из наших аудитов боты давали 49 % визитов с отказами 90–99 %, и начинать пришлось с чистки аналитики. Если вы продаёте только на маркетплейсах, карточку задаёт площадка, и эта статья о своём магазине. Если штатная карточка темы проходит проверку и жалоб на неё нет, дополнительный модуль пока не нужен. Добавляйте его под подтверждённую задачу.
Когда карточка на вид полная, а покупатели из неё всё равно уходят, закажите UX-аудит. Мы пройдём путь покупателя на телефоне и компьютере, разберём записи сессий и карты кликов в Метрике и через 7 рабочих дней после получения доступов отдадим список правок с приоритетами, прототипами и сметой. Стоимость аудита фиксированная: 36 000 ₽ с НДС 5 %. Если правки начинаем в течение месяца, стоимость аудита засчитываем в них. Дизайнеры и разработчики CS-Cart у нас в штате: дизайн экранов и доработки в коде делаем по смете из отчёта.
Основная проверка норм, кейсов и модулей проведена 6 октября 2026 года. 19 октября уточнены методика проверки 170 страниц, рекомендации по поиску и штатная цена за единицу в CS-Cart; цена и условия UX-аудита повторно сверены со страницей услуги. 27 октября 2026 года правовые формулировки повторно сверены с первоисточниками.
Получите консультацию специалиста по вашему проекту
Получите консультацию специалиста по вашему проекту
Другие статьи этой категории