Что разместить рядом с кнопкой «Купить» в карточке товара
Как собрать блок покупки: выбранный вариант, цена, наличие, доставка и понятное действие. Учебный пример, разные состояния товара и проверка на телефоне.
Рядом с кнопкой покупки покажите выбранный товар и вариант, актуальную цену, возможность заказать и существенные условия получения. Человек должен понимать, что именно попадёт в корзину и какой следующий шаг произойдёт после нажатия. Остальную информацию располагайте по её влиянию на решение, чтобы кнопка не терялась среди одинаково заметных действий.
Это разбор локального блока покупки, а не всей товарной страницы. Полный состав фото, описания и характеристик есть в статье об оформлении карточки товара.
Сначала проверьте, можно ли купить выбранный вариант
До изменения дизайна пройдите действующую покупку и сохраните исходные показатели: просмотры карточки, добавления, оформленные и завершённые заказы. Если кнопка не работает или в корзину попадает другой размер, сначала исправьте ошибку. Косметическое улучшение рядом с неработающим действием не решает задачу.
Вариант должен быть выбран явно. У товара с размерами, цветами или комплектациями рядом с кнопкой нужны доступные значения и понятное сообщение, если выбор ещё не сделан. Цена и наличие должны относиться именно к нему. Фото всех цветов подряд не заменяют выбор конкретного артикула.
Не показывайте общую доступность модели как наличие каждого размера. Если размер закончился, предложите доступные варианты или понятное следующее действие. Поведение цены, фото и корзины при переключении разбирает инструкция о товарах с вариантами.
Какая информация нужна в самом блоке
| Вопрос покупателя | Что показать рядом | Что проверить |
|---|---|---|
| Что я выбрал? | Название, выбранный вариант, количество | Эти значения попадут в корзину |
| Сколько стоит товар? | Текущую цену и единицу продажи | Цена относится к выбранному варианту |
| Можно заказать сейчас? | Фактическое наличие или срок подготовки | Обещание соответствует учёту и процессу |
| Как получить? | Краткую оценку доставки или способ её уточнить | Город и существенные условия понятны |
| Что произойдёт после нажатия? | Понятную подпись действия | Кнопка ведёт к описанному шагу |
Если кнопка только добавляет товар, подпись «В корзину» помогает объяснить действие. Если она сразу открывает оформление, это другой переход. Не создавайте рядом несколько равнозначных ярких кнопок «Купить», «Заказать», «Быстрый заказ» без ясного различия.
При скидке укажите фактическую цену и условия её получения. Цена «от» без пояснения выбранного варианта оставляет неопределённость. Если товар продаётся упаковкой, длиной или комплектом, покупателю нужна единица, к которой относится сумма, и понятное изменение итога при количестве.
Доставка, оплата и возврат без длинного справочника
Стоимость и срок доставки зависят от города, товара и способа получения. Если вы можете рассчитать их до корзины, покажите результат с городом и условиями. Если данных недостаточно, предложите выбрать город или объясните, когда появится расчёт. Не выдавайте самую дешёвую доставку в одном районе за условия для всех посетителей.
Краткая строка рядом с кнопкой отвечает на существенный вопрос, а ссылка раскрывает подробности. Например, оценка доставки и ссылка на страницу условий получения и оплаты полезнее длинного перечня логотипов перевозчиков без сроков и цены. Оговорки о дополнительной сборке, подъёме или подготовке заказа располагайте там, где они влияют на решение.
Информацию об оплате и возврате выбирайте по сомнениям аудитории. Для дорогого товара полезен заметный переход к условиям, а для сложной совместимости — способ получить уточнение по модели. Сроки и обещания берите из проверенных условий магазина; нельзя придумывать их ради доверия или сокращать так, что исчезает существенное исключение.
Учебный пример блока покупки
Допустим, магазин продаёт настольную лампу «Линия». Все данные примера вымышленные. Графитовый вариант доступен за 2 300 ₽, кремовый временно отсутствует. Для указанного города по условиям примера доставка одной лампы стоит 350 ₽ и занимает 2–4 дня после передачи перевозчику. Срок подготовки перед передачей — один рабочий день.
Неудачный блок: «Лампа от 2 300 ₽. В наличии. Быстро привезём. Купить». Он не сообщает вариант, не отделяет подготовку от перевозки и не объясняет стоимость получения. Если человек выбрал кремовую лампу, общая фраза «В наличии» уже вводит его в заблуждение.
Учебная заготовка для доступного графитового варианта:
Лампа «Линия»
Цвет: графитовый. Количество: 1.
Цена товара: 2 300 ₽.
В наличии для заказа выбранного варианта.
[В корзину]
Ваш город: [выбранный город]. Доставка одной лампы — 350 ₽.
Подготовка: один рабочий день; перевозка после передачи — 2–4 дня.
Товар с этой доставкой: 2 650 ₽.
Изменить город · Условия доставки и оплаты · Условия возврата
Замените все значения данными своего магазина. Это пример содержания, а не универсальное обещание сроков или фиксированная схема экрана. Итог 2 650 ₽ равен 2 300 + 350 и относится только к указанной конфигурации, городу и способу получения. При добавлении второго товара или смене адреса его надо пересчитать.
Теперь выберите кремовый вариант. Блок должен сообщить отсутствие именно его и изменить доступное действие: например, предложить уведомление, если такой процесс действительно организован. Нельзя оставить активную покупку с графитовой ценой и отправить в корзину случайный цвет. Для товара на заказ вместо складского наличия требуется подтверждённый срок изготовления или понятный запрос расчёта.
Что меняется у разных товаров
Для одежды в этом месте часто нужен выбор размера и доступ к понятной таблице измерений. Для электроники — точная версия и существенная совместимость. Для мебели — габариты, разборный вид поставки и условия получения, если они меняют возможность занести покупку. Для расходников — количество в упаковке и единица цены.
Добавляйте сведения потому, что они меняют выбор, а не потому, что у конкурента больше значков. Сложный вопрос, который нельзя честно уместить в одну строку, кратко обозначьте и раскройте рядом по понятному переходу. Если он регулярно возникает в обращениях, пригодится FAQ карточки товара.
Как проверить блок на телефоне и после запуска
На узком экране выберите вариант, измените количество, добавьте товар и сравните корзину с карточкой. Поменяйте город, если он участвует в расчёте. Повторите путь для отсутствующего варианта и товара без выбранного размера. При закреплённой кнопке убедитесь, что она не закрывает цену, сообщение об ошибке и элементы выбора.
Затем пройдите блок клавиатурой: виден фокус, доступны варианты и переходы, сообщение о необходимом выборе можно понять. Попросите человека оформить конкретную конфигурацию без ваших пояснений. Ошибка в товаре или условиях получения — повод исправить содержание и поведение до проверки рекламного эффекта.
После публикации сопоставьте добавления с завершёнными покупками и обращениями по неверным ожиданиям. Если добавлений стало больше, а заказов меньше, проверьте, не отложили ли вы существенную цену доставки до следующего шага. Без сопоставимого эксперимента изменение показателей не доказывает, что его вызвал именно новый блок.