Карточка товара, которая продаёт: UX, доверие и конверсия

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

В этой статье разберём по кирпичикам, из чего складывается карточка товара с высокой конверсией на 1С-Битрикс: анатомия и приоритеты элементов, первый экран, галерея, цена и наличие, выбор торговых предложений (SKU), элементы доверия, скорость и LCP, мобильная версия со «липкой» кнопкой, микроразметка Product и B2B-нюансы. Материал основан на нашей практике оптимизации конверсии (CRO) и разработки интернет-магазинов на 1С-Битрикс — без выдуманных «процентов роста», зато с рабочими принципами.

Почему карточка товара — главная точка конверсии

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

Есть и вторая причина, по которой карточка так важна. Это самая частая точка входа из поиска. Люди ищут не «интернет-магазин обуви», а «кроссовки такой-то модели 42 размер купить» — и попадают сразу на карточку, минуя главную и категорию. Для такого посетителя карточка одновременно и витрина, и точка входа, и место принятия решения. Она должна за секунды объяснить, куда человек попал, что здесь продаётся и почему купить стоит именно тут.

Наконец, карточка — это концентрат доверия. Перед оплатой человек хочет убедиться, что товар настоящий, продавец надёжный, а если что-то не так — можно вернуть. Все сигналы доверия (фото, отзывы, гарантии, условия) собираются именно здесь. Поэтому работать над карточкой — это работать сразу над тремя вещами: пониманием, удобством и доверием. Провал в любой из них роняет конверсию.

Анатомия карточки: зоны и приоритеты

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

Зона решения (верх карточки)

Самая важная зона — верхний блок, где рядом стоят галерея слева и «блок покупки» справа: заголовок, цена, наличие, выбор вариации и кнопка «В корзину». Здесь покупатель принимает первичное решение. Всё, что нужно для клика «купить», должно быть в этой зоне, желательно на первом экране.

Зона доверия (середина)

Ниже идут блоки, которые снимают сомнения: характеристики, описание, гарантии, условия доставки и оплаты, отзывы и рейтинг, вопросы и ответы. Эта зона отвечает на возражения «а подойдёт ли», «а не обманут ли», «а как получу».

Зона допродажи (низ)

В самом низу — сопутствующие и похожие товары, аксессуары, «с этим покупают». Здесь магазин мягко предлагает увеличить чек или даёт альтернативу, если конкретная позиция не подошла.

Понимание зон помогает не спорить о вкусах, а рассуждать предметно: любой новый элемент карточки сначала проверяют вопросом «в какую зону он попадает и не мешает ли главному действию». Кнопка «В корзину» — центр гравитации всей страницы, и её видимость нельзя приносить в жертву ни баннеру, ни блоку отзывов, ни красивой анимации.

Первый экран: что покупатель видит без скролла

Первый экран — то, что видно сразу, без прокрутки, — решает судьбу визита. За первые секунды посетитель бессознательно отвечает себе на четыре вопроса, и карточка обязана дать ответы, не заставляя скроллить.

1. Тот ли это товар? Крупное главное фото и понятный заголовок должны совпасть с тем, что человек искал. Ошибся страницей — сразу видно.
2. Сколько стоит? Цена — крупно и заметно, рядом старая цена и экономия, если есть скидка. Цену не прячут ниже сгиба.
3. Есть ли в наличии? Явный статус «В наличии» или срок поставки. Неопределённость («уточняйте») убивает импульс.
4. Как купить? Заметная кнопка «В корзину» и, где уместно, «Купить в 1 клик». Если товар с вариациями — понятный выбор размера или цвета рядом.

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

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

Галерея, зум и реальные фото товара

В интернет-магазине покупатель не может потрогать товар — фотографии заменяют ему тактильный контакт. Поэтому галерея не «оформление», а прямой инструмент конверсии. Слабые фото рождают сомнение, а сомнение уводит на другой сайт, где снимки лучше.

Что должно быть в галерее

