Каталог товаров
Большой ассортимент распределён по понятным направлениям: геральдика, канцелярия, рамки, футболки, сувенирная продукция, товары для активного отдыха и другие категории.
E-commerce · WordPress · WooCommerce
Mary Pins: интернет-магазин сувениров и подарков
Разработали интернет-магазин для продажи сувениров, подарков, текстиля, печатной продукции и изделий под заказ. Основной акцент проекта — сделать большой и разнородный ассортимент удобным для поиска, выбора и покупки.
Задача
Собрать большой ассортимент сувенирной продукции в понятный интернет-магазин.
Решение
WordPress + WooCommerce с иерархией категорий, фильтрами, поиском, вариативными товарами, избранным и корзиной.
Результат
Пользователь может быстро пройти от категории до конкретной конфигурации товара и оформить заказ через сайт.
Задача
Не просто показать товары, а организовать большой ассортимент. Когда в магазине десятки категорий и совершенно разные типы товаров, обычная сетка быстро становится неудобной. Пользователю нужно:
- найти нужную категорию;
- перейти в подкатегорию;
- отфильтровать товары;
- выбрать нужный вариант;
- добавить в избранное;
- положить товар в корзину;
- оформить заказ.
Ключевая задача была именно в структуре каталога и удобной навигации.
Что разработали
Категории и подкатегории
Каталог строится не в один уровень: например, Геральдика → Гербы / Флагштоки → конкретные товары.
Фильтры
Большой каталог можно сузить по наличию, спецпредложениям, цвету, размеру и другим характеристикам товара.
Вариативные товары
Один товар может иметь несколько вариантов исполнения — например, размер изделия влияет на конкретную вариацию и цену.
Карточка товара
Фото, наличие, цена, вариации, количество, корзина, избранное, категории и метки — на одной странице.
Избранное и поиск
Пользователь может сохранить товары для возврата позже или сразу начать с поисковой строки, не проходя через категории.
Большой каталог можно сузить без ручного просмотра сотен товаров
Фильтрация зависит от характеристик товара и помогает покупателю быстро убрать нерелевантные позиции. В каталоге используются фильтры по:
- наличию;
- спецпредложениям;
- цвету;
- размеру.
Один товар может иметь несколько вариантов исполнения
Покупатель выбирает нужный вариант прямо на карточке, после чего добавляет его в корзину.
Это лучше, чем создавать отдельную карточку на каждый размер одного и того же изделия.
Всё необходимое для покупки находится рядом с товаром
На странице товара — крупная фотография, название, наличие, диапазон цены, выбор вариации, количество, корзина, избранное, категории и метки.
Пользователь не должен искать характеристики и кнопку покупки по разным страницам.
Поиск работает как отдельный способ входа в каталог
Не каждый пользователь хочет двигаться через категории. Если он уже знает, что ищет, можно сразу начать с поисковой строки.
Это особенно важно для ассортимента, где названия товаров сильно отличаются друг от друга.
Как устроен путь покупателя
Категории
Подкатегории
Фильтры
Вариативные товары
Избранное
Корзина
Оформление заказа
Как выглядит магазин
Что изменилось после запуска
- товары распределены по категориям и подкатегориям;
- есть поисковая строка и фильтры — не только ручной просмотр каталога;
- варианты одного изделия собраны в одной карточке;
- покупатель может собрать заказ самостоятельно через стандартный e-commerce сценарий;
- избранное помогает вернуться к выбору перед окончательной покупкой.
Было
- Большой разнородный ассортимент
- Простого списка товаров недостаточно
- Сложно найти нужную конфигурацию
Стало
- Категории и подкатегории
- Фильтры и поиск
- Вариативные товары и корзина
Что здесь технически интересно
Большой каталог, а не лендинг с несколькими товарами. Основная сложность не в первом экране.
- категории и подкатегории должны работать как единая навигация;
- фильтры зависят от характеристик товара в каждой категории;
- вариативные товары собирают размеры и исполнения в одной карточке;
- избранное, корзина и оформление заказа работают в одной логике WooCommerce.
Проект связывает весь путь от категории до заказа, а не ограничивается красивой главной страницей.
Технологии
- WordPress
- WooCommerce
- PHP
Telegram
MAX
VK