Как описать несколько вариантов товара на одной странице

Покупатель выбрал модель, но не понимает, какая цена относится к его размеру и есть ли нужный цвет. Такой разрыв возникает, когда варианты товара объединены технически, но не объяснены на экране. Несколько вариантов товара на одной странице можно показать удобно, если каждый выбор обновляет цену, наличие, изображение и заказ. Если у ваших карточек разные артикулы смешаны в одном описании, начните с бесплатной консультации A3 Studio.

Одна страница подходит, когда товар сохраняет назначение и основные свойства, а различаются понятные параметры: размер, цвет, объём упаковки или простая комплектация. Если варианты имеют разные функции, разные аудитории и большой объём самостоятельного описания, им могут понадобиться отдельные карточки. Решение зависит от способа выбора клиента и структуры данных, а не от удобства выгрузки из учётной системы.

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

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

После выбора обновляйте не только цену, но и подпись у кнопки, информацию о доставке и изображение. Покупатель должен видеть, что именно попадёт в заказ. В корзине и подтверждении повторите выбранные параметры и артикул. Ошибка на этом этапе превращается в возвраты и ручные уточнения.

На телефоне элементы выбора должны быть достаточно крупными и не скрывать информацию под несколькими вложенными меню. Таблица размеров или пояснение комплектации должна открываться рядом с выбором. Не заставляйте посетителя возвращаться к началу карточки после каждого изменения параметра.

Общее описание рассказывает о модели, её назначении, материале, совместимости и правилах использования. Отличия вариантов покажите рядом с выбором: размеры, содержание набора, длина кабеля, масса, требования к доставке. Не дублируйте одно описание для всех SKU в десятках почти одинаковых карточек, если покупатель воспринимает их как одну модель.

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

Пример расчёта (условные цифры): базовая модель стоит 12 000 рублей, версия с дополнительным модулем 15 000 рублей, доставка первой 500 рублей, второй 900 рублей из-за габарита. После выбора расширенной версии страница должна показать итоговые 15 900 рублей при заданном адресе, а не прежние 12 500. Это иллюстрация логики интерфейса, не цена реального товара.

В A3 Studio карточку проектируют вместе с товарными данными, корзиной и аналитикой. Ошибка в связке вариантов не исправляется красивой кнопкой, если учётная система отдаёт неверный остаток.

У вариантов может быть один общий URL или отдельные адреса. Выбор зависит от того, ищут ли конкретный вариант отдельно и есть ли у него самостоятельное содержание. По документации Google для интернет-магазинов, варианты могут организовываться разными способами; при любом варианте нужно согласовать канонические адреса и доступность данных для робота. Не создавайте множество пустых страниц только из-за каждой комбинации цвета и размера.

Если выбранный вариант меняет адрес, ссылка должна открывать именно выбранную комбинацию. Это важно, когда покупатель отправляет товар коллеге или возвращается из письма. Если адрес общий, выбранные параметры всё равно должны сохраняться в корзине и заказе. Проверьте прямой переход, обновление страницы и возврат кнопкой браузера.

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

Пройдите путь заказа для самого дешёвого, самого дорогого и отсутствующего варианта. Откройте карточку по прямой ссылке на телефоне, переключите параметры, добавьте товар в корзину, вернитесь на страницу. Затем сравните артикул, цену и наличие на каждом шаге. Вопрос к вам: сколько обращений менеджеру сегодня возникает потому, что на сайте неясно, какая комплектация выбрана?

Лайфхак: составьте матрицу всех сочетаний вариантов до разработки. Она выявит невозможные комбинации и правила цены раньше, чем появятся ошибки в интерфейсе.

Варианты товара связаны с каталогом, фильтрами, корзиной, товарными фидами и учётом остатков. В A3 Studio эти элементы проектируют вместе. Стоимость обсуждаем после разбора задачи.

Главная проверка карточки: покупатель может однозначно назвать вариант, цену и срок получения до нажатия на заказ. Если хотя бы один пункт меняется позже без объяснения, страницу нужно доработать. Хотите разобрать карточки товаров? Напишите, на каком этапе ваш сайт: A3 Studio.