Ассортимент и каталог: как не утонуть в SKU и сохранить маржу
Успешный интернет-магазин начинается не с красивой темы, а с внятного ассортимента и структуры каталога. Прежде чем «наливать» трафик и ставить пиксели, стоит составить матрицу SKU, где каждая позиция объясняет своё место: «я привожу людей», «я даю маржу», «я удерживаю лояльность». Так рождается ABC-картинка: товар-локомотив, товар-маржинатор и товар-якорь. Локомотивы должны быть узнаваемы и сравнимы: конкурентные цены, ясные характеристики, отзывы и быстрая доставка — любой лишний шаг убивает смысл их существования. Маржинаторы выигрывают за счёт комплектации и сервисов: наборы, расширенная гарантия, аксессуары, подписка на расходники; на карточке эти опции должны быть видны без скролла и оформляться в один клик. Якорные товары — то, ради чего возвращаются: качество упаковки, стабильность цвета и размеров, адекватная размерная сетка, чёткий уход. Каталог строится «вверх ногами»: от задач пользователя к дереву категорий, а не от внутренних складских групп. В навигации — не «A-100-04», а «Футболки из хлопка», «Льняные брюки», «Керамика для кухни». Фильтры — живые, а не «для вида»: показывают только релевантные опции и обновляют количество результатов до клика. Хорошая карточка товара — это короткий, но информационный «питч»: три-пять буллетов о том, что я получу, фото на белом, один-два живых кадра при дневном свете, видео на 10–20 секунд. Техническая часть — вариативность (размер, цвет, объём), корректная синхронизация с остатками, алерты «сообщить о поступлении», подписка на цену и понятные условия возврата. Ценообразование живёт в реальном времени: правила округления, минимальная маржа, динамические промо без хаоса. Важны банальные вещи: единицы измерения одинаковые по сайту, таблицы размеров не прячутся, фото кликабельно и открывается быстро. Каталог — это не музей, а инструмент принятия решений; он должен работать на скорость выбора и ясность, а не на «эффект витрины».
UX и контент — скелет конверсии. Пользователь сканирует страницу, а не читает её подряд, поэтому иерархия должна быть железной: H1 про результат («Честные кроссовки для города»), подзаголовок про детали («кожа с мягкой подкладкой, нескользящая подошва»), цена, кнопка, ключевые преимущества в 3–5 буллетах. Дальше — разъяснение, а не маркетинг: конкретные составы материалов, плотность, вес, уход, устойчивость к дождю и солнцу, правдивый тон («слегка маломерят — берите на размер больше»). Отзывы не должны быть витриной похвалы: полезны те, где есть рост/вес/размер ноги, сезон использования и «как ведёт себя» вещь. Фото — про цвет и фактуру; лучше одно резкое крупное фото ткани, чем шесть «глянцевых» картинок с фильтрами. Скорость — часть UX: критический CSS инлайн, картинка в правильном размере и формате, ленивая загрузка ниже первого экрана, никаких тяжёлых слайдеров ради «красоты». Поисковая строка должна «понимать» опечатки и подсвечивать категории и продукты, а результаты — фильтруются без перезагрузки. SEO в e-commerce — не «простыня текста», а чистые теги, понятные заголовки, канонические ссылки для вариаций, корректные метаданные и микроразметка (цена, наличие, рейтинг). Мобильный опыт — базовый: большие кликабельные зоны, липкий блок с ценой и CTA, быстрый доступ к информации о доставке и возврате, ясные состояния фокуса. Формы — короткие: адрес в одну строку с подсказками, номер телефона в маске, оплата без принудительной регистрации. Пустое состояние корзины, «сохранить на потом», быстрый повтор покупки и «умные» подсказки («к этому товару берут») снимают трение и добавляют средний чек. В итоге «дружелюбие» магазина — это не анимации, а скорость, ясность и честность.
Оплата, доставка и возвраты — зона доверия, где выигрывают предсказуемые. На этапе оплаты важна гибкость без перегруза: карты, Apple/Google Pay, локальные методы, «запомнить карту» — только с явным согласием. Чекаут не должен требовать лишнего: имя, телефон, email, адрес — всё остальное опционально. Цены — финальные: показываем налоги и доставку заранее, без сюрпризов на последнем шаге. Доставка строится от SLA: «сегодня/завтра» по городу, «2–5 дней» по стране, «международная» с реальными сроками и трекингом. Выбор способа — понятный: курьер, пункт выдачи, почта; стоимость и окно сразу видны. Упаковка — бережливость без фанатизма: защищаем углы, не перегружаем пластиком, кладём мини-гайд по уходу и возвратам. Возврат — не борьба, а нормальный процесс: в аккаунте кнопка «оформить возврат», генерируемая этикетка, чек-лист и срок зачисления денег. Для сложной техники — диагностика и обмен с прозрачными сроками; для одежды — примерка дома с понятными условиями. Сторонние службы часто «портят картину», поэтому мониторинг SLA и «план Б» — обязательны: запасной курьер, альтернативный пункт выдачи, горячая линия у перевозчика. Аналитика замыкает цикл: настраиваем события (клики CTA, добавление в корзину, чекаут, отказ на оплате), строим воронку и ищем узкие места. Ремаркетинг — аккуратно: не преследуем недели, ограничиваем частоту показов и предлагаем ценность (скидка на комплект, бесплатная доставка в следующий раз, аксессуар со скидкой). Поддержка — видимая: телефон, чат, почта; в карточке товара — SLA ответа и график. Магазин, который держит слово про сроки и деньги, быстро обгоняет «красивых» конкурентов; лояльность строится не на лозунгах, а на предсказуемости и уважении к времени покупателя.
Готовые блоки для магазина
Карточка товара
H1 → цена → CTA → 3–5 буллетов, вариативность, доставка/возвраты в одном экране.
Сравнение
Таблица с ключевыми характеристиками и «что выбрать» — подсветка сильных сторон.
Комплекты
Готовые наборы и аксессуары — рост среднего чека без давления.
Поддержка
Видимые контакты и SLA ответа, понятные правила гарантии и возврата.
FAQ
Можно использовать этот шаблон в продакшене?
Да. Код лёгкий, без внешних зависимостей. Подставьте свои тексты, товары и аналитику.
Как поменять палитру?
Правьте переменные в :root — цвета, тени и насыщенность подстраиваются за минуту.
Подходит ли для WooCommerce?
Да. Разметка легко адаптируется под шаблоны WooCommerce или любой другой движок.