Інженерія теми 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
- Покладатися на ланцюжок запасних банерів, тож нові сторінки колекцій виглядають завершеними ще до правок
Два рішення роблять це безпечним для перевикористання: кожна section постачає пресети та блоки для редактора теми, і в коді sections немає жорстко прописаних ID товарів.
Логіка навігації, домовленості щодо даних і структурні зміни верстки все ще потребують розробки.
Читати розбір шару sectionsПеревизначення через metafield
Що підтверджено, а що очікувано
Підтверджено в реалізації
- Вбудовану в Dawn поведінку товару та кошика збережено
- Компресію змодельовано окремо від товарних варіантів
- Власні селектори живлять вбудований стан варіантів
- Власна презентація фільтрації працює на Search & Discovery
- Перевикористовуваний контент-шар, редагований продавцем
- Ціна, URL, варіант і кошик мають одне джерело істини Shopify
Очікувано, не виміряно
- Зрозуміліший вибір товару для медично складного каталогу
- Менше залучення розробника до рутинних оновлень контенту
- Менший ризик інтеграції, ніж заміна вбудованих комерційних систем
Вимірювань конверсії, виручки, SEO чи продуктивності в цій роботі не було.
Чесні компроміси
Патерни sections, що перетинаються
Чому так: Кілька банерних та освітніх sections мають схожі верстки.
Що я зробив би далі: Звести їх у меншу кількість параметризованих sections.
Частина освітнього тексту зашита в коді
Чому так: Деякі картки порівняння живуть у шаблоні, а не в редагованих налаштуваннях.
Що я зробив би далі: Перенести цей текст у налаштування section.
Пошук на тегах залежить від чистих даних
Чому так: Рівні та стилі керуються тегами товару, тож послідовне тегування важливе.
Що я зробив би далі: Нормалізувати домовленості щодо тегів. Це гігієна даних, а не дефект.
Майбутнє оновлення Dawn потребує узгодження
Чому так: Власний шар потребуватиме ручної роботи, коли Dawn оновиться.
Що я зробив би далі: Тримати зміни зосередженими в невеликій кількості файлів, що робить вартість керованою.
Це визначає роботу з підтримки, яку я взяв би в пріоритет далі.
Дотичні розбори
Три історії реалізації з цього проєкту.
Перебудова компресійного PDP без перебудови рушія варіантів Dawn
Як рівень компресії став атрибутом товару з порівнянням, тоді як колір, розмір і набір лишилися вбудованими варіантами, що живлять стан варіантів Shopify.
Власний UI фільтрації на Shopify Search & Discovery
Мобільна панель фільтрів, слайдер ціни з двома повзунками та перемикач вигляду, що передають свої дії у вбудований рушій фасетів Shopify, а не замінюють його.
Шар sections на Dawn, редагований продавцем
Перевикористовувані sections OS 2.0 з пресетами, перевизначеннями через metafield для кожного товару та ланцюжком запасних банерів, без жорстко прописаних посилань на товари.
Вибраний стек
Основа теми
- 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
Фронтенд
- Liquid
- CSS
- JavaScript
- Theme editor schema
Відповідальність
Точність за задумом: я успадкував Dawn і комерційний рушій Shopify, розширив тему, налаштував Search & Discovery і таксономію, інтегрував metafields і редактор теми та написав презентаційний шар. Нічого тут не збудовано з нуля.
Наступний кейс
Boxwood Coffee
Виважена адаптація Prestige для спеціалізованої обжарки кави, зі збереженням перевіреної комерційної поведінки та власним кодом лише там, де цього вимагали дані про каву та навігація.
Потрібен власний досвід Shopify без заміни платформи під ним?
Я проєктую й будую шари вітрини навколо реального каталогу, мерчандайзингу та обмежень платформи, тримаючи критичні для покупки системи надійними та підтримуваними.
Почати розмову