Оформляем корзину интернет-магазина правильно: инструкция и лайфхаки

Брошенная корзина — одна из частых проблем интернет-магазинов, средний показатель отказов достигает 70%. Любое препятствие на пути к покупке может быть барьером, из-за которого пользователь уйдет. Разбираемся, как оформить корзину, чтобы не отпугивать посетителей сайта и получать максимальную конверсию.

Pop-up или отдельная страница

Корзину интернет-магазина можно оформить отдельной страницей или в виде pop-up.

Отдельную страницу стоит создавать: 

• cупермаркетам с широким ассортиментом товаров. На отдельной странице товары можно разбить по категориям — так пользователю будет удобнее проверить заказ перед оплатой; 
• магазинам в премиум-сегменте. Такие покупки не предполагают спешки, покупателю нужно дать возможность прочитать максимум информации перед оформлением; 
• для реализации cross-sell, up-sell и down-sell. Все эти техники направлены на увеличение спроса, их удобнее внедрять, если корзина оформлена отдельной страницей. 

Cross-cell — с англ. «перекрестные продажи», когда продавец предлагает дополнения к основной покупке. Например, если клиент покупает сухой корм для котят, ему предлагают влажный или оригинальные мисочки как дополнение. 

Upsell — когда продавец предлагает более дорогой товар. Например, клиент выбирает iPhone 15 на 128 Гб, а в магазине предлагают доплатить 20 000 ₽ и приобрести телефон на 256 Гб. Техники «1+1=3» тоже относятся к upsell. 

Downsell — противопоставление upsell, то есть предложение более дешевого товара. Например, когда у покупателя нет возможности приобрести дизайнерский диван за 200 000 ₽, ему предлагают альтернативу в похожей цветовой гамме, но за 90 000 ₽. 

И у всплывающих окон, и у отдельных страниц есть свои преимущества и недостатки:

• pop-up сокращает количество шагов и позволяет просмотреть товары, не покидая страницу;
• отдельная страница увеличивает количество действий для покупки, но помогает упорядочить навигацию. 

Выбирать какой-то один вариант стоит, опираясь на общий дизайн сайта, целевую аудиторию и карту пути клиента. Если вы не знаете, как определиться, можно провести A/B-тестирование, которое покажет, что предпочитают ваши целевые пользователи. 

Обязательные элементы корзины

При проектировании корзины для интернет-магазина учитывайте эти обязательные элементы.

Значок корзины на видимом месте

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

Иконка корзины должна:

• быть хорошо различимой или узнаваемой,
• находиться на видном месте.

Информация о товаре

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

• размеров,
• цвета,
• материалов,
• модели (например, для техники),
• другой важной информации.

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

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

Понятные кнопки 

«Продолжить покупки», «Оформить заказ», «Оплатить», «Использовать промокод» — кнопки должны называться согласно действию, которое совершает пользователь. 

Это же касается кнопки «Удалить». У пользователя должна быть возможность отказаться от покупки какого-либо товара — не важно, по какой причине: передумал или не устроили условия покупки. Если потенциальный клиент начнет искать кнопку и не найдет ее, ничего, кроме раздражения, это не вызовет.

Информация о доставке и дополнительных расходах

Обязательно укажите в корзине все варианты доставки, промежуточную и общую стоимость вместе со стоимостью доставки (если она есть). Скрывать дополнительные расходы — дурной тон. Если доставка бесплатная от конкретной суммы — это также стоит написать.

Другие полезные фишки

Это необязательные элементы, но они помогут увеличить средний чек и удержать клиента.

Предложение купить сопутствующие товары 

Это те самые сross-sell, up-sell, down-sell, о которых говорили в начале статьи — они помогают увеличить средний чек и повышают вероятность повторной покупки. Предложить можно что угодно: чехлы, если клиент приобретает телефон; пробники туалетной воды, если это магазин косметики; подарочные упаковки и другие приятные мелочи.

Быстрая покупка без регистрации

Четверть потенциальных клиентов бросают корзины, потому что для покупки нужна была учетная запись, а еще 18% — из-за сложного оформления заказа. Задача продавцов — максимально упростить этот процесс, сделать его удобным и прозрачным. Разрешите пользователям совершать покупки без создания учетной записи — добавьте «покупки в 1 клик».

Напоминание о брошенной корзине

Кошка пробежала по клавиатуре или начальник попросил срочно подготовить отчет — причины того, что клиент бросил корзину, могут быть разными. Чтобы он не забыл о товарах, напомните завершить оформление заказа. Сделать это можно: 

• письмом по электронной почте;
• звонком по телефону или рассылкой в мессенджере.

Согласно исследованиям, пользователи, которые получили напоминание о брошенной корзине, в 2,4 раза чаще оформляют заказ.

Как создать корзину в WooCommerce

WooCommerce — самый популярный плагин электронной коммерции для WordPress. С его помощью можно быстро создать и настроить корзину без знаний программирования. Сделать это можно двумя способами — воспользоваться готовым шаблоном, например, на Рег.сайте или самостоятельно установить плагин в CMS.

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

Работа с шаблоном Рег.сайта

Это самый простой способ создать интернет-магазин с нуля. Корзина в шаблонах уже настроена — плагин не придется устанавливать и настраивать с нуля, страницы оформления заказа и оплаты тоже готовы.

Приобретая Рег.сайт, вы получаете:

• настроенный хостинг,
• бесплатный SSL-сертификат для безопасного соединения,
• адаптивный дизайн для любых устройств,
• множество модулей под разные задачи. 

В шаблонах Рег.сайта уже подключен WooCommerce и настроена корзина — остается лишь поменять текст и дизайн. Можно также изменить внешний вид страницы оформления заказа, добавить политику конфиденциальности и условия покупки.

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

Больше о том, как работать с шаблонами в Рег.сайте можно почитать в Базе знаний Рег.ру. 

Самостоятельная установка плагина

Этот способ сложнее и займет больше времени — настраивать корзину придется самостоятельно. 

● Войдите в админку WordPress, кликните правой кнопкой мышки на вкладку «Плагины», затем — «Добавить новый». С помощью поиска найдите WooCommerce и нажмите «Установить».

● Создайте новую страницу — на панели управления слева откройте вкладку «Страницы» и нажмите «Добавить новую»:

● Через «+» откройте инструмент вставки блоков. Нам нужен блок «Корзина» (скорее всего, вы найдете его в самом конце среди блоков, предложенных WooCommerce):

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

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

• [woocommerce_cart] — для вставки корзины,
• [woocommerce_checkout] — для вставки оформления заказа.

⌘⌘⌘

Хорошо продуманная корзина — это важный шаг на пути к успешному интернет-магазину.  Однако, если планируете обновлять дизайн корзины, менять кнопки и внедрять новые инструменты, обязательно делайте A/B-тесты и следите за метриками, — они помогут определить, пошли ли улучшения на пользу.