Содержание

Создание корзины на сайте с позиции юзабилити

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

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

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

Основные элементы корзины

Для начала определим, что же должна содержать страница (или страницы) корзины.

Заголовок. Как бы это банально ни звучало, но обязательно укажите название страницы, чтобы сориентировать пользователя.

Понятный заголовок на странице корзины:

Не сразу ясно, что это страница корзины:

Таблица с товарами. Лучше оформлять список товаров виде таблицы, так как такой вариант легче воспринимается.

В таблице необходимо добавить:

  • Изображение товара.
  • Название товара со ссылкой на соответствующую страницу.
  • Выбранные характеристики товара (например, цвет, размер, вкус и т.д.).
  • Стоимость единицы товара, и если товар акционный, рядом необходимо указать размер скидки.
  • Количество товара с возможностью изменения.
  • Общая сумма (если пользователь выбрал несколько единиц товара).
  • Возможность удалить товар по одному. Можно еще добавить возможность очистить корзину в один клик, но это не обязательно.

Пример корзины с заполненной таблицей:

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

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

Пример формы:

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

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

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

В форме нужно запросить следующую информацию:

  • Личные данные: ФИО, телефон, email.
  • Способ доставки.
  • Способ оплаты.
  • Адрес клиента (если он нужен для выбранного способа доставки).
  • Дополнительные услуги (например, подарочная упаковка товара или sms-оповещения о доставке).
  • Разрешение на обработку персональных данных.

Пример формы заказа:

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

В этом примере пользователю ненавязчиво предлагают оформить личный кабинет позже:

Подробнее о том, какими должны быть формы на сайте, можно узнать в нашей предыдущей статье.

Частые ошибки

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

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

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

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

Заметное всплывающее окно после добавления товара в корзину:

Изменение названия не сразу заметно, как и сама кнопка:

Нельзя сделать заказ без регистрации. Всегда должна быть возможность сделать «быстрый заказ», а зарегистрировать пользователя можно позже.

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

Пример отображения статусов в корзине:

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

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

Например, ввод адреса можно заменить одним полем с картой:

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

Пример сообщения после отправки данных формы заказа:

Дополнительные советы по корзине

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

Автоматическое обновление цены. Не нужно заставлять пользователя дополнительно нажимать кнопки «Обновить» после изменения количества товаров.

Добавление товара в избранное. Если у вас есть такой раздел, то стоит напомнить о нем на странице корзины. На случай, если пользователь пока думает над покупкой.

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

Пример изменения размера и цвета выбранной блузки:

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

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

Пример размещения информации об акции:

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

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

Если нашли на своем сайте ошибки в оформлении корзины и не знаете, как их исправить – оставьте заявку тут (сначала оценим сложность работ и только потом выставим счет).

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

Настройка страницы корзины в Wix Stores | Центр Поддержки

Wix Stores позволяет настроить страницу, на которой отображаются товары, которые ваши клиенты добавили в корзину.

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

Содержание:

  • Настройка параметров страницы корзины
  • Дизайн страницы корзины
  • Редактировать текст на странице корзины
  • Настроить страницу корзины на мобильном устройстве

Настройка параметров страницы корзины

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

Чтобы настроить параметры:

  1. Перейдите на страницу корзины.

В редакторе Wix

  1. Нажмите Страницы в левой панели редактора.
  2. Нажмите Страницы магазина.
  3. Нажмите на страницу корзины.

В Editor X

  1. Нажмите значок Страницы в верхней панели Editor X.
  2. Прокрутите вниз и выберите страницу корзины.

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

Как это сделать?

  1. Нажмите Предпросмотр в правом верхнем углу редактора.
  2. Перейдите на страницу магазина.
  3. Выберите товар, добавьте его в корзину и нажмите, чтобы посмотреть корзину.
  4. Нажмите Назад в редактор в правом верхнем углу, чтобы вернуться в режим редактора.

3. Нажмите на корзину в редакторе.

4. Нажмите Настройка.

5. Перейдите во вкладку Настройка.

6. Установите соответствующие флажки в соответствии с информацией, которую вы хотите отобразить:
• Стоимость доставки: показывает ссылку на варианты доставки, соответствующие местоположению каждого клиента.

