Каталог в e-commerce: как построить основу интернет-магазина

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

Оглавление

Первый уровень каталога

Каталог — это основа интернет-магазина. Если разобраться найти товар сложнее, чем на Ozon и Wildberries, то у бизнеса проблемы. Все, что происходит на сайте, так или иначе завязано на него: поиск товаров, удобство навигации, SEO, работа фильтров, рекомендации, аналитика. 

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

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

В магазине электроники это могут быть:

• Смартфоны и гаджеты

• Бытовая техника

• Компьютеры и ноутбуки

• Телевизоры и аудиотехника

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

МТС

Главная задача первого уровня — не дать пользователю уйти

Когда клиент заходит в каталог, он может находиться в трех состояниях:

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

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

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

Хорошая структура первого уровня решает задачи для всех трех сценариев.

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

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

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

Abamet

Виджет выбора: инструмент быстрого доступа к нужным товарам

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

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

Lamoda

Основная задача виджета — сократить путь пользователя к нужному товару.

Он полезен для клиентов, которые:

• Не знают, где искать — например, в большом ассортименте электроники

• Не уверены, что им нужно — сравнивают несколько категорий товаров, но не понимают, какие характеристики для них важны

• Хотят сэкономить время — переходят сразу к нужной подборке, не тратя время на навигацию

«ВсеИнструменты.ру»

Какие параметры может содержать виджет? Зависит от типа магазина и ассортимента. 

Например:

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

Какой эффект дает виджет?

• Снижение отказов. Пользователь быстрее находит нужное, не блуждая по сайту

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

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

Быстрые ссылки: удобная навигация по фильтрам

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

«Лемана ПРО»

Группа подборки — объединяет несколько быстрых ссылок по смыслу. Категория — определяет, где будет отображаться ссылка. Индекс сортировки — управляет порядком показа ссылок. Ссылка на подборку — URL, ведущий на страницу с уже примененными фильтрами.

Блок с быстрыми ссылками размещается:

1. Сверху — над листингом товаров, чтобы пользователи сразу могли выбрать нужный вариант

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

«Лемана ПРО»

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

Читайте: Невидимая рука интерфейса: как ИИ меняет дизайн и дизайнеров

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

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

МТС

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

• Название — короткое и понятное, например, «Рекомендуем к покупке» или «Полезные аксессуары»

• Ссылка — ведет на карточку товара или подборку товаров

• Порядок расположения — можно задавать вручную или автоматически на основе правил (например, по популярности или цене)

«ВсеИнструменты.ру»

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

Onliner

Зачем это нужно?

• Клиент получает все в одном месте и не тратит время на поиск дополняющих товаров

• Средний чек растет, потому что люди охотнее берут сразу несколько товаров, если их не нужно искать вручную

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

Баннеры в каталоге

Баннеры в каталоге — это быстрый способ обратить внимание на важное. Клиент зашел в категорию? Отлично. Теперь важно не дать ему потеряться и показать, где сейчас самое выгодное, новое или интересное. 

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

«ВкусВилл»

Чтобы баннеры работали, а не висели мертвым грузом, ими нужно удобно управлять. Для этого есть специальный интерфейс, где можно грузить изображения, ставить ссылки и выбирать, где их показывать. Один баннер можно раскидать по разным разделам — например, если идет акция сразу на несколько категорий.

Abamet

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

MTC

Дочерние разделы

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

MTC

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

Обложка делает категорию заметнее, но не должна перегружать страницу. Название должно быть точным — без абстракций вроде «Гаджеты для умного дома», если внутри только умные лампочки. Ссылка должна быть человекочитаемой. Счетчик товаров помогает пользователю понять, стоит ли заходить в раздел: если там три позиции, проще было бы их просто вывести в родительской категории.

«ВсеИнструменты.ру»

Сайдбар

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

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

MTC

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

Ozon

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

Читайте: Бюджет из вашего кармана: как живут и на что тратят деньги своих клиентов диджитал-агентства

Боковой баннер

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

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

«ВкусВилл»

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

Товары месяца

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

«Лемана ПРО»

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

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

МТС

Если нужно собрать товары месяца, можно задать условия:  

• Скидка от 20%

• Категория «Одежда»

• Бренд Nike или Adidas

• Цена до 5000 рублей

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

SEO-текст

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

MTC

Отзывы

Блок с отзывами должен формироваться автоматически на основе всех комментариев, оставленных в категории. Отзывы сортируются по дате — сначала самые свежие (если нет другого правила).  

«Лемана ПРО»

Отображается не более 20 отзывов — только самые свежие и живые мнения, без тонны устаревших комментариев, которые уже никому не интересны. Если нужно, то их специально откроют. 

Формат вывода:

• Имя автора

• Дата публикации

• Оценка

• Количество звезд

• Источник отзыва

• Текст отзыва

• Недостатки

• Преимущества

Видео

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

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

Abamet

Статьи по теме: автоматическая линковка

Статьи выводятся в категории каталога в блоке «Статьи по теме». Этот блок размещается после основного списка товаров, чтобы пользователь сначала посмотрел ассортимент, а потом мог углубиться в детали.

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

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

«М.Видео»

Линковка через теги
Каждая статья содержит теги — ключевые слова, разделенные запятыми. В категориях каталога есть аналогичное поле. Если теги совпадают, статья автоматически подтягивается в раздел. Если у статьи стоит тег «смартфоны», а у категории — такой же, материал появится в соответствующем разделе.

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

Популярные бренды

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

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

«Лемана ПРО»

Второй уровень каталога

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

Если на первом уровне есть раздел «Электроника», то на втором уровне он может делиться на:

• Смартфоны

• Планшеты

• Ноутбуки

• Умный дом

• И т. д.

Ozon

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

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

«Петрович»

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

Поговорим о том, чего не было на первом уровне.

Фильтрация

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

МТС

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

Возле каждого параметра фильтра должно сразу отображается количество товаров, соответствующих данному значению. Если в категории есть 14 красных товаров, рядом с опцией «Красный» будет стоять цифра (14). Это избавляет пользователя от ситуации, когда он выбирает фильтры, нажимает «Применить» и получает пустой экран.

Lamoda

Отображение параметров настраивается в зависимости от типа данных. Для числовых значений, таких как цена или мощность, используется ползунок «от — до». Если параметров много, они могут выводиться в виде списка чекбоксов, селекта (выпадающего списка) или чекбоксов с изображениями, например, для выбора цвета. Если значений слишком много, в фильтр добавляется строка поиска, чтобы пользователь мог быстро найти нужный вариант.

• Числовые значения (цена, мощность) — ползунок «от-до»

• Выбор нескольких значений (бренды, характеристики) — чекбоксы

• Большой список значений — выпадающий список с поиском

• Цвета и визуальные параметры — чекбоксы с изображениями

• Простые параметры (например, «Есть доставка?») — да/нет

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

Фильтр формирует SEO-дружественные URL-адреса (ЧПУ), чтобы страницы с выбранными параметрами правильно индексировались поисковиками. Фильтрация работает через AJAX (Asynchronous JavaScript and XML), чтобы страница не перезагружалась при каждом выборе. Выбранные фильтры сохраняются в виде тегов, которые можно быстро отключить, не сбрасывая весь поиск.

«Петрович»

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

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

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

«ВсеИнструменты.ру»

Сортировка

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

Базовый порядок товаров. По умолчанию в категории товары сортируются по доступности. Это логично: если человек хочет что-то купить, он должен видеть товары в наличии в первую очередь. Поэтому схема такая:

1. С кнопкой «В корзину» — товар можно купить прямо сейчас

2. Под заказ — доступен, но придется подождать

3. Подобрать аналог — если товар закончился, но есть похожие

4. Нет в наличии — временно недоступные позиции

5. Сняты с производства — архивные модели, которые просто остались в каталоге

Abamet

Какие еще должны быть сортировки?

По рейтингу — здесь важно учитывать не только оценку, но и количество отзывов. Если у товара одна пятерка — это не показатель, а если у него 500 оценок и средний балл 4.8, то это уже действительно хороший вариант.

Ozon

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

Wildberries

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

MTC

Что важно при сортировке?

Фильтр не должен задумываться дольше 2 секунд, даже в сложных категориях. Если в категории 12 000 товаров и 15 параметров фильтрации, сортировка все равно должна работать быстро.

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

