Решение
Пересборка началась с фундамента, которого у старого сайта никогда не было, затем прошла через реструктуризацию каталога, карточки товаров, архитектуру цен, контент и редактируемость.
Дизайн-система и CSS-фундамент
У старого магазина не было дизайн-системы: каждая кнопка стилизовалась по-своему, шрифты непоследовательно менялись между страницами, не было общего набора компонентов, из которых можно было бы строить. Дизайн-систему построила в Figma и реализовала как CSS custom properties для цвета, типографики и отступов, так что каждый компонент наследует из одних и тех же токенов вместо индивидуальной стилизации. Именно этот фундамент дал команде клиента возможность потом расширять сайт, не ломая согласованность.
Реструктуризация каталога
Старый каталог перечислял каждый цвет и размер как отдельный самостоятельный товар: 276 SKU без общей структуры вариаций, без возможности фильтровать по цвету или размеру, склад учитывался отдельно для того, что должно было быть одним товаром. Редактировать это вручную в Shopify на таком масштабе было нереально, поэтому весь каталог экспортировала в Airtable через Airpower, плоские позиции объединила в правильные группы товар-вариация с заполнением недостающих атрибутов, а реструктурированный каталог синхронизировала обратно в Shopify с фильтруемым каталогом по категории, типу, цене, вязкости, объёму и цвету.
Калькулятор объёма смолы
Выбор правильного количества смолы — частая причина колебаний при покупке товара, где ошибка в количестве означает впустую потраченный материал или незавершённый проект, особенно для новичков, у которых ещё нет интуитивного понимания, сколько им нужно. Калькулятор берёт форму проекта (прямоугольная или цилиндрическая), размеры в миллиметрах и тип проекта, затем рассчитывает нужный вес смолы с формулой округления вверх, чтобы клиенты всегда заказывали достаточно. Результат ведёт напрямую к рекомендованному товару, помогая новым, менее опытным клиентам увереннее заходить в категорию.
Типы карточек товара
Карточкам товара нужно было представлять разные виды выбора: одни варьируются по цвету, другие по физической форме, у третьих нет значимой визуальной вариации вообще. Три шаблона карточек — пилюли-селекторы, образцы цвета и вариации на основе изображений — позволяют каждому типу товара использовать тот интерфейс выбора, который соответствует тому, как клиент реально его выбирает. Каждый шаблон полностью адаптивен на десктопе, планшете и мобильных. Клиенты также могут добавить товар в корзину прямо из сетки каталога, выбрав вариацию и добавив её без открытия страницы товара. На страницах товара плавающая панель с выбранной вариацией следует за клиентом при прокрутке длинного контента товара, так что добавить в корзину можно в любой момент без прокрутки назад наверх.
Rich-контент
Страницы товаров собраны из модульных блоков rich-контента: галереи применения с реальными кейсами использования, пошаговой инструкции, таблицы характеристик, тематического баннера и cross-sell пары со связанным товаром. Каждый блок — свой тип метаобъекта, так что контент вводится один раз и может собираться в любой комбинации по каждому товару без участия разработчика. Структура намеренно повторяет Amazon A+ content: одна и та же история товара должна была работать и на витрине Shopify, и в листингах бренда на Amazon, поэтому сборка в формате блоков Amazon означала, что контент нужно было написать только один раз.
Каждый блок rich-контента, например карточка товара со слайдшоу, — это единая запись метаобъекта со своим заголовком, подзаголовком, описанием и десктопным/мобильным баннерными изображениями. Эта запись затем используется каждым товаром, где она нужна, так что обновление одного поля обновляет его везде, где оно привязано, вместо редактирования по каждому товару отдельно. Панель References в каждой записи показывает точно, какие товары используют её, что упрощает понимание охвата одного куска контента перед его изменением.
Подписка на рассылку и автоматизация скидок
Попап заменяет стороннее приложение подписки кастомной секцией из двух шагов, встроенной прямо в тему. Первый шаг спрашивает email клиента в обмен на скидку, оформленную как конкретное предложение, а не общий призыв «подпишитесь на рассылку», что делает обмен ценностью прозрачным. После отправки второй шаг подтверждает подписку и показывает реально работающий промокод, который копируется в буфер обмена по клику, так что клиент может сразу перейти к оформлению заказа, не разыскивая код в почте.
Каждая часть попапа настраивается через редактор темы без кода: кто его видит (только гости, чтобы подписчикам не показывать его снова), сколько ждать перед появлением, сколько дней оставаться скрытым после того, как посетитель закрыл его без подписки, и на каких типах страниц он подавляется (страницы товара, коллекции и корзины, где прерывание конкурировало бы с решением о покупке). Сам промокод привязан к реальной скидке в Shopify, так что то, что обещает попап, всегда совпадает с тем, что реально применяется при оформлении заказа.
Кастомный виджет WhatsApp-чата и синхронизация с CRM
Кастомный виджет WhatsApp заменяет стандартную точку входа в чат флоу из двух шагов: посетители начинают с сообщения, затем указывают имя, email и телефон, прежде чем диалог открывается в WhatsApp.
Эта отправка запускает воркфлоу n8n, который синхронизирует клиента в обоих направлениях: ищет существующего клиента по email и телефону в Shopify, создавая нового при отсутствии, затем делает такой же поиск в Bitrix24, создавая или обновляя контакт в CRM и объединяя обе записи в один разрешённый ID контакта. В Bitrix24 создаётся сделка и привязывается к этому контакту, с комментарием в таймлайне, фиксирующим источник лида, так что каждый запрос из WhatsApp попадает в CRM как отслеживаемый лид, а не сообщение, которое живёт только в чьём-то телефоне.
