hardclient scroll to top
hardclient telegram
Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

РАБОТА С КОРЗИНОЙ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
138
ГАЙДЛАЙНОВ
Вы часто встречаете интернет-магазины, в которых нет корзины? Наверное, нет – корзина есть практически у всех, и через нее проходит практически весь трафик. Как сделать работу с корзиной максимально удобной для клиента? Разбираем 138 гайдлайнов в этой статье.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.

1. КНОПКА КОРЗИНЫ

Хорошо заметна

Кнопка покупки должна хорошо выделяться на фоне всей страницы и привлекать к себе внимание клиента.
hardclient

Видна в рамках первого экрана

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

Фиксация на странице товара

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

Привычно расположена

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

Текст кнопки

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

Текст кнопки не дублируется

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

Содержит иконку

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

В хорошем качестве

Иконка в кнопке добавления в корзину должна быть загружена в хорошем качестве, не должна размываться и пикселить. Или «клиент и так купит, зачем напрягаться»?
hardclient

Размер достаточен для нажатия

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

Не вызывает вопросов

Ни кнопка, ни подписи рядом с ней не должны вызывать вопросов. Вот анти-пример: что такое «по 1 шт»? Почему именно «по 1 шт»? Зачем в принципе нужна эта подпись?
hardclient

Реакция на наведение

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

Анимация нажатия

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

Кнопка работает корректно

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

Видоизменяется при добавлении

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

Без чрезмерной анимации

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

Без перехода на страницу товара

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

В корзину при повторном клике

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

Без удаления при повторном клике

Такая механика встречается очень редко и может стать неожиданностью для клиента («хотел перейти в корзину – в итоге товар удалил»).

Пояснение к переходу

Либо в самой кнопке, либо в контекстной подсказке поясняйте не просто что товар в корзине, но и куда будет осуществлен переход при повторном клике.
hardclient

Без авторизации

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

Быстрое удаление из корзины

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

Специфика весовых продуктов

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

Отсутствующие товары

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

Предпочтения на уровне товара

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

Купить (?) в 1 клик

Кнопка покупки в 1 клик позволяет сразу же перейти к оформлению. Но с ней стоит быть осторожными, т.к. она может побудить клиента завершить покупки слишком рано.
hardclient

2. ИЗМЕНЕНИЕ ЧИСЛА ЕДИНИЦ

Функция доступна

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

Расположение добавления единиц

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

Текстовый ввод числа единиц

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

Highlight числа при активации поля

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

Изменение числа товаров на ноль

Не ставьте клиенту палки в колеса: не делайте кнопку уменьшения товаров неактивной, если число – 1. Если ему нужно удалить товар, он его и так удалит.

Не больше, чем на складе

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

Информирование о наличии товара

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

Реакция на повторное добавление

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

Реакция моментальна

Добавление и изменение числа единиц товара должны происходить без каких-либо задержек со стороны системы. Иначе это может вызвать раздражение.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

3. ПОДТВЕРЖДЕНИЕ ДОБАВЛЕНИЯ

Предусмотрено

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

Ненавязчиво

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

Пропадает само

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

Не пропадает слишком быстро

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

Содержит кнопку корзины

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

4. ЭЛЕМЕНТ КОРЗИНЫ В ШАПКЕ

Присутствует

Базовый момент: элемент корзины должен быть добавлен в шапку сайта – это очень широко распространенный паттерн.
hardclient

В хорошем качестве

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

Стилизован

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

Единый вид элемента

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

Не активен, если корзина пуста

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

Реакция на наведение

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

Бейдж присутствует

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

Без нулевого бейджа

Задача бейджа – привлечь внимание. Но привлекать внимание отсутствием товаров в корзине – сомнительная механика.
hardclient

Бейдж реагирует на добавление

Базовый момент: мы добавляем товар в корзину – бейдж должен изменяться. У всех это работает корректно? Нет, не у всех.

Бейдж реагирует на очистку корзины

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

Бейдж анимирован

При добавлении товара в корзину изменение бейджа можно анимировать: это позволит сделать реакцию элемента в шапке более заметной.

Реакция на изменения в корзине

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

Общая сумма

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

Контент хорошо читается

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

Доступен всегда

Элемент корзины всегда должен быть фиксирован и доступен на экране, чтобы клиенту легче было в нее перейти: либо в шапке (на ПК), либо в таббаре (на мобильных).

Реакция моментальна

При добавлении товара в корзину реакция элемента должна быть моментальной, без каких-либо задержек со стороны системы.

Обновление на всех страницах

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

5. СТРАНИЦА КОРЗИНЫ

Загружается быстро

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

Не блокируется авторизацией

Авторизацию можно ненавязчиво предлагать на разных этапах customer journey, но она не должна блокировать переход клиента в корзину.

Корзина только одна

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

Сохраняется при повторном заходе

Добавленные в корзину товары должны сохраняться в cookies / базе данных (если клиент авторизован) и быть доступными при повторном посещении магазина.

Визуализация процесса

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

Highlight следующих шагов

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

Без отвлекающих факторов

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

Предложение авторизации

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

Управление ожиданиями

Если на следующих шагах клиент может столкнуться с какими-либо ограничениями по сумме заказа, об этом его лучше предупредить заранее:
hardclient

Отработка опасений

Если клиент может сомневаться по поводу качества товаров, которые еще не пробовал, эти опасения дополнительно можно отработать в корзине, рассказав про политику возврата:
hardclient