• Несколько ракурсов. Товар спереди, сзади, сбоку, важные детали крупным планом. Один снимок «в лоб» почти всегда недостаточен.
• Реальные, а не только студийные фото. Снимки товара «как в жизни», в интерьере или на человеке, снимают недоверие сильнее вылизанного рендера.
• Зум. Возможность увеличить фрагмент — рассмотреть фактуру, шов, разъём, состав. Особенно важно для одежды, техники, украшений.
• Видео и 3D, где уместно. Короткий ролик или вращение на 360° закрывают вопросы, которые не решить статичной картинкой.
• Миниатюры и свайп. На десктопе — вертикальная лента превью, на мобильном — свайп с точками-индикаторами.

Техническая тонкость: первое изображение галереи — это, как правило, LCP-элемент страницы, самый крупный видимый объект. Его нельзя загружать «лениво» и нельзя отдавать в лишнем весе. Остальные фото галереи, наоборот, разумно подгружать по мере надобности, чтобы не тормозить первый экран. Об этом подробнее в разделе про скорость.

Заголовок, артикул и хлебные крошки

Заголовок карточки — это и SEO-элемент, и ориентир для покупателя. Он должен точно называть товар так, как его ищут: модель, ключевая характеристика, назначение. Слишком короткий заголовок («Диван») не отвечает на запрос, слишком длинный и перегруженный — трудно читать. Золотая середина — понятное название модели плюс отличительный признак.

Рядом с заголовком полезны служебные, но важные элементы:

• Артикул. Помогает и покупателю (сверить, назвать менеджеру), и внутренним процессам. Для B2B артикул часто главный способ идентификации — по нему ищут и заказывают.
• Бренд. Логотип или ссылка на страницу бренда усиливают доверие и открывают навигацию «все товары этого бренда».
• Рейтинг и число отзывов. Компактный блок со звёздами у заголовка сразу даёт социальное доказательство и якорит внимание.
• Хлебные крошки. Показывают, где покупатель находится, и дают быстрый путь назад в категорию. Это ещё и SEO-навигация, и элемент разметки BreadcrumbList.

Отдельно про поиск по артикулу: в B2B и технических нишах покупатель нередко приходит с точным кодом детали и хочет попасть на нужную карточку в один шаг. Как это устроить в 1С-Битрикс, мы разбираем в материале про умный фильтр каталога и связанных статьях рубрики каталога — карточка и поиск работают в одной связке.

Цена, старая цена и видимая экономия

Цена — самый считываемый элемент карточки после фото. Правила её подачи простые, но их регулярно нарушают.

• Крупно и на видном месте. Цена — второй по значимости элемент первого экрана. Её не прячут в подвал блока и не делают мелким серым шрифтом.
• Старая цена и экономия. Если есть скидка, зачёркнутая старая цена рядом с новой и явная выгода («−22%» или «−700 ₽») усиливают мотив купить. Но выгода должна быть честной, а не нарисованной «старой ценой из воздуха».
• Цена за единицу измерения. Для весовых и метражных товаров полезно показывать цену за килограмм, метр, литр — так покупатель сравнивает предложения корректно.
• Итог без сюрпризов. Если товар продаётся упаковкой или комплектом, покажите итоговую сумму заранее, а не «удивите» ею в корзине.

В 1С-Битрикс цена приходит из торгового каталога и может зависеть от типа цены и группы покупателя. Это открывает возможности: розничная и оптовая цена, цена по акции, цена для авторизованных. Но это же добавляет ответственности — на карточке должна показываться та цена, которая реально применится в корзине. Рассинхрон «в карточке одно, в корзине другое» — прямой удар по доверию и частая причина брошенных корзин.

Наличие, остатки и сроки

Статус наличия — тихий, но мощный триггер. Он влияет и на решение купить прямо сейчас, и на доверие. Разберём типовые состояния и как их показывать.

Ключевой принцип — честность. Показывать «осталось 2 шт.» на товаре, которого на складе сотни, — манипуляция, которую опытный покупатель распознаёт, и она бьёт по доверию сильнее, чем помогает. Гораздо надёжнее, чтобы остаток на карточке соответствовал реальному складскому учёту, а он в 1С-Битрикс приходит из обмена с 1С. Если товара нет, худшее решение — просто «серая» неактивная кнопка без объяснения: покупатель не понимает, что делать, и уходит. Дайте ему выход: подписку на поступление, предзаказ или переход к аналогу.

