В этой статье мы собрали 15 идей дизайна рекомендательных виджетов для интернет-магазина: персональные рекомендации, хиты продаж, с этим товаром покупают, похожие товары и многое другое. Если заголовок помогает объяснить пользователю, почему он видит подборку товаров, то сам дизайн виджета отвечает за другое: насколько легко заметить рекомендации, удобно ли их просматривать, хочется ли взаимодействовать с блоком и как быстро он подводит к покупке.
Правильно выбранный формат рекомендательного виджета помогает усилить просмотр карточек товара, увеличить добавление в корзину, нарастить средний чек и сделать персонализацию более заметной частью пользовательского пути. Ниже собраны варианты для разных сценариев: главная страница, каталог, карточка товара, корзина, мобильный интерфейс, промо-механики и повторные покупки.
Классические форматы
1. Классический горизонтальный слайдер на 20 товаров
Самый привычный и понятный формат рекомендательного виджета. Пользователь видит одну строку карточек товара и листает ее вправо или влево. Такой дизайн хорошо работает на главной странице, в карточке товара и в корзине, потому что не перегружает интерфейс и позволяет встроить рекомендации в любой участок страницы.
Этот формат особенно полезен для блоков «Персонально для вас», «Хиты продаж», «Похожие товары», «Вы недавно смотрели». Если ассортимент широкий, важно показывать пользователю, что внутри есть еще товары: через видимые края соседних карточек, стрелки, индикатор количества и плавную анимацию.
2. Грид-виджет на 20-50 товаров со скроллом вниз
Если задача не просто показать несколько рекомендаций, а дать пользователю пространство для исследования, лучше работает формат сетки. В отличие от слайдера, грид-виджет сразу открывает больше товаров в поле зрения и снижает риск того, что пользователь не заметит дальние карточки внутри карусели.
Такой дизайн особенно уместен для подборок «Популярное в категории», «Лучшие предложения», «Похожие товары», «Новые поступления». Он хорошо подходит для каталогов, разводящих страниц и специальных посадочных страниц, где рекомендации должны быть не дополнением, а полноценной частью контента.
3. Виджет в формате двухэтажного слайдера
Иногда одна строка карточек не дает нужной плотности, а полноценный грид перегружает экран. В этом случае полезен промежуточный вариант: двухэтажный слайдер, в котором товары располагаются в две строки и пролистываются блоками.
Такой формат помогает показать больше рекомендаций без ощущения длинной и пустой ленты. Он хорошо работает в десктопной версии на главной странице и в категории, особенно для блоков с хитами продаж и персональными подборками.
4. Большой полноформатный виджет с акцентной первой карточкой
Не все рекомендации должны выглядеть как ряд одинаковых карточек. Иногда полезно выделить одну ключевую позицию крупнее остальных, а рядом показать второстепенные товары в более компактном формате. Такой дизайн особенно хорошо подходит для новых коллекций, сезонных подборок, премиальных товаров и акционных рекомендаций.
Этот формат помогает не только показать товары, но и управлять вниманием пользователя. Первая карточка работает как якорь, а остальные усиливают глубину выбора.
Виджеты для персонализации и сегментации
5. Виджет с табами по типам рекомендаций
Один из самых практичных форматов для главной страницы и личного кабинета. Пользователь видит сверху табы, которые переключают разные группы рекомендаций: «Персонально для вас», «Хиты продаж», «Вы недавно смотрели», «Новинки», «Скидки».
Такой дизайн помогает экономить место на странице и при этом не жертвовать разнообразием сценариев. Особенно хорошо он работает для магазинов с широким ассортиментом, где важно дать пользователю несколько логик выбора, не растягивая страницу десятками отдельных блоков.
6. Виджет с табами по категориям или сценариям
Похожая механика, но с другой логикой сегментации. Вместо типов рекомендаций можно переключать категории или жизненные сценарии: «Для кухни», «Для спальни», «Для детей», «Для офиса» или «Для путешествий», «Для спорта», «Для дачи».
Такой дизайн хорошо работает там, где ассортимент связан не только с типом товара, но и с контекстом использования. Он делает рекомендации более редакционными и помогает пользователю мыслить не товарами, а задачами.
7. Персональный виджет с поясняющей плашкой
Одна из проблем персонализации в том, что пользователь не всегда понимает, почему видит именно эти товары. Это можно решить дизайном: добавить компактную плашку над блоком или внутри него с объяснением логики рекомендаций, например «Подобрано на основе ваших просмотров» или «С учетом прошлых покупок».
Такой подход повышает доверие к подборке и делает рекомендательный блок более прозрачным. Особенно полезен он для дорогостоящих товаров и категорий с длинным циклом выбора.
Виджеты для карточки товара и кросс-сейла
8. Виджет «С этим товаром покупают» с комплектной логикой
Это один из самых конверсионных форматов для карточки товара. Вместо обычного ряда похожих товаров пользователь видит логически связанную подборку: аксессуары, расходники, дополняющие товары, сервисы, гарантию или комплект целиком.
Усилить механику можно визуальной связкой между карточками: знаком плюс, общей ценой комплекта, кнопкой «Добавить все в корзину» и указанием итоговой выгоды. Такой дизайн особенно хорошо работает в электронике, товарах для дома, зоотоварах, детских товарах и сегменте товаров для ремонта.
9. Виджет похожих товаров с быстрым переключением характеристик
Если пользователь выбирает между несколькими близкими моделями, ему важно сравнивать их без лишних переходов. Для этого полезен дизайн виджета, где внутри карточек можно быстро менять цвет, объем, размер, материал или конфигурацию.
Такой формат снижает трение выбора и помогает удержать пользователя внутри блока рекомендаций. Особенно хорошо он работает в моде, мебели, электронике и товарах для ремонта.
10. Виджет с возможностью сравнения товаров
Более продвинутый сценарий для категорий со сложным выбором. Пользователь может отметить несколько товаров прямо внутри рекомендательного блока и перейти к сравнению по ключевым параметрам: цене, размеру, мощности, бренду, составу, наличию, срокам доставки.
Такой виджет особенно полезен для техники, мебели, спортивных товаров, автотоваров и бытовой электроники. Он превращает рекомендацию из пассивного списка карточек в инструмент принятия решения.
Виджеты с усилением доверия и срочности
11. Виджет с иконками социального доказательства
Отдельный сильный формат для роста доверия и конверсии. Внутри карточек товара можно показывать микро-сигналы: «Купили 20 раз сегодня», «Сейчас смотрят 7 человек», «Осталось 5 штук», «Популярно в вашем городе», «Часто покупают повторно».
Такой дизайн помогает не только показывать рекомендации, но и усиливать ощущение актуальности спроса. Главное правило здесь — не перегружать карточку. Лучше выбрать один-два сильных сигнала, чем пытаться показать все сразу.
12. Виджет с таймером или акционным бейджем
Если рекомендации поддерживают промо-механику, дизайн можно усилить визуальными признаками срочности: таймером, бейджем распродажи, подсветкой скидки, индикатором ограниченного предложения. Такой формат особенно хорошо работает в блоках «Товары со скидкой», «Сегодня особенно выгодно», «Успейте купить».
Он подходит как для слайдера, так и для грида, но особенно силен на этапе каталога и корзины, где пользователь уже близок к покупке.
13. Виджет с рейтингом, отзывами и метками доверия
Иногда пользователю не хватает не выгоды, а уверенности в качестве. В этом случае дизайн рекомендательного виджета можно усилить рейтингами, количеством отзывов, значком официального бренда, меткой быстрой доставки или гарантии.
Такой формат хорошо работает для товаров, где важно снять сомнения перед покупкой: техника, косметика, товары для детей, товары для здоровья, мебель. Он особенно полезен в рекомендательных блоках на карточке товара и в каталоге.
Альтернативные и интерактивные форматы
14. Поп-ап виджет с товарными рекомендациями
Иногда рекомендации лучше работают не как статичный блок страницы, а как активный сценарий взаимодействия. Поп-ап виджет можно показывать при намерении ухода, после добавления в корзину, при бездействии или после просмотра нескольких товаров в одной категории.
Внутри поп-апа можно выводить персональные рекомендации, бестселлеры, дополняющие товары, акционные подборки или товары для добора до бесплатной доставки. Главное — не превращать механику в навязчивый баннер и тщательно контролировать частоту показа.
15. Рекомендации на фотографиях товара
Это один из самых гибких современных форматов. Пользователь видит фотографию, в которую интегрирован рекомендательный блок, внутри которого можно быстро переключаться между товарами, демонстрируя всю коллекцию.
Такой дизайн особенно хорош для мобильных интерфейсов и больших товарных категорий, где хочется сохранить компактность блока, но дать пользователю ощущение контроля. По сути, это уже не просто рекомендация, а легкая исследовательская среда внутри страницы.
Как выбрать правильный UX рекомендательного виджета?
- Если задача — встроить рекомендации почти в любой экран и не перегрузить интерфейс, лучше всего работает классический слайдер.
- Если нужно показать большой ассортимент и дать пользователю больше свободы выбора, лучше использовать грид или мини-каталог с фильтрами.
- Если приоритет — кросс-сейл и рост среднего чека, сильнее всего себя показывают комплектные виджеты на карточке товара и в корзине.
- Для персонализации полезны табы, поясняющие плашки и сегментация по сценариям.
- Для роста доверия стоит усиливать дизайн рейтингами, отзывами и сигналами социального доказательства.
- Для промо-механик лучше работают таймеры, скидочные бейджи и поп-ап форматы с ограниченной по времени выгодой.
Правильно подобранный UX товарных рекомендаций помогает сделать товары заметнее, понятнее и полезнее для пользователя, а значит, заметно усилить маркетинговый эффект персонализации в интернет-магазине.
Хотите обсудить рекомендации в Вашем онлайн магазине или приложении? Запросите демо Gravity Field сегодня.