Сравнение товаров и избранное в интернет-магазине: как сделать и зачем

Коротко

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

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

ЧтоСравнениеИзбранное
Зачем покупателювыбрать одну модель из нескольких похожихсохранить товары на потом
Для каких магазиновтехника, инструмент, оборудование, B2Bодежда, мебель, подарки, любые каталоги
WooCommerceплагин или функция темыплагин или функция темы
1С-Битриксстандартные компоненты сравненияотложенные товары или доработка
Главное условиеединые характеристики в каталогеудобная кнопка и сохранение без регистрации

Основная мысль

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

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

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

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

Сравнение товаров на сайте: кому и когда нужно

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

Магазины, которым сравнение необходимо

  • бытовая и цифровая техника: мощность, объём, размеры, энергопотребление;
  • инструмент и оборудование: характеристики важнее внешнего вида;
  • стройматериалы и инженерная сантехника: размеры, материал, совместимость;
  • B2B-каталоги: покупатель подбирает оборудование под техническое задание;
  • автотовары, шины, диски: параметры и совместимость.

Магазины, где сравнение почти не используется

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

В этих нишах избранное полезнее сравнения: покупатель собирает понравившееся и возвращается, когда готов.

Как понять, нужно ли сравнение вашему магазину

  1. Посмотрите в Метрике, сколько товаров в среднем открывает посетитель одной категории за визит. Если много — он сравнивает вручную.
  2. Посмотрите в Вебвизоре, переключается ли посетитель между карточками похожих товаров.
  3. Спросите менеджеров, как часто клиенты звонят с вопросом «чем эта модель отличается от той».
  4. Проверьте, какие характеристики у вас есть и насколько они единообразны.

Если на все вопросы ответ «да» — сравнение окупится. Если характеристик нет, начать придётся с их наполнения.

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

Кнопка «Сравнить» в карточке — это малая часть работы. Основная — страница сравнения и данные для неё.

Кнопка и счётчик

  • кнопка «Сравнить» в карточке товара и в списке каталога;
  • после нажатия кнопка меняет состояние — «В сравнении», чтобы было видно, что действие выполнено;
  • в шапке сайта — значок сравнения со счётчиком товаров;
  • на мобильных — значок в нижней панели или в меню, а не спрятанный в футере.

Страница сравнения

Хорошая страница сравнения отвечает на вопрос «чем они отличаются» за несколько секунд:

  1. Товары сгруппированы по категориям: сравнивать холодильник с пылесосом бессмысленно.
  2. Сверху — фото, название, цена, наличие и кнопка «В корзину».
  3. Ниже — характеристики строками, одинаковые единицы измерения.
  4. Переключатель «Только различия» скрывает строки, где у всех товаров одинаковые значения.
  5. Товар можно убрать из сравнения одной кнопкой.
  6. Шапка с товарами закрепляется при прокрутке длинной таблицы.

Мобильная версия

На телефоне таблица из четырёх колонок не помещается. Рабочие варианты:

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

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

Какие характеристики выводить в сравнение

Таблица сравнения собирается из характеристик товаров. Если данных нет или они разрозненные, никакая вёрстка не поможет.

Принципы подготовки характеристик

  • Единые названия. «Мощность» у всех товаров категории, а не «Мощность», «Мощн.» и «Потребляемая мощность».
  • Единые единицы. Все значения в одних единицах — ваттах или киловаттах, а не вперемешку.
  • Значения, а не текст. «Да» и «Нет» вместо фраз в описании, числа отдельно от единиц измерения.
  • Набор характеристик по категории. У холодильников свой список, у стиральных машин свой; общие поля — бренд, страна, гарантия.
  • Важные — сверху. Первые строки таблицы — то, по чему в этой категории реально выбирают.

Пример набора для категории

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

Откуда берутся данные

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

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

В WooCommerce нет встроенного сравнения и избранного. Их добавляют тремя способами.

Варианты реализации

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

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

Атрибуты — основа сравнения

Сравнение в WooCommerce строится на атрибутах товаров. Для корректной таблицы атрибуты должны быть глобальными — созданными в разделе «Товары → Атрибуты», а не заданными вручную в каждой карточке. Глобальные атрибуты используются и в фильтре каталога, поэтому их порядок полезен дважды. Как настроить фильтр по тем же атрибутам, разобрано в статье о фильтре товаров в WooCommerce, а о работе с карточками и вариациями — в статье о товарах в WooCommerce.

Пошагово для WooCommerce

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

Сравнение и избранное в 1С-Битрикс

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

Сравнение

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

Как и в WooCommerce, сравнение зависит от свойств инфоблока каталога. Свойства должны быть единообразными, а у товаров с торговыми предложениями нужно решить, что сравнивается — товар целиком или конкретное предложение. Как устроены предложения и их выгрузка из 1С, описано в статье о торговых предложениях в 1С-Битрикс.

Избранное

Варианты реализации избранного в Битриксе:

  • Отложенные товары. Модуль магазина умеет хранить товары в корзине с пометкой «отложен». Это штатный механизм, но покупатель видит избранное внутри корзины, что не всегда удобно.
  • Функция готового решения. Во многих шаблонах магазинов избранное уже сделано.
  • Своя реализация. Отдельный список, привязанный к пользователю, с сохранением для гостей и переносом после входа.

