8 лучших примеров дизайна страницы корзины покупок в электронной торговле

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

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

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

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

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

Давайте посмотрим!

Хотите увидеть больше примеров? Загрузите наш бесплатный салфеточный файл и вдохновитесь 26 примерами корзины покупок.

Оглавление

8 примеров дизайна корзин для покупок в электронной коммерции

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

Как уменьшить количество брошенных корзин и увеличить продажи

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

Вот восемь вдохновляющих дизайнов корзин для покупок.

1. БиГ
2. Тилли
3. Олбердс
4. Навсегда 21
5. Найк
6. Сефора
7. Редкая красота
8. Лулулемон

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

Например, на странице отображаются аксессуары, которые хорошо сочетаются с выбранным товаром, что дает покупателям повод добавить больше товаров в корзину.

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

Щелчок по значку корзины перенаправляет клиентов на более стандартную страницу. И это напоминает им о рекомендациях связанных продуктов.

Это дает им еще один шанс добавить товары в свою корзину, если они забыли о них или передумали.

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

Их умный дизайн «Добавить в корзину» улучшает покупательский опыт их клиентов.

Когда покупатель кладет товар в корзину, с правой стороны расширяется «мини-корзина». Это позволяет пользователю отслеживать свои элементы с первого взгляда.

У него также есть кнопка «Оформить заказ», когда они будут готовы. Таким образом, клиенты могут перейти непосредственно к оформлению заказа без каких-либо усилий. Этот пример «Добавить в корзину» показывает отличный способ поощрения импульсивных покупок.

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

Дизайн боковой панели корзины покупок Allbird интегрируется с общей темой сайта. И он отображает все, что нужно знать клиенту.

Появляется сообщение: «Поздравляем! Вы получаете бесплатную стандартную доставку». И это отличный способ бороться с брошенной корзиной с самого начала. Они говорят покупателям, что стоимость доставки не изменится неожиданно (одна из главных причин, по которой потенциальные покупатели оставляют свои корзины покупок).

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

Функция «Добавить в корзину» Forever 21 прозрачна с их критериями бесплатной доставки. Тем не менее, они требуют, чтобы покупатели потратили определенную сумму, чтобы получить право на бесплатную доставку. Вы можете видеть, что эта корзина находится всего в 10,01 доллара США от права на бесплатную доставку.

У них также есть большое поле для кода купона, что упрощает добавление скидки.

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

Покупатели получают небольшое уведомление в правом верхнем углу экрана, когда нажимают кнопку «Добавить в корзину» на веб-сайте Nike.

В окне мини-корзины есть два варианта: просмотреть свою сумку или сразу перейти к оформлению заказа.

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

Nike также размещает такие сообщения, как «Осталось всего несколько штук, закажите сейчас», чтобы помочь покупателям завершить процесс оформления заказа. Привлечение внимания покупателя таким образом может привести к увеличению продаж, потому что никто не хочет терять отличную пару обуви. Это называется FOMO или стратегия Fear Of Missing Out.

Еще один приятный штрих на странице корзины покупок Nike — предполагаемая дата доставки. Это дает покупателям возможность представить себя в новой обуви к определенной дате. Такие детали имеют значение!

Система уведомлений корзины Sephora сочетает в себе множество лучших практик для функций дизайна страницы корзины.

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

Sephora выходит за рамки этих других веб-сайтов, предлагая бесплатные образцы (наряду с вознаграждениями и рекламными акциями) с простой ссылкой на странице уведомлений о корзине.

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

Rare Beauty — еще один косметический бренд, широко представленный в Интернете. Как и Sephora, они предлагают покупателям бесплатные товары в той же коробке, что и их заказ.

Они также показывают, сколько еще денег нужно добавить к заказу. Тогда покупатель узнает, когда он имеет право на бесплатную доставку.

Rare Beauty нетрадиционно использует большие крестики, чтобы покупатели могли легко удалять товары из своих корзин. Это упрощает редактирование их заказов.

Вы можете понять, почему их клиенты любят совершать покупки в Интернете — это быстрая и безболезненная оплата.

Первое, что вы заметите в корзине Lululemon, — это большое сообщение вверху: «У вас отличный вкус».

Такое сообщение заставляет пользователей щелкнуть значок корзины!

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

Кнопка оформления заказа Lululemon большая и яркая. Это привлекает внимание пользователей, и они рекомендуют дополнительные продукты, чтобы побудить клиентов «Продолжить покупки».

Когда вы создаете страницу корзины онлайн-покупок: подумайте о проблеме с разных сторон.

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

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

Вот краткое изложение основ дизайна страницы корзины электронной коммерции:

• Покажите пользователям общую стоимость корзины, сведения о доставке и поддерживаемые вами способы оплаты.
• Предложите больше продуктов, которые соответствуют тому, что клиент уже имеет в своей корзине.
• Пользователи веб-сайта должны иметь возможность увидеть, как персонализировать свою покупку (выбирая цвета, количество, размеры и т. д.) без особых усилий.
• Избавьтесь от путаницы, используя большие высококачественные изображения товаров для корзины.
• Четко определите, сколько будет стоить доставка или сколько клиент должен потратить, чтобы получить бесплатную доставку.
• Выделите, какие платежные шлюзы принимает ваш сайт.
• Отображайте символы, которые доказывают, что ваши платежные процессы безопасны и заслуживают доверия.
• Добавьте поле промо-кода, чтобы пообещать реальную ценность.

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

Даже с самым лучшим дизайном корзины для покупок нет гарантии, что покупатели завершат процесс оформления заказа.

Исследователи обнаружили, что в 2019 году средний показатель отказа от корзины составил ошеломляющие 77,13% .

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

Например, количество брошенных корзин AVON снизилось на 16,5%, когда они внедрили систему предотвращения брошенных корзин OptiMonk . Он определяет, когда посетители магазина могут бросить свои тележки, и отправляет им всплывающее окно, побуждающее покупателей завершить покупку.

Давайте начнем с лучших примеров всплывающих окон.

3 примера всплывающих окон с отказом от корзины

1. Продвигайте неотразимое предложение

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

Поскольку покупатели очень чувствительны к стоимости доставки своего заказа, это один из лучших способов уменьшить количество отказов от корзины.

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

2. Повышайте срочность с помощью ограниченных по времени предложений

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

Например, SwissWatchExpo — это магазин, в котором продаются бывшие в употреблении часы класса люкс. Они использовали всплывающие окна, чтобы дать понять, что часы будут зарезервированы для них только на 15 минут. Это чувство срочности привело к увеличению коэффициента конверсии на 25 % .

3. Рекомендуйте соответствующие продукты, чтобы вернуть их внимание

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

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