• Сумму налога: отображает расчетную сумму налога для местоположения клиента.
Примечание: примерные налоги не отображаются, если вы включаете налог в цену товара. 

• Ссылка на промокод: позволяет клиентам использовать коды купонов.
Примечание: если этот параметр выбран, ссылка на промокод также отображается на странице оформления заказа.

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

•Показать ссылку: активируйте переключатель, чтобы отобразить ссылку Продолжить покупки на странице корзины.
Если включено, нажмите на значок ссылки , чтобы выбрать, куда ведет ссылка.

Дизайн страницы корзины

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

Чтобы создать страницу корзины:

  1. Перейдите на страницу корзины.

В редакторе Wix

  1. Нажмите Страницы в левой панели редактора.
  2. Перейдите во вкладку Страницы магазина.

3. Выберите страницу Корзина (Cart Page).

В Editor X

  1. Нажмите значок Страницы в верхней панели Editor X.
  2. Прокрутите вниз и выберите страницу корзины.

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

Как это сделать?

  1. Нажмите Предпросмотр в правом верхнем углу редактора.
  2. Перейдите на страницу магазина.
  3. Выберите товар, добавьте его в корзину и нажмите, чтобы просмотреть корзину.
  4. Нажмите Назад в редактор в правом верхнем углу, чтобы вернуться в режим редактора.

3. Нажмите на корзину в редакторе.

4. Нажмите Настройка.

5. Перейдите во вкладку Дизайн.

6. Настройте параметры дизайна для следующих областей:

• Фон и границы: измените цвет фона и разделителей страницы.

• Шрифт и цвет текста: измените цвет и шрифт заголовка, текста и ссылок страницы.

• Кнопки: измените цвет, стиль и внешний вид кнопок на странице корзины.

• Способы оплаты: создайте кнопки, представляющие доступные способы оплаты.

Редактирование текста на странице корзины

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

Чтобы изменить текст страницы корзины:

  1. Перейдите на страницу корзины.

В редакторе Wix

  1. Нажмите Страницы в левой панели редактора.
  2. Нажмите Страницы магазина.

3. Выберите корзину.

В Editor X

  1. Нажмите значок Страницы в верхней панели Editor X.
  2. Прокрутите вниз и выберите страницу корзины.

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

Как это сделать?

  1. Нажмите Предпросмотр в правом верхнем углу редактора.
  2. Перейдите на страницу магазина.
  3. Выберите товар, добавьте его в корзину и нажмите, чтобы просмотреть корзину.
  4. Нажмите Назад в редактор в правом верхнем углу, чтобы вернуться в режим редактора.

3. Нажмите на корзину в редакторе.

4. Нажмите Настройка.

5. Перейдите во вкладку Текст.

6. Отредактируйте текст, который отображается на странице корзины (например, кнопка «Оформить заказ», текст инструкции, предупреждения, заголовки и т. д.)

Настройка страницы корзины на мобильном сайте

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

Чтобы настроить корзину на мобильном устройстве:

  1. Перейдите на страницу корзины вашего магазина.
    1. Нажмите Страницы в левой панели редактора.
    2. Нажмите Страницы магазина.
    3. Выберите страницу корзины.
  2. Нажмите значок Переключиться на мобильную версию в верхней части редактора.

3. Нажмите на страницу корзины в мобильном редакторе.

4. Нажмите Настройка.

5. Выберите место размещения кнопки оформления заказа.

Добавление корзины покупок на любой веб-сайт за считанные минуты

Товары

Snipcart позволяет продавать физические товары по всему миру. Функции доставки, инвентаризации и скидок помогут вам управлять заказами.

Узнать больше

Подписки

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

Узнать больше

Цифровые товары

Snipcart позволяет продавать цифровые товары. Быстро начать продавать цифровой контент в любом виде.

Узнать больше

Добавьте платформу корзины на свой любимый веб-сайт

Snipcart беззастенчиво полигамна, когда дело доходит до стека технологий. Jamstack, в паре, мы не возражаем.

Узнать больше

Подключайтесь к своим любимым инструментам

Snipcart предлагает API и веб-перехватчики для настройки плавного обмена данными между внешними инструментами.