Торговые предложения (SKU): выбор вариаций

Большинство товаров существуют в вариациях: одежда — в размерах и цветах, техника — в объёмах памяти, мебель — в обивках. В 1С-Битрикс это реализуется через торговые предложения (SKU) — отдельный инфоблок, привязанный к товару. От того, как организован выбор вариации, напрямую зависит, дойдёт ли покупатель до корзины.

Как сделать выбор SKU понятным

• Варианты видны сразу. Размеры и цвета показывают наглядно (плитки, свотчи цвета), а не прячут в выпадающий список, который легко пропустить.
• Недоступные комбинации помечены. Если размера L в синем нет, он должен быть визуально «выключен» или скрыт, а не создавать тупик после клика.
• Всё обновляется без перезагрузки. При смене варианта мгновенно меняются цена, фото, артикул, наличие. Перезагрузка страницы на каждый клик — это трение и потеря контекста.
• Понятно, что выбрано. Активный вариант выделен, а если покупатель жмёт «В корзину», не выбрав обязательную вариацию, — мягкая подсказка, а не молчаливый отказ.
• Свотчи цвета — картинкой. Цвет лучше показывать образцом, а не текстом: «маренго» и «индиго» без картинки ничего не говорят покупателю.

Технически связка «товар + предложения» в 1С-Битрикс отдаётся штатным компонентом catalog.element, а переключение вариантов — его встроенным JS без перезагрузки. Важно правильно настроить свойства предложений и то, какие из них выводятся селектором, а какие — просто в характеристиках. Ошибка здесь превращает удобный выбор в лотерею «нажми и посмотри, что будет».

Кнопка «В корзину» и заказ в один клик

Кнопка «В корзину» — цель всей карточки. Всё остальное существует ради того, чтобы покупатель на неё нажал. Поэтому у неё особый статус.

• Контраст и размер. Главная кнопка — самый заметный интерактивный элемент первого экрана. Её цвет контрастен фону и не сливается с второстепенными кнопками.
• Одно главное действие. Не окружайте «В корзину» десятком равнозначных кнопок. «В избранное», «Сравнить», «В 1 клик» — визуально тише, чем основное действие.
• Понятная обратная связь. После клика покупатель должен увидеть подтверждение: товар добавлен, счётчик корзины обновился, появилась мини-корзина или шторка. Молчание рождает повторные клики и сомнение.
• Состояние недоступности объяснено. Если нельзя купить (не выбран размер, нет в наличии), кнопка не просто «серая» — рядом понятная причина и следующий шаг.

Быстрый заказ и «Купить в 1 клик»

Отдельная кнопка быстрого заказа укорачивает путь для тех, кто не хочет проходить полный чекаут. Она просит минимум — обычно телефон — и передаёт заказ менеджеру, который уточнит детали. Это хорошо ловит импульсные покупки и посетителей с мобильных, которым лень заполнять длинную форму. Важно не путать роли: «В корзину» ведёт в полноценное оформление, «В 1 клик» — короткий путь для нетерпеливых. Их держат рядом, но визуально разделяют по приоритету.

После добавления товара встаёт вопрос, что показать покупателю: перебросить в корзину или оставить на карточке с подтверждением. Мы подробно сравнили сценарии в статье про корзину-шторку против отдельной страницы корзины — карточка и корзина проектируются в связке, потому что именно на стыке «добавил → оформил» теряется много заказов.

Доставка и оплата прямо в карточке

«Как я это получу и как заплачу» — вопрос, который возникает ещё до корзины. Если ответа на карточке нет, часть покупателей уходит его искать и не возвращается. Поэтому базовую информацию о доставке и оплате выносят прямо в блок покупки, коротко и без воды.

• Срок и стоимость доставки. Хотя бы ориентир: «Доставим по городу завтра, от 300 ₽». В идеале — расчёт по городу покупателя прямо в карточке.
• Пункты самовывоза. «Забрать сегодня в 5 пунктах» — сильный аргумент для тех, кому нужно срочно.
• Способы оплаты. Иконки карт, СБП, наличных, рассрочки. Для B2B — оплата по счёту и работа с НДС.
• Гарантии и возврат. Короткая строка «Возврат 14 дней, гарантия производителя» снимает страх ошибки.