Пошагово для Битрикса

  1. Проверьте, какие свойства есть у товаров, и наведите в них порядок — в 1С или в инфоблоке.
  2. Включите сравнение в параметрах компонента каталога и выберите свойства.
  3. Настройте шаблон страницы сравнения: группировку, «только различия», мобильную версию.
  4. Выберите способ реализации избранного.
  5. Проверьте, что кеш компонентов не мешает обновлению счётчиков в шапке.
  6. Настройте цели в Метрике.

Избранное: как сделать, чтобы оно возвращало покупателей

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

Сохранение без регистрации

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

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

Что показывать в списке

  • фото, название, цену и наличие — актуальные на момент просмотра;
  • отметку, если цена снизилась или товар снова появился в наличии;
  • кнопку «В корзину» у каждого товара и «Добавить всё в корзину»;
  • возможность поделиться списком ссылкой — полезно для подарков и согласования покупки.

Напоминания

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

Избранное или отложенная корзина

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

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

Сценарии: как это выглядит в разных магазинах

Одна и та же функция в разных нишах устроена по-разному. Ниже — три типичных случая.

Магазин электроинструмента

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

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

Магазин мебели

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

B2B-каталог оборудования

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

Как измерить эффект

Сравнение и избранное — это функции, эффект которых нужно проверять цифрами, а не ощущениями.

Цели в Метрике

  • добавление в сравнение;
  • открытие страницы сравнения;
  • добавление в корзину со страницы сравнения;
  • добавление в избранное;
  • переход в корзину из избранного.

Как настроить такие цели, описано в статье о целях в Яндекс Метрике.

Что смотреть

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

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

Типичные ошибки и на чём опасно экономить

Ошибки

  • Сравнение без характеристик. Таблица из пустых ячеек отталкивает сильнее, чем отсутствие функции.
  • Смешивание категорий на одной странице сравнения. Строки характеристик не совпадают, таблица нечитаема.
  • Регистрация ради избранного. Функцией почти никто не пользуется.
  • Кнопка без обратной связи. Покупатель не понимает, добавился ли товар, и нажимает ещё раз.
  • Плагины, которые грузятся на каждой странице. Каталог замедляется ради функции, которой пользуется часть посетителей.
  • Нет кнопки «В корзину» на странице сравнения. Покупатель выбрал модель, но должен вернуться в карточку.
  • Устаревшие цены в избранном. Покупатель видит одну цену в списке и другую в корзине.

На чём опасно экономить

  1. На приведении характеристик к единому виду — без этого сравнение не работает.
  2. На мобильной версии страницы сравнения.
  3. На проверке скорости каталога после установки плагинов.
  4. На целях в Метрике — без них не понять, окупилась ли функция.

Чек-лист

  • Определено, нужно ли сравнение вашей нише, или достаточно избранного
  • Для каждой категории составлен список характеристик
  • Характеристики единообразны: названия, единицы, значения
  • Кнопки «Сравнить» и «В избранное» есть в карточке и в каталоге
  • В шапке — счётчики сравнения и избранного
  • Страница сравнения группирует товары по категориям
  • Есть переключатель «Только различия»
  • Со страницы сравнения и из избранного можно добавить в корзину
  • Избранное работает без регистрации и переносится в аккаунт
  • Сравнение удобно на телефоне
  • Настроены цели в Метрике

Частые вопросы

Как сделать сравнение товаров на сайте?

Сначала привести характеристики товаров к единому виду, затем подключить функцию сравнения: в WooCommerce — плагином или средствами темы, в 1С-Битрикс — через стандартные компоненты каталога. После этого оформить страницу сравнения и проверить её на телефоне.

Есть ли сравнение в WooCommerce из коробки?

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

Есть ли сравнение в 1С-Битрикс?

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

Что лучше — избранное или сравнение?

Это разные функции. Сравнение помогает выбрать одну модель из похожих, избранное — отложить товары на потом. Магазину техники нужны обе, магазину одежды обычно хватает избранного.

Сколько товаров можно сравнивать одновременно?

Удобно — 2–4 товара на десктопе и 2 на экране телефона. Больше можно, но таблица становится трудной для чтения.

Нужна ли регистрация для избранного?

Нет. Лучше сохранять список для гостей и переносить его в аккаунт после входа.

Влияет ли сравнение на скорость сайта?

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

Можно ли сравнивать товары с разными вариациями?

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

Нужно ли сравнение небольшому магазину?

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

Сколько стоит добавить сравнение и избранное?

Если характеристики уже в порядке, подключение и оформление — это доработка на несколько часов или дней, от 2 000 ₽ в час. Если характеристики нужно собирать и нормализовать, основная часть работы уйдёт на данные.

Итог

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

В WooCommerce обе функции добавляются плагинами или средствами темы на основе глобальных атрибутов, в 1С-Битрикс сравнение есть в стандартных компонентах, а избранное делают через отложенные товары или доработку. Эффект проверяют целями в Метрике.

Я как частный разработчик делаю интернет-магазины на WooCommerce и 1С-Битрикс: навожу порядок в характеристиках, настраиваю сравнение, избранное и фильтры так, чтобы они не замедляли каталог. Работаю напрямую, без посредников. Подробнее — на странице интернет-магазина на WordPress.

Что будем искать? Например,Продвижение