Калькулятор

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

Калькулятор — это отдельный инструмент, который появляется в всплывающем окне (поп-апе) внутри категории. Пользователь вводит нужные параметры, система делает расчет и сразу отбирает подходящие товары в каталоге.

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

Важно, чтобы калькулятор не просто выдавал пользователю цифру, а автоматически применял фильтры каталога. Если расчет дает диапазон мощности «от 3 до 5 кВт», фильтр сразу подставляет эти значения, и в выдаче остаются только подходящие товары.

Технически калькулятор работает как готовый модуль, который загружается в заранее подготовленный контейнер (div внутри поп-апа). Это позволяет без сложных доработок интегрировать его в нужные разделы сайта. Он просто подключается в нужном месте и сразу работает.

Что важно при разработке?

• Гибкость — калькуляторы создаются под каждый тип товаров, но их интеграция должна быть единой

• Автоматическая фильтрация — после расчета сайт сразу показывает подходящие товары

• Быстрая работа — калькулятор моментально пересчитывает параметры, а фильтр обновляет список товаров без перезагрузки страницы

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

«Лемана ПРО»

Связаться

Клиенты не всегда готовы сразу купить товар — часто им нужна консультация. Для этого добавляется форма обратной связи, которая отправляет заявки в CRM-систему через API.

Abamet

Основная идея формы — CTA (Call To Action), мотивирующий пользователя задать вопрос или получить помощь в выборе. Но перед настройкой системы нужно разобраться с ключевыми моментами:

• Откуда берется форма?

• Будет ли это единый поп-ап для всех страниц каталога или форма встроена в карточку товара?

• Должна ли она подтягивать информацию о выбранном товаре?

• Кто обрабатывает заявки?

• Они уходят в общий пул менеджеров или распределяются по категориям товаров?

• Как быстро должен приходить ответ?

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

Доставка

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

Lamoda

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

Какие данные видит пользователь? После расчета система формирует три ключевых параметра:

• Доставка от (дней) — минимальное количество дней, за которое товар может быть доставле

• Доставка до (дней) — максимальный срок доставки

• Доставка от (дата) — первая возможная дата доставки

MTC

Цены, цены и еще раз цены

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

MTC

Представим, что каждого товара в базе хранятся 4 типа цен:

• Старая цена — если была скидка, она отображается зачеркнутой

• РРЦ (Рекомендуемая розничная цена) — стандартная цена для обычного покупателя

• Оптовая цена — сниженная стоимость при покупке крупным объемом

• Дилерская цена — специальные условия для дилеров

Если у пользователя дилерский аккаунт, он может переключаться между Режимом «Розница» (где отображается РРЦ) и Режимом «Дилер» (где показываются закупочные цены). Это дает дилерам сразу видеть, по какой цене они могут продавать товар.

Оптовая скидка рассчитывается от РРЦ, а для дилеров — от дилерской цены.

При увеличении количества товара в корзине цена автоматически пересчитывается. Если заказано 10 штук, скидка будет 100 руб., если 250-250 руб. Система сразу показывает новую стоимость в карточке товара и в корзине. В личном кабинете пользователя в истории заказов должны отображаться те цены и примененные скидки, которые действовали на момент заказа.

Metro

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

Читайте: Наши 象: что я узнал про китайцев и китайский веб-дизайн, пока создавал сайт для мясокомбината

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

Ozon

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

Примеры размерностей:

• шт

• тыс.

• пог. м

• л

• кг

Кратность (шаг покупки) задается до десятых. Если кратность 0,5, то можно купить 0,5 кг, 1 кг, 1,5 кг и т. д.

Процент скидки считается динамически, как разницы в процентах между между Старой ценой и РРЦ. Для дилеров скидка считается между дилерской ценой и РРЦ. 

Акционные плашки: откуда берутся и как работают

Плашки на товарах должны появляться осмысленно, а не просто потому, что кто-то решил, что так надо. Они могут подтягиваться из CRM, настраиваться вручную или назначаться автоматически по заданным правилам.

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

«М.Видео»

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

«ВсеИнструменты.ру»

Ручное управление и автоматические плашки

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