Эти блоки не должны превращаться в простыню правил — их задача снять тревогу, а не пересказать оферту. Подробные условия выносят на отдельные страницы, а в карточке оставляют суть и ссылку «подробнее». Технически в 1С-Битрикс расчёт доставки в карточке подтягивают из настроенных служб доставки, а способы оплаты — из платёжных систем, которые всё равно нужны для чекаута. Так информация на карточке и в оформлении заказа гарантированно совпадает.

Характеристики и описание

Характеристики и описание — это зона доверия и одновременно SEO-контент. Здесь покупатель проверяет, подходит ли товар под его задачу, а поисковик — насколько страница полезна.

Характеристики

Технические параметры лучше давать структурированной таблицей «свойство — значение», а не сплошным текстом. Важные и часто сравниваемые характеристики — вверху, редкие — ниже или под «показать все». Для магазина на 1С-Битрикс характеристики — это свойства инфоблока, и их же используют умный фильтр и сравнение. Единый источник данных означает, что фильтр, карточка и сравнение показывают согласованные значения, а не расходятся.

Описание

Хорошее описание не пересказывает характеристики, а объясняет пользу: кому подойдёт, какие задачи решает, чем отличается от аналогов. Оно написано для человека, а не «для роботов» с переспамом ключевых слов. Уникальное, содержательное описание помогает и покупателю принять решение, и SEO — карточки с шаблонным или пустым описанием проигрывают в выдаче.

Отзывы, рейтинг и вопрос-ответ

Отзывы — самый сильный элемент доверия на карточке. Перед покупкой человек хочет услышать других покупателей: не про рекламу, а про реальный опыт. Магазин, у которого отзывов нет вовсе, воспринимается настороженно, особенно на дорогом товаре.

• Агрегированный рейтинг у заголовка. Звёзды и число отзывов рядом с названием сразу дают социальное доказательство и якорят внимание.
• Содержательные тексты, а не только оценки. «5 звёзд» без текста слабее, чем короткий отзыв с деталями и фото товара «в жизни».
• Честность важнее глянца. Наличие не только пятёрок и вежливые ответы магазина на критику повышают доверие сильнее, чем стена из идеальных оценок.
• Ответы магазина. Реакция продавца на отзыв — сигнал, что за товаром стоит живая компания, а не безликая витрина.
• Вопрос-ответ. Блок «Вопросы о товаре» закрывает возражения ещё до покупки и накапливает полезный уникальный контент для SEO.

Рейтинг важно не только показать, но и разметить: свойство AggregateRating в микроразметке позволяет звёздам появиться в поисковом сниппете, что заметно повышает кликабельность. Но размечать можно только реальные отзывы, которые видны на странице, — рисовать рейтинг без отзывов запрещено правилами поисковиков и грозит санкциями.

Элементы доверия против конверсии

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

Принцип простой: доверие снимает сомнение, но не должно отодвигать действие. Практические правила баланса:

• Кнопка покупки — всегда выше блоков доверия. Сначала «что, почём, как купить», потом аргументы «почему у нас».
• Доверие — дозированно. Три-четыре сильных сигнала работают лучше, чем десять слабых. Иконки «гарантия», «возврат», «оплата при получении» ценнее, чем стена бейджей.
• Ближе к решению — короче. В блоке покупки — одна-две строки о доставке и гарантии. Развёрнутые отзывы и условия — ниже, где покупатель уже вовлечён.
• Никакого шума ради шума. Всплывающие «кто-то только что купил», навязчивые таймеры и поддельная срочность чаще раздражают, чем убеждают, и подрывают доверие.

Скорость и LCP главного изображения

Быстрая карточка продаёт лучше медленной — это уже не гипотеза, а часть ранжирования (Core Web Vitals) и прямого поведения покупателей. Медленная загрузка бьёт по конверсии дважды: человек ждёт и раздражается, а поисковик снижает оценку страницы.