Онбординг по корзине

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

Помощь с заказом

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

Без навязчивых вопросов

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

Highlight преимуществ

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

Шеринг корзины

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

Отложенное – часть корзины

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

6. PLACEHOLDER КОРЗИНЫ

Предусмотрен

Если клиент еще не добавил ни одного товара в корзину, предусмотрите на странице placeholder, который бы об этом сообщал.
hardclient

Хорошо заметен

Placeholder должен хорошо привлекать к себе внимание клиента. Если бы в этом примере не было оранжевой стрелки, вы бы его точно сразу увидели?
hardclient

Содержит призыв к действию

Вместо простой констатации факта отсутствия товаров в корзине, placeholder может призывать клиента приступить к покупкам.
hardclient

Визуальный аспект

Помимо текста в placeholder можно добавить релевантное изображение, чтобы дополнительно привлечь к нему внимание клиента.
hardclient

Ссылки на каталог и главную

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

Ссылка на активацию поиска

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

Ссылка на авторизацию

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

Товары из предыдущего заказа

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

Кнопка действия

Ключевое действие можно оформить в виде кнопки. Это повысит его заметность и позволит повысить вероятность перехода.
hardclient

7. СПИСОК ТОВАРОВ В КОРЗИНЕ

Общее число позиций

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

Разбиение по категориям

Если клиент может взять много позиций (например, в food-ритейле), разбейте их по категориям – это позволит облегчить проверку списка покупок.
hardclient

Сортировка списка

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

Быстрая очистка корзины

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

Не удаляем пустоту

Любой элемент должен быть виден тогда, когда он нужен. Поэтому не стоит отображать кнопку удаления всех товаров, когда их в корзине нет.
hardclient

Ключевые параметры по товарам

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

Текст хорошо читается

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

Нет скидок? Не пишем об этом

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

Миниатюры товаров доступны

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

Доступное количество товара

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

Изменение числа единиц

Позволяете клиенту изменить число товаров на странице товара и в листинге? Почему бы не предоставить такую возможность и на этапе корзины?
hardclient

Цена за штуку

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

Быстрый пересчет

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

Анимация пересчета

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

Обновление всех параметров

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

Отложить / убрать в избранное

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

Отложить первичнее, чем удалить

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

Частичный выбор

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

Выбор работает корректно

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

Иконки действий

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

Действия видны при наведении

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

Без кнопок покупки

Товары и так в корзине. Целевое действие – оформление заказа. Зачем дублировать кнопки покупки по каждому товару, не понятно. Не студия ли Лебедева дизайн делала?
hardclient

Страницы товара в новой вкладке

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

Группировка товаров по наличию

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

Рекомендации по замене

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

Без переходов в каталог

Если клиент уходит из корзины, шансы на то, что он вернется, не 100%. Поэтому в случае замены не отправляйте его с помощью прямой ссылки в каталог.
hardclient

Товары-заменители релевантны

Базовый момент, от которого зависит, решит клиент, ознакомившись с подборкой замены, уйти из корзины в каталог или нет.
hardclient

Стоит ли спрашивать о замене?

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

Возврат удаленных товаров

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

Без перемещения товаров по списку

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

Без авто-объединения корзин

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

Без авто-замены корзины

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

Спрашиваем при авторизации

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

8. ПОДЫТОГ

Фиксирован

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

Содержит кнопку оформления

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

Кнопка рядом с подытогом

Последнее, с чем клиент сверяется перед тем, как нажать на кнопку оформления – это подытог. Не заставляйте его ее искать – разместите 2 этих элемента рядом.
hardclient

Итоговая сумма хорошо заметна

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

А сумма точно финальная?

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

Начисляемые бонусы

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

Детализация скидок

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

Корректное применение скидок

Рассчитывая скидки в корзине, убедитесь, что все расчеты корректны, а вординг не искажает восприятие. Иначе это может быть воспринято, как обман:
hardclient

Автоматический расчет скидок

Не заставляйте клиента отдельно запрашивать расчет скидки у системы: делайте это в автоматическом режиме.
hardclient

Пояснения

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

Пересчет автоматический

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

Ввод промокода

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

Промокод визуально вторичен

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

Поле ввода промокода спрятано

Поле ввода промокода можно спрятать за ссылкой или чекбоксом. Тот, кто захочет ввести промокод, найдет это поле, а клиента без промокода оно в таком формате не отвлечет.

Активация поля промокода

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

Поле промокода не маркировано

Не маркируйте поле ввода промокода. Это лишь собьет клиента с толку. Или вы хотите, чтобы он отреагировал на подсказку и вставил в него свое имя или номер телефона?
hardclient

Эко-инициативы

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

9. ДОПРОДАЖА В КОРЗИНЕ

Допродажа (?) при добавлении

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

Допродажа по составу заказа

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

Аксессуары на уровне позиции

Допродажа может происходить на уровне каждой позиции: аксессуары, гарантия, установка и прочее – по конкретному товару. Таким образом, предложение будет более точечным.
hardclient
Кстати, по допродаже на странице товара есть более детальная статья.

Списки допродажи скрыты

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

Товар сразу попадает в список

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

Без дублирования

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

Дополнительные мотиваторы

Увеличить чек клиента также может сподвигнуть подсказка о том, что ему осталось набрать на Х руб. до бесплатной доставки, подарка или нового статуса в программе лояльности.
hardclient
TO BE CONTINUED...
Итак, в этой статье мы разобрали работу с корзиной. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce