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: всі кейси. Магазини одягу, косметики, електроніки, харчових продуктів і добавок. Від кастомізації теми до повного магазину під ключ. Замовити проєкт →