Поиск по сайту Поиск

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

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

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

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

Пример корзины в виде формы 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-тестирование, которое покажет, что предпочитают ваши целевые пользователи. 

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

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

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

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

Пример значка корзины в нижнем углу
Пример значка корзины в нижнем правом углу в интернет-магазине автозапчастей IvartAuto

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

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

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

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

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

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

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

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

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

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

Пример оформления кнопок в корзине
Все кнопки в интернет-магазине EvitaStore в одной цветовой гамме и хорошо различимы, текст на них отражает действие

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

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

Оформляем корзину интернет-магазина правильно: инструкция и лайфхаки
В магазине Woollandstore корзина — это длинный pop-up. Доступны несколько вариантов доставки — перед оформлением можно выбрать подходящий и посмотреть его стоимость

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

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

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

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

Оформляем корзину интернет-магазина правильно: инструкция и лайфхаки
Магазин Randewoo предлагает при покупке наиболее дешевые позиции — маски, небольшие уходовые средства

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

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

Оформляем корзину интернет-магазина правильно: инструкция и лайфхаки
Рядом с кнопкой «Добавить в корзину» на сайте ЦУМа есть кнопка «Быстрая покупка»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⌘⌘⌘

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

Сильная презентация для инвесторов: от содержания до выступления

Презентация поможет структурировать данные и представить идею потенциальным инвесторам. Как сделать качественный документ – разбираемся вместе с основателем REC’s GROUP...
Read More

Дёшево и эффективно: как малому бизнесу продвигать свой сайт

Как выделиться среди конкурентов и получить внимание потенциальных клиентов. Бюджетные методы продвижения сайта – в этом обзоре.  
Read More

Как перевести бизнес в онлайн: 7 шагов

Пошаговая инструкция по переводу существующего бизнеса в онлайн: от создания сайта до начала продаж и запуска рекламы.
Read More

Кризис как точка роста для бизнеса

Когда бизнес развивается слабо, на помощь приходит… кризис. Рассказываем, как не испугаться перемен и открыть офис в другой стране, чем отличается построение бизнеса в Москве и Алматы.
Read More

Миллион на подтяжках для собак

Как придумать и монетизировать идею для бизнеса Нет смысла терять время и усложнять, когда бизнес-идеи витают в воздухе. Как понять...
Read More

Нейросети в помощь бизнесу: на что способен искусственный интеллект

Развитие нейросетей стало для россиян главным научным событием 2023 года. Бизнес активно внедряет искусственный интеллект, чтобы создавать контент, лучше понимать...
Read More

13 лайфхаков, которые погубят ваш бизнес

Разбираем «серые» способы работы и ошибки, которые точно развалят собственный бизнес.
Read More

Как привлечь инвестиции в мини-девелоперский проект с нуля

Предприниматели из Тюмени смогли стать девелоперами по загородной недвижимости без начального капитала и кредитов. Основатель компании «Финская улочка» Юлиу Пантя рассказывает,...
Read More

Не потерять ни клиента: топ-5 CRM-систем для предпринимателей

По мере роста бизнеса обрабатывать запросы клиентов вручную становится все сложнее. Информация о заказах часто теряется, а клиенты по несколько...
Read More

На чём нельзя экономить на старте бизнеса

Купили дешёвые материалы, а потом потеряли половину дохода из-за брака. Сэкономили на зарплате работников, а в итоге сорвали сроки и...
Read More