Разработка тем Shopify · Медицинская коммерция
Расширение Dawn для сложного каталога компрессионного трикотажа
Я спроектировал и собрал собственный слой визуального оформления, обучения и выбора товара для витрины медицинского компрессионного трикотажа, при этом нативная форма товара Shopify, состояние вариантов, корзина, поиск и фильтрация остались источником истины в основе.
Открыть работающий магазин- Shopify
- Dawn
- Search & Discovery
- Metafields
- OS 2.0
Нативное и собственное, на карте
Покупатель видит индивидуальный интерфейс. Состояние, критичное для покупки, остаётся нативным.
Нативные Shopify и Dawn
Унаследовано- Форма товара
- Состояние вариантов
- Обновление цены
- URL товара
- Поведение корзины
- Фасеты Search & Discovery
- Предиктивный поиск
- Аккаунты покупателей
- Checkout
Собственное оформление
Авторское- buy box с учётом компрессии
- Селекторы цвета, размера и упаковки
- Экран сравнения уровней компрессии
- Оформление мобильных фильтров
- Ползунок цены с двумя ручками (поверх нативных фасетов)
- Переключатель сетки и списка (оформление)
- Переиспользуемые Sections OS 2.0
- Переопределения через metafields
Интегрировано и настроено
Настроено- Настройка Search & Discovery
- Таксономия товаров и коллекций
- Элементы управления в редакторе темы
- Соглашения по данным в metafields
- Клиент
- Absolute Support, известный американский бренд компрессионного трикотажа
- Тема
- Dawn 15.4.1, с расширениями
- Роль
- Единственный инженер темы Shopify
- Объём работ
- Слой визуального оформления и обучения витрины, собственная страница товара, собственный интерфейс подбора товаров, редактируемые продавцом Sections
- Основная работа
- Страница товара с учётом компрессии, собственная фильтрация на Search & Discovery и переиспользуемая библиотека контентных Sections OS 2.0
- Отрасль
- Медицинский и повседневный компрессионный трикотаж
- Платформа
- Shopify
Собственный интерфейс, нативный движок коммерции
Dawn уже поставляет надёжное, хорошо протестированное поведение коммерции. Переписывать его значит добавлять риск и обслуживание без пользы для покупателя. Поэтому я оставил его и построил собственный интерфейс поверх. Слой визуального оформления, обучения и выбора товара написан мной. Системы, которые держат состояние вариантов, цену, URL товара, форму товара и корзину, остаются нативными.
Ценность здесь в сдержанности. Чем меньше объём собственного кода, тем ниже риск интеграции и тем меньше нужно поддерживать по мере развития Shopify и установленных приложений.
Интерфейс собственный. Цена, URL, состояние вариантов и корзина по-прежнему принадлежат Shopify.
Выбор товара сложнее, чем в обычной одежде
Absolute Support, известный американский бренд компрессионного трикотажа, продаёт компрессионные носки, рукава и чулочно-носочные изделия. Его каталог сложнее в покупке, чем обычная одежда, потому что одна покупка требует сразу нескольких решений: уровень компрессии, размер, тип изделия, пол и количество в мультипаке.
Уровень компрессии, измеряемый в mmHg, важнее всего, и легче всего ошибиться именно в нём. Витрина должна была ясно показывать компрессию, выбор размера и упаковки и обучать покупателя, не выступая при этом медицинской рекомендацией. Витрина работает на Shopify с Dawn в основе, и это задало главное ограничение для всего дальнейшего.
Одна покупка, пять решений
- Уровень компрессииГлавное решение
- Размер
- Тип изделия
- Пол
- Количество в упаковке
Данные о товаре
Отделение клинического атрибута от покупаемых вариантов
Цвет, размер и количество в упаковке относятся к покупаемым опциям. Уровень компрессии описывает сам товар и имеет другой вес при выборе. Когда они в одном выпадающем списке, покупатель может выбрать силу компрессии так же, как выбирает цвет, не понимая её. Поэтому я разделил эти две вещи.
Уровень компрессии как атрибут товара
Уровень компрессии рассматривается как свойство товара, а не как вариант. У каждого товара его уровень записан в данных о товаре, и страница читает это значение, чтобы показать подходящий уровень. Диапазон охватывает от лёгкой повседневной поддержки до более высоких степеней компрессии, включая уровни, которые обычно выбирают по рекомендации специалиста. Покупатель может открыть экран сравнения, где уровни разложены рядом, с понятными пояснениями о типичном применении и с примечанием проконсультироваться с врачом. Пояснения поданы как обучение, а не диагноз.
Цвет, размер и упаковка как варианты
Цвет, размер и количество в мультипаке (одна, три или шесть пар) остаются обычными вариантами Shopify. Экономия на упаковке считается из цен вариантов, поэтому упаковка побольше может показать реальную скидку за пару и бейдж выгоды.
Собственные элементы управления, нативное состояние
Собственные элементы управления цветом, размером и упаковкой спроектированы и реализованы как слой оформления витрины, и они питают нативное состояние вариантов Shopify. Когда покупатель меняет опцию, Dawn обрабатывает переключение варианта, обновляет цену, обновляет URL товара и управляет корзиной. Собственный блок цены и экономии находится внутри контейнера вариантов Dawn, поэтому повторный рендер самого Dawn держит его в актуальном состоянии. Источник истины для цены, URL и состояния корзины один, и он принадлежит Shopify.
Повседневная поддержка
Описывает товар или меняет покупку
Атрибут товара
Описывает товар
Варианты Shopify
Меняет покупаемую конфигурацию
Как собственный элемент управления двигает нативное состояние
Реализация в продакшене
Открыть работающий магазинСобственный подбор товаров на нативном движке фасетов Shopify
Каталог устроен так, чтобы покупатели могли зайти с любой удобной им оси: тип изделия, уровень компрессии, показание или пол. Эта таксономия сочетает настройку в админке Shopify с собственным оформлением темы. Фильтрация коллекций работает на Shopify Search & Discovery, нативном движке фасетов. Поверх него я построил собственный интерфейс: мобильную панель фильтров, ползунок диапазона цены с двумя ручками и переключатель сетки или списка, который запоминает выбор покупателя. Эти элементы управления передают свои действия в нативную форму фасетов, поэтому фильтрация и сортировка остаются нативными для Shopify, а оформление собственное.
На витрине также есть подбор товаров на основе тегов. Покупатель выбирает пол, уровень компрессии и стиль, и подбор ведёт его в подходящую коллекцию. Это быстрый путь в каталог, навигационный ярлык на основе тегов, а не опросник, не рекомендательный движок и не диагностический инструмент.
Читать разбор фильтрацииПуть фильтрации
Собственная витрина, рутинные обновления без разработчика
Витрина, которую внутренняя команда не может редактировать, превращается в постоянный счёт за время разработчика. Поэтому слой контента собран как переиспользуемые Sections Shopify OS 2.0, управляемые из редактора темы.
- Обновлять изображения, тексты, CTA и записи FAQ в Sections
- Выбирать товары и коллекции через нативные пикеры
- Настраивать опции подбора товаров и его целевые страницы
- Переопределять контент блока для каждого товара через metafields
- Опираться на цепочку запасных баннеров, чтобы новые страницы коллекций выглядели завершёнными ещё до того, как их кто-то отредактирует
Два решения делают это безопасным для переиспользования: все Sections поставляются с пресетами и блоками для редактора темы, и в их коде нет жёстко зашитых ID товаров.
Логика навигации, лежащие в основе соглашения по данным и структурные изменения раскладки по-прежнему требуют разработки.
Читать разбор слоя SectionsПереопределение через metafield
Что проверено, а что ожидается
Проверено в реализации
- Нативное для Dawn поведение товара и корзины сохранено
- Компрессия смоделирована отдельно от покупаемых вариантов
- Собственные селекторы питают нативное состояние вариантов
- Собственное оформление фильтрации работает на Search & Discovery
- Переиспользуемый, редактируемый продавцом слой контента
- Цена, URL, вариант и корзина используют один источник истины Shopify
Ожидается, но не измерено
- Более понятный выбор товара в медицински сложном каталоге
- Меньше участия разработчика в рутинных обновлениях контента
- Более низкий риск интеграции, чем при замене нативных систем коммерции
Измерения конверсии, выручки, SEO или производительности не входили в эту работу.
Честные компромиссы
Пересекающиеся паттерны Sections
Почему так: Несколько баннерных и обучающих Sections имеют похожую раскладку.
Что бы я сделал дальше: Объединить их в меньшее число параметризованных Sections.
Часть обучающего текста зашита в коде
Почему так: Некоторые карточки сравнения находятся в шаблоне, а не в редактируемых настройках.
Что бы я сделал дальше: Перенести эти формулировки в настройки Sections.
Подбор на основе тегов зависит от чистоты данных
Почему так: Уровни и стили задаются тегами товара, поэтому важна согласованность тегирования.
Что бы я сделал дальше: Нормализовать соглашения по тегам. Это гигиена данных, а не дефект.
Будущее обновление Dawn потребует сверки
Почему так: Собственный слой потребует ручной работы при обновлении Dawn.
Что бы я сделал дальше: Держать изменения сосредоточенными в небольшом числе файлов, что удерживает затраты под контролем.
Это определяет работу по обслуживанию, которую я бы поставил в приоритет дальше.
Связанные разборы
Три истории реализации из этого проекта.
Пересборка PDP компрессионного товара без пересборки движка вариантов Dawn
Как уровень компрессии стал атрибутом товара с экраном сравнения, а цвет, размер и упаковка остались нативными вариантами, питающими состояние вариантов Shopify.
Собственный интерфейс фильтрации на Shopify Search & Discovery
Мобильная панель фильтров, ползунок цены с двумя ручками и переключатель вида, которые передают свои действия в нативный движок фасетов Shopify, а не заменяют его.
Редактируемый продавцом слой Sections на Dawn
Переиспользуемые Sections OS 2.0 с пресетами, переопределениями через metafields для каждого товара и цепочкой запасных баннеров, без жёстко зашитых ссылок на товары.
Выбранный стек
Основа темы
- Dawn 15.4.1
- Shopify Liquid
- OS 2.0 sections and blocks
Моделирование товара
- Shopify variants
- Product metafields
- Native product form
Подбор товаров
- Shopify Search & Discovery
- Collection facets
- Product tags
Frontend
- Liquid
- CSS
- JavaScript
- Theme editor schema
Зона ответственности
Точность намеренная: я унаследовал Dawn и движок коммерции Shopify, расширил тему, настроил Search & Discovery и таксономию, интегрировал metafields и редактор темы и написал слой оформления. Ничего здесь не собрано с нуля.
Следующий кейс
Boxwood Coffee
Дисциплинированная адаптация Prestige для спешелти-обжарщика: проверенное поведение коммерции сохранено, а собственный код добавлен только там, где этого требовали специфичные для кофе данные и навигация.
Нужен собственный интерфейс на Shopify без замены платформы под ним?
Я проектирую и собираю слои витрины с учётом реального каталога, мерчандайзинга и ограничений платформы, сохраняя критичные для покупки системы надёжными и удобными в обслуживании.
Начать разговор