e-commercehealthshopify 2.0

herbamama — natural supplements online store

Полная кастомизация 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 home desktop

Herbamama home mobile

Herbamama product desktop

Herbamama home mobile

Herbamama collection desktop

Herbamama collection mobile

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: все кейсы. Магазины одежды, косметики, электроники, food & supplements. От кастомизации темы до полного магазина под ключ. Заказать проект →