e-commercehealthshopify 2.0

herbamama — інтернет-магазин натуральних добавок

Повна кастомізація Shopify-теми за дизайном із Figma для американського бренду натуральних добавок. Каталог 100+ SKU, підписки, оптимізація конверсії. Здано раніше строку.

100+ товарів (SKU)

3 учасники команди

< 4 тижні розробки

�� herbamama.com

01

про клієнта

Herbamama — американська компанія з Каліфорнії, заснована 2019 року. Спеціалізується на виробництві натуральних рослинних добавок: капсули, тинктури та гумки (gummies). Усі продукти — органічні, Non-GMO, веганські та без глютену. Виробництво сертифіковане за стандартом GMP.

Бренд позиціює себе як компанію, що поєднує знання про лікарські рослини із сучасним підходом до здоров’я. Каталог містить понад 100 SKU — від Ashwagandha і Sea Moss до спеціалізованих формул для підтримки печінки, імунітету та когнітивних функцій.

02

задача

Клієнт мав діючий Shopify-магазин на стандартній темі, яка не відповідала бренд-айдентиці. Дизайнер підготував повний макет у Figma з кастомним стилем: фірмові кольори, типографіка, структура колекцій і сторінок продуктів. Потрібно було перенести цей дизайн на Shopify без втрати функціональності платформи.

→Повна кастомізація наявної Shopify-теми за макетом із Figma

→Адаптивна верстка для desktop, tablet і mobile

→Кастомні секції для homepage: hero, колекції, відгуки, підписка

→Оптимізація сторінок продуктів для конверсії

→Налаштування підписок (subscription) для повторних замовлень

→SEO-оптимізація: meta-теги, Schema.org, швидкість завантаження

→Інтеграція email-маркетингу та системи відгуків

03

рішення

За основу взяли тему з офіційного магазину тем Shopify і повністю переробили її відповідно до Figma-макета. Кожну секцію — від header до footer — перебудовано з нуля, зберігши сумісність із Shopify Theme Editor, що дозволило клієнту самостійно керувати контентом.

кастомна тема

Shopify-тему повністю перероблено: кастомні JSON-шаблони, Liquid-секції, CSS-змінні для фірмових кольорів. Архітектура Shopify 2.0 з динамічними секціями на кожній сторінці.

product pages

Сторінки продуктів оптимізовано для конверсії: акцентна CTA-кнопка, блок переваг, відгуки, related products. Підтримка підписок із вибором частоти доставки.

колекції та фільтри

Кастомна сітка колекцій із фільтрацією за типом продукту (capsules, tinctures, gummies), за напрямом здоров’я (liver, immune, brain) та сортуванням.

SEO та швидкість

Оптимізація Core Web Vitals, lazy loading зображень, мінімізація CSS/JS. Розмітка Schema.org Product для кожного товару. Meta-теги за шаблоном для всіх колекцій.

03.1

як виглядає

Ключові екрани магазину — desktop і mobile версії.

Herbamama домашній комп’ютер

Herbamama домашній мобільний

Продукт Herbamama для десктопу

Herbamama домашній мобільний

Колекція Herbamama для настільних комп’ютерів

Колекція Herbamama для мобільних пристроїв

04

процес

тиждень 1

аналіз і планування

Аналіз Figma-макета, декомпозиція на Liquid-секції, узгодження пріоритетів із клієнтом. Налаштування dev-оточення через Shopify CLI.

тиждень 2

верстка і розробка

Кастомізація теми: header, footer, секції homepage, collection і product templates. Адаптивна верстка для всіх breakpoints.

тиждень 3

інтеграції та QA

Підключення підписок, email-маркетингу, системи відгуків. Тестування на реальних замовленнях. Оптимізація швидкості. Здача проєкту — раніше запланованого строку.

Наповненням сайту — текстами, фото продуктів і описами — займалася команда клієнта. Ми надали детальну інструкцію з роботи з Shopify Theme Editor і провели онлайн-навчання для контент-менеджерів.

05

команда

lead developer

Архітектура теми, Liquid-розробка, Shopify API, code review

frontend developer

Верстка за Figma-макетом, CSS, адаптивність, анімації

QA & integrations

Тестування, підключення застосунків, SEO-оптимізація, деплой

06

результат

✓Магазин запущено з повною кастомізацією за дизайном із Figma

✓Здано раніше запланованого строку (3 тижні замість 4)

✓Клієнт самостійно керує контентом через Shopify Theme Editor

✓100+ товарів у каталозі з підтримкою підписок

✓Оптимізовані Core Web Vitals і SEO-розмітка

✓Безкоштовна доставка від $50, інтеграція з US-службами

є схожий проєкт?

Розкажіть нам про ваші завдання — підготуємо оцінку протягом 24 годин. Безкоштовно та без зобов’язань.

обговорити проєкт →інші кейси

Налаштування теми Shopify

TradeMinister виконує повну кастомізацію тем Shopify за макетами з Figma. Кожен розділ перебудовується з нуля з збереженням сумісності з Theme Editor. Послуга кастомізації від 500 у.о.

Shopify під ключ

Повний цикл розробки магазинів на Shopify: від аналізу завдань до запуску. Адаптивна верстка, SEO, інтеграції з українськими платіжними системами та доставкою.

Інші кейси

Перегляньте портфоліо TradeMinister: всі кейси. Магазини одягу, косметики, електроніки, харчових продуктів і добавок. Від кастомізації теми до повного магазину під ключ. Замовити проєкт →