Но часть меток должны назначаться автоматически. Если у товара есть старая цена и она выше, чем РРЦ, появляется плашка «Акция». Чтобы не было ситуации, когда скидка 1%, но товар уже горит красным, в настройках можно задать минимальный процент скидки для отображения плашки.

Если у товара нулевой остаток, система вешает плашку «Нет в наличии». Если товар архивный и больше не продается, он получает метку «Снят с производства».

PiterGSM 

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

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

Metro

Если товар продается в тысячах штук, плашки «Цена за 1 шт» и «Цена за 1 тыс. шт» должны выводиться автоматически. Если товар продается в метрах, литрах или килограммах, это тоже должно учитываться.

Другой пример — бесплатная доставка. Если в CRM есть информация, что товар можно бесплатно доставить в Москву или Минск, система добавляет соответствующую плашку.

Еще один случай — уценка. Если в карточке товара стоит галочка «Уценка», система добавляет соответствующую плашку и убирает стандартную «Акцию», чтобы не дублировать информацию.

Правила вывода на фронт

Акционные плашки не должны превращать карточку товара в новогоднюю елку. Чтобы все выглядело аккуратно, максимальное число плашек — 3. Если у товара несколько акций, приоритет определяется параметром сортировки.

Плашка «Акция», если она есть, всегда на первом месте. Остальные располагаются по заданным приоритетам.

Как работают иконки действий

Кнопки «В избранное» и «Сравнить» работают без настройки в админке — это стандартный функционал шаблона.

Клик по «В избранное» — добавляет товар в список сохраненных. Клик по «Сравнить» — отправляет товар в список сравнения.

PiterGSM 

Фото в листинге

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

«Юркас»

Какая информация показывается в карточке

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

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

«Лемана ПРО»

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

МТС

Валюта подтягивается из настроек региона, курс обновляется ежедневно.

Размерность (шт., кг, м) указывается рядом с ценой, но сама цена не пересчитывается — это просто справочная информация.

Кнопки «В корзину» и «Купить в 1 клик» всегда на видном месте.

Дата доставки и срок самовывоза рассчитываются автоматически. Логика расчета описана в соответствующем разделе.

Клик по «В корзину» вызывает поп-ап с выбором количества и апсейлом. Система сразу предлагает расходники и сопутствующие товары. Логика подбора работает так же, как в карточке товара и корзине: подтягиваются допы, которые чаще всего покупают вместе.

«ВсеИнструменты.ру»

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

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

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

«ВкусВилл»

Наличие и информация для отдела продаж

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

«ВсеИнструменты.ру»

Как видят цены дилеры

Авторизованные пользователи из группы «дилеры» видят не розничную цену, а свою закупочную.

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

Сравнение и избранное

Сравнение товаров

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

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

«М.Видео»

Как выглядит список сравнения. Каждый товар выводится с основными параметрами:

• Фото

• Название

• Код

• Старая цена

• РРЦ

• Валюта

• Размерность

Рядом с каждым товаром — кнопки «Добавить в корзину» и «Удалить из сравнения», чтобы не приходилось возвращаться в каталог.

«5 элемент»

Как работает таблица сравнения

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

PiterGSM 

Сравнение с «победами»

Ещё одна важная механика — сравнение с выделением победителей по характеристикам.

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

Например:

• У какого товара больше диагональ экрана

• Выше емкость аккумулятора

• Больше объем памяти

• Меньше цена — в зависимости от логики параметра

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

«Онлайнер»

Механика особенно полезна, когда:

• Товаров в сравнении больше двух

• Характеристики представлены числами

• Пользователь выбирает «по максимуму» или «по лучшему соотношению»

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

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

МТС

Дополнительные механики:

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

• Очистка — можно удалить все товары из сравнения одним кликом

«М.Видео»

При добавлении товара в сравнение всплывает уведомление.

PiterGSM

Избранное

Избранное — это список товаров, которые пользователь отметил, но пока не добавил в корзину. Раздел хранится в личном кабинете, но должен быть доступен даже без авторизации. Если пользователь не вошел в аккаунт, товары временно сохраняются в cookie. После авторизации они привязываются к профилю.

«М.Видео»

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

Заключение

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

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

Читайте: Где хибара деревянная, а где град каменный: сказ о сайтах простых и сложных