Узнать больше

Экономьте время и деньги

Интеграция нашего решения для электронной коммерции похожа на малыша Йоду: коротко и ясно.

Узнать больше

Увеличьте продажи

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

Узнать больше

Чувствуйте себя в безопасности

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

Узнать больше

Оформить заказ быстрее

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

Узнать больше


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

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

Колби Фейок
Старший инженер по опыту разработчиков в Cloudinary

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

— Очень рекомендую.

Айо Адесина
Ведущий разработчик ресторана AsoRock

Snipcart позволяет невероятно легко вести торговлю где угодно. Я могу принести свои продукты, нажать кнопку «Купить» и получить полностью функционирующую корзину и оформить заказ за считанные минуты. Интеграция налогов и доставки с веб-хуками дает мне максимальную гибкость для продаж по всему миру.

Джейми Бартон
Сторонник разработчиков GraphCMS и эксперт по GraphQL

Мы продвигаем Snipcart уже более 3 лет и не собираемся возвращаться. Это гибкий и удобный для разработчиков, но простой в использовании для наших клиентов. Команда тоже очень отзывчивая!

Николя Брассар-Феррон
Директор по развитию и партнер Deux Huit Huit

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

Анна Браун
Внештатный разработчик и владелец, Media Girl Inc.

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

Пьер-Люк Коссет
Front-End разработчик и дизайнер, фрилансер

Гибкая интеграция с электронной коммерцией — Snipcart

Интеграция с электронной коммерцией

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

Создавайте настоящую электронную коммерцию на любой CMS

WordPress, Sanity, Strapi, Craft CMS… на самом деле все идет! Выберите CMS, которая лучше всего соответствует вашим потребностям. Освободитесь от закрытых экосистем и жестких шаблонов: электронная коммерция не должна диктовать внешний вид вашего сайта. Разрабатывайте с помощью инструментов, которые вы знаете и которыми владеете. Работайте быстрее и быстро интегрируйте Snipcart, когда закончите.

Сообщество и интеграции

Превратите сайты или веб-приложения в магазины

Хотите перейти к транзакциям с существующим сайтом или веб-приложением? Не нужно отказываться от текущей настройки! Отметьте несколько простых атрибутов продукта в любом HTML-элементе, и вы получите полностью транзакционную платформу. Меньше трений на стороне клиента; более быстрый процесс разработки.

Начиная

Интеграция электронной коммерции с любыми внешними системами или инструментами

Используя наш RESTful API, JavaScript API и веб-хуки, вы можете усилить интеграцию с платформой электронной коммерции: подключиться к системам управления запасами, решениям прямой доставки, платформам электронного маркетинга, POS-решениям, CRM и многому другому. Используйте данные Snipcart в своих любимых инструментах и ​​создавайте эффективные многоканальные покупки!

API и вебхуки

Разрабатывайте статические или динамические интернет-магазины

Необходимо запустить полноценную платформу электронной коммерции, поддерживаемую динамической базой данных? Ладно у нас. CMS не нужна? Думаете, генераторы статических сайтов тоже крутые? Добавьте корзину Snipcart на основе HTML/JS поверх любого статического сайта, и вы получите готовую к работе мощную интеграцию с электронной коммерцией.

Статический пример

Избегайте будущих затрат и проблем на миграцию

Отделите маркетинговый веб-сайт от электронной коммерции, и вам не придется привязываться к одной платформе. Измените CMS сайта в любой момент в будущем. Snipcart действует как расширение CMS, поэтому электронная коммерция будет беспрепятственно следовать во время миграции.


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

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

Колби Фейок
Старший инженер по опыту разработчиков в Cloudinary

Snipcart позволяет невероятно легко вести торговлю где угодно. Я могу принести свои продукты, нажать кнопку «Купить» и получить полностью функционирующую корзину и оформить заказ за считанные минуты. Интеграция налогов и доставки с веб-хуками дает мне максимальную гибкость для продаж по всему миру.

Джейми Бартон
Представитель разработчиков в GraphCMS и эксперт по GraphQL

Snipcart — отличный продукт. — За очень короткое время он стал ключевым компонентом нашего бизнеса. Документация четкая и точная.

No related posts.