Главный подозреваемый на карточке — большое изображение товара. Это почти всегда самый крупный видимый элемент, то есть кандидат в LCP (Largest Contentful Paint — отрисовка крупнейшего контента). Что с ним делать:

• Современный формат и размер. Отдавайте фото в WebP или AVIF и в размере под контейнер, а не оригинал на 4000 пикселей, ужатый стилями.
• Не «ленивое» главное фото. Атрибут loading="lazy" уместен для галереи и блоков ниже, но не для LCP-изображения — иначе вы сами откладываете отрисовку главного элемента.
• width и height заданы. Явные размеры резервируют место и убирают скачки вёрстки (CLS), когда фото «допрыгивает» на место после загрузки.
• Preload критичного ресурса. Предзагрузка главного изображения помогает браузеру начать грузить его раньше.
• Композитный кэш. На композитном сайте статическая часть карточки отдаётся мгновенно, а динамика (цена, наличие, корзина) догружается — воспринимаемая скорость растёт.

Отдельно про JS: карточка обрастает скриптами галереи, зума, выбора вариантов, отзывов. Если грузить всё сразу и на каждой странице, страдает интерактивность (INP). Тяжёлые виджеты подключают по мере необходимости, а не «про запас». Тема скорости шире одной карточки — её мы разбираем в рубрике «Разработка и архитектура», и карточку стоит проектировать с оглядкой на общую производительность витрины.

Мобильная карточка и sticky-кнопка

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

Что меняется на мобильном:

• Экран короткий. Первый экран вмещает меньше, поэтому порядок блоков критичен: фото, заголовок, цена, наличие, выбор вариации, кнопка — и ничего лишнего сверху.
• Sticky-кнопка «В корзину». «Липкая» кнопка внизу экрана всегда под рукой при любой прокрутке. Покупатель читает характеристики и отзывы, а действие остаётся доступным одним касанием.
• Крупные зоны нажатия. Кнопки и переключатели вариантов должны попадать под уверенное нажатие большим пальцем, а не под ноготь.
• Галерея свайпом. Листание фото пальцем с индикаторами удобнее, чем мелкие стрелки.
• Характеристики в аккордеонах. Длинные блоки сворачивают, чтобы не растягивать страницу на километр.

Sticky-кнопка — едва ли не самый заметный по эффекту элемент мобильной карточки. Без неё покупатель, добравшийся до отзывов внизу, вынужден скроллить обратно к блоку покупки — и часть людей на этом теряется. С ней действие всегда рядом. Главное — не перегрузить липкую панель: в ней достаточно цены и кнопки, а иногда и выбора количества, но не весь блок покупки целиком.

Микроразметка Product, Offer и AggregateRating

Микроразметка — это структурированные данные по стандарту Schema.org, которые сообщают поисковику суть карточки в машиночитаемом виде. Для товара используют тип Product, внутри которого — Offer (цена, валюта, наличие) и, при наличии отзывов, AggregateRating (средний рейтинг и число оценок). Благодаря этому в поисковой выдаче у карточки может появиться расширенный сниппет: цена, статус «в наличии», звёзды рейтинга. Это не поднимает позиции напрямую, но повышает кликабельность — а значит, и трафик.

В 1С-Битрикс базовую разметку Product отдают штатные шаблоны компонента catalog.element, но её нужно проверить и дополнить: убедиться, что цена и наличие берутся из реальных данных, что валюта корректна, а рейтинг размечается только при наличии видимых отзывов. Частая ошибка — оставить в разметке устаревшую или несоответствующую видимой странице цену: поисковик считает это несоответствием и может проигнорировать разметку или понизить доверие к сайту. Проверяют разметку валидатором структурированных данных и инструментами вебмастера.

Кросс-сейл и апсейл штатными компонентами

Карточка — удобное место, чтобы аккуратно поднять средний чек. Два основных приёма: кросс-сейл (сопутствующие товары, аксессуары — «с этим покупают») и апсейл (предложить версию дороже или лучше). Оба реализуются в 1С-Битрикс штатными компонентами, без самописных костылей.

