Вернуться к списку Вернуться к статьям
Статьи

Создание интернет-магазина косметики: каталог и фильтры

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

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

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

У одного продукта могут быть варианты: оттенок, объём, аромат, формат упаковки, тип кожи или сезонное назначение. Не каждый признак подходит для выбора внутри одной карточки.

Разные объёмы одного средства обычно удобно показывать как варианты: покупатель сравнивает их в одном контексте. Линейки с разным составом или действием могут потребовать отдельных карточек, даже если у них похожие названия и упаковка. Иначе при переключении посетителю будет непонятно, что именно изменилось.

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

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

Карточка товара: данные для выбора средства

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

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

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

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

Фильтры для интернет-магазина косметики

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

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

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

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

Поиск, категории и подборки

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

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

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

Контент каталога: источники и ответственность

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

Обычно фиксируют:

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

Если сайт создаётся на «1С-Битрикс: Управление сайтом», CMS используют для публичной части интернет-магазина и управления контентом в рамках конкретной реализации. Она не заменяет внутренний учёт компании. Правила передачи, проверки и исправления данных описывают отдельно от выбора CMS.

Проверка каталога перед публикацией

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

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

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

Часто задаваемые вопросы

Как понять, какие свойства выводить в фильтры?

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

Нужна ли отдельная карточка для каждого оттенка?

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

Что делать с товарами без полного описания?

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

Можно ли загрузить каталог из таблицы?

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

Как проверить фильтры?

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