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

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

Брошенная корзина — одна из частых проблем интернет-магазинов, средний показатель отказов достигает 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-тесты и следите за метриками, — они помогут определить, пошли ли улучшения на пользу.

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

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

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

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More

Россияне предпочитают .ru вместо .com, а Дональд Трамп проиграл доменный спор за mar-a-lago.com

Рассказываем самые интересные новости доменного мира. (далее…)
Read More

Прокрастинация: что такое, виды и как бороться

Прокрастинатор полон идей и амбиций, но ему часто не хватает самодисциплины и силы воли, чтобы начать действовать. Что заставляет нас...
Read More

Что нужно покупателям в 2024: 5 трендов электронной коммерции

Ежегодно рынок e-commerce в России растет на треть, а в 2024 году, по прогнозам экспертов, его оборот составит более 7,2...
Read More

Гайд: стильный интернет-магазин на WordPress с помощью двух инструментов

Онлайн-торговля растет на 40-50% в год, поэтому открыть свой интернет-магазин никогда не поздно. Для старта не понадобятся знания HTML и...
Read More