• Сопутствующие товары. Блок «С этим товаром покупают» — аксессуары, расходники, дополнения. Реализуется через связанные товары и вывод компонентом catalog.element/catalog.section по свойству-связке.
• Похожие товары. Альтернативы на случай, если конкретная позиция не подошла, — удерживают покупателя внутри магазина. Часто выводят компонентом catalog.top по разделу или характеристикам.
• Товары со скидкой / хиты. Компонент catalog.top умеет отбирать топ по продажам, новинки или товары со скидкой — хороший блок для допродажи.
• Комплекты и наборы. «Купить вместе» с суммарной ценой и лёгкой выгодой мотивирует взять сразу набор.

Главное правило допродажи — не мешать основному действию. Блоки кросс-сейла живут ниже кнопки покупки, а не над ней, и подаются как помощь («вам может понадобиться»), а не как навязчивая реклама. Релевантность важнее количества: две точные рекомендации работают лучше, чем лента из двадцати случайных товаров, которая только замедляет страницу. Если хотите глубже разобраться, как штатные компоненты выводят подборки, начните с рубрики «Конверсия и UX» — там мы разбираем и корзину, и допродажи в связке.

B2B-нюансы: цена по группе, кратность, склады

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

Разберём главное. Цена по группе: в 1С-Битрикс несколько ценовых типов (розница, опт, дилер), и карточка показывает ту, что положена группе авторизованного покупателя. Пока клиент не вошёл, ему можно показывать розницу или «цену по запросу». Кратность: если товар отгружается коробками по 12 штук, карточка должна задавать шаг количества, чтобы нельзя было заказать 7 штук и получить путаницу на складе. Наличие по складам: оптовику важно, откуда и когда отгрузят, поэтому остаток показывают в разрезе складов, а данные тянут из обмена с 1С.

Тему оптовых цен и групп мы отдельно разбираем в рубрике SEO и продвижения и в материалах про каталог — B2B-карточка это точка, где витрина смыкается с учётной системой, и проектировать её нужно вместе со специалистами по 1С. Если планируется полноценный оптовый портал, это уже задача уровня разработки интернет-магазина на 1С-Битрикс, а не косметики шаблона.

Реализация в 1С-Битрикс: catalog.element

Технически детальная карточка товара в 1С-Битрикс строится на компоненте bitrix:catalog.element. Он получает элемент инфоблока каталога, его свойства, цены из торгового каталога, торговые предложения (SKU) и отдаёт всё это в шаблон. Понимание, из чего он собран, помогает оценивать трудозатраты и не ломать штатную логику ради красоты.

• Инфоблок каталога и свойства. Источник данных карточки: название, описание, характеристики (свойства инфоблока), картинки. Те же свойства использует умный фильтр и сравнение — единый источник даёт согласованность.
• Торговый каталог. Модуль, который добавляет к элементам цены, валюты, единицы измерения, остатки и торговые предложения. Без него это просто «контентный» элемент без цены и наличия.
• Торговые предложения (SKU). Отдельный инфоблок вариаций, привязанный к товару. Компонент собирает их и отдаёт селектор размеров/цветов с переключением без перезагрузки.
• Шаблон компонента. Вёрстка карточки: расположение галереи, блока покупки, характеристик, отзывов. Именно шаблон — место, где карточку доводят до продающего вида, не трогая логику ядра.
• Микроразметка. Штатный шаблон отдаёт базовый Product; его дополняют актуальными полями цены, наличия и рейтинга.

Практический вывод: продающая карточка — это в основном работа над шаблоном компонента и правильной настройкой свойств и торгового каталога, а не переписывание ядра. Менять сам компонент почти никогда не нужно — его переопределяют шаблоном и настройками. Такой подход снижает риск сломать корзину и оформление заказа и упрощает обновления платформы. Если же нужна глубокая переработка витрины и обмена с учётной системой, это уже полноценная разработка магазина, где карточка проектируется вместе с каталогом, корзиной и 1С.

Частые ошибки

Проблемы карточек кочуют из проекта в проект. Вот те, что встречаются чаще всего, — и которых легко избежать.

• Цена и кнопка ниже сгиба. До главного приходится скроллить, особенно на мобильном. Первый экран забит баннерами и меню.
• Мало фото или только рендеры. Один студийный снимок «в лоб» не заменяет реальных фото с разных ракурсов и зума.
• «Мёртвые» комбинации SKU. Покупатель выбирает размер, которого нет, и упирается в тупик после клика вместо понятной пометки заранее.
• Перезагрузка при смене варианта. Каждый клик по цвету перезагружает страницу, теряя контекст и время.
• Рассинхрон цены и наличия. В карточке одна цена или «в наличии», в корзине — другая. Прямой удар по доверию.
• Кнопка «В корзину» теряется. Она визуально не выделена, вокруг пять равнозначных кнопок, после клика нет подтверждения.
• Поддельная срочность. «Осталось 2 шт.» на товаре, которого сотни, и всплывашки «кто-то купил» подрывают доверие.
• Тяжёлое главное фото и куча скриптов. LCP-изображение грузится лениво и в оригинальном весе, JS-виджеты подключены на каждой странице.
• Нет sticky-кнопки на мобильном. Дочитав до отзывов, покупатель вынужден скроллить обратно к блоку покупки.
• Пустое или шаблонное описание. Карточка не отвечает на «кому подойдёт» и проигрывает в SEO.
• Разметка не соответствует странице. В Product устаревшая цена или нарисованный рейтинг без видимых отзывов.
• Игнор B2B-правил. Нет кратности, оптовой цены и остатков по складам — оптовый покупатель не понимает, как заказывать.

Чек-лист элементов карточки

Сведём всё в практический список, по которому удобно принимать готовность карточки перед запуском или после доработки.

1. Первый экран отвечает на 4 вопроса. Без скролла видно: что за товар, цена (и старая цена), наличие, как купить.
2. Галерея полноценная. Несколько ракурсов, реальные фото, зум; главное изображение — не «ленивое», в WebP/AVIF и нужном размере.
3. Заголовок и артикул на месте. Понятное название, артикул, бренд, хлебные крошки, рейтинг у заголовка.
4. Цена честная и заметная. Крупно, со старой ценой и выгодой; цена в карточке совпадает с ценой в корзине.
5. Наличие явное. Статус и срок; для отсутствующих — подписка на поступление, предзаказ или аналог, а не «серая» кнопка.
6. Выбор SKU удобен. Варианты видны, недоступные помечены, смена варианта обновляет цену/фото/наличие без перезагрузки.
7. Кнопка «В корзину» доминирует. Контрастная, одна главная, с подтверждением после клика; при необходимости — «В 1 клик».
8. Доставка и оплата видны. Срок, стоимость, самовывоз, способы оплаты, гарантия и возврат — коротко в блоке покупки.
9. Характеристики и описание содержательны. Таблица свойств, уникальное описание «для человека», комплектация.
10. Отзывы и рейтинг работают. Реальные отзывы с фото, ответы магазина, вопрос-ответ; рейтинг размечен корректно.
11. Скорость под контролем. LCP-фото оптимизировано, width/height заданы, лишний JS не грузится, композит настроен.
12. Мобильная версия продумана. Порядок блоков, sticky-кнопка, крупные зоны нажатия, галерея свайпом — проверено на реальном телефоне.
13. Микроразметка проверена. Product/Offer/AggregateRating валидны и соответствуют видимой странице.
14. Допродажа не мешает. Кросс-сейл и похожие — ниже кнопки, релевантные, не тормозят страницу.
15. B2B-правила учтены. Цена по группе, кратность, наличие по складам, повтор заказа, запрос счёта — где это нужно.

Вывод

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

В 1С-Битрикс инструменты для такой карточки есть штатно: компонент catalog.element, торговые предложения, свойства инфоблока, ценовые типы для B2B, базовая микроразметка. Задача — грамотно собрать их в шаблоне, оптимизировать скорость главного изображения, продумать мобильную sticky-кнопку и держать данные согласованными от карточки до корзины. Сделайте это — и карточка перестанет терять почти купивших покупателей, а начнёт стабильно превращать интерес в заказы.