Разработка интернет-магазина БАДов и спортивного питания на Shopify
Кастомизировали тему Shopify, интегрировали расширенные функции на сайт и помогли клиенту вывести бизнес в онлайн
Здравоохранение, Спорт, Торговля
Великобритания
2023
Услуги
Технологии
Сложность
Время разработки
4 месяца до MVP, 10 месяцев — полный цикл разработки
Команда
1 PM, 1 Design, 2 Frontend, 1 Backend, 1 QA
Статус проекта
Проект реализован и продолжает развиваться
О клиенте
Клиент — предприниматель из Великобритании, владелец сети магазинов, продающих БАДы, спортивное питание и фитнес-аксессуары. Бизнес хорошо развивался оффлайн и клиент решил сделать онлайн-версию магазина. Целевая аудитория — спортсмены, любители фитнеса и люди, которые занимаются спортом и заботятся о здоровье. Им нужны качественные продукты для тренировок и поддержания активного образа жизни.
Клиент захотел выйти в онлайн, чтобы привлечь больше клиентов и расширить географию бренда. Он самостоятельно создал сайт на платформе Shopify на основе готовой темы, но столкнулся с проблемами. Сайт выглядел не современно и не стильно, а ограниченные возможности платформы не позволяли реализовать идеи, которые могли бы выделить его магазин среди конкурентов. Поэтому ему понадобилась команда профессионалов для создания уникального решения.
Клиент обратился с просьбой преобразовать его интернет-магазин на Shopify. Что нужно было сделать:
1. Доработать дизайн выбранной темы, отойти от стандартного шаблона и создать уникальный дизайн для бренда.
2. Расширить функциональность сайта, поскольку стандартные инструменты Shopify не позволяли внедрить необходимые функции. Для этого потребовалась кастомизация блоков и плагинов.
3. Создать интерактивный калькулятор, который рассчитывал бы КБЖУ (калории, белки, жиры, углеводы) пользователя и давал рекомендации по выбору продуктов из каталога. Этот функционал позволит выделиться на фоне конкурентов и создать дополнительную ценность для пользователей, помогая им делать более осознанный выбор.
Изображение проекта
Решение
1) Обновили дизайн сайта, чтобы он соответствовал ожиданиям клиента и выглядел привлекательно среди конкурентов.
2) Адаптировали готовую Shopify-тему, создав уникальный и современный интерфейс по заранее подготовленным макетам.
3) Разработали кастомный калькулятор КБЖУ с рекомендациями продуктов на основе целей пользователя.
4) Интегрировали внешние сервисы для оплаты, доставки и управления клиентами. Это позволило легко масштабировать бизнес и предложить удобный сервис своим пользователям.
Этот проект был не просто выполнением стандартного заказа. Клиент обратился к нам после того, как попытался создать сайт самостоятельно на Shopify, но результат его не устроил. Мы поняли, что нужно не просто изменить сайт, а создать уникальный продукт, который выделится среди конкурентов.
Особое внимание мы уделили созданию кастомного дизайна. Несмотря на множество готовых тем на Shopify, клиент хотел нечто особенное, чтобы подчеркнуть характер своего магазина спортивного питания. Мы взяли за основу готовую тему, но переработали её, создав новый дизайн, удобный для пользователей.
Самым сложным стало внедрение дополнительных функций — калькулятора спортивного питания, системы уведомлений, логистики и платежных систем для Великобритании и Европы. Были некоторые технические сложности, особенно с синхронизацией данных с CRM и настройкой предзаказов, но команда справилась отлично. Важно, что взаимодействие с клиентом было очень продуктивным: нам удалось построить доверительные отношения, что позволило быстро принимать решения даже по самым сложным вопросам.
Этот проект для нас стал возможностью показать, что работа с такими платформами, как Shopify, может быть креативной и глубокой.
РЕАЛИЗОВАННЫЙ ФУНКЦИОНАЛ
Интерфейс каталога товаров
Разработали удобный и понятный каталог
Продукты отображаются в виде плиток с основными данными: изображением, названием, ценой, рейтингом и количеством отзывов, а также кнопкой для быстрого добавления в корзину. Это позволяет покупателям быстро находить нужные товары и принимать решения о покупке.
Каждая плитка ведет к детальной карточке товара, где можно узнать полное описание, характеристики и рекомендации по применению. Для кастомизации каталога мы использовали язык Liquid, что позволило гибко настроить интерфейс и функционал под нужды клиента.
Подробная карточка товара
Сделали информативную карточку товара
Добавили в карточку следующие элементы:
- изображение продукта;
- опции для выбора вариаций (например, размеры или вкусы);
- кнопку для быстрого добавления товара в корзину;
- описание товара, его состав и рекомендации по использованию;
- блок с отзывами и рейтингами, который помогает покупателям оценить продукт на основе опыта других.
Чтобы настроить внешний вид карточки и интегрировать в нее дополнительные элементы, использовали кастомные блоки на Liquid.
Функционал сравнения товаров
Добавили сравнение товаров
Пользователь может добавить несколько товаров в таблицу сравнения, где они отображаются по ключевым параметрам: описание, вес, цена, состав и другие характеристики.
Этот формат позволяет оценить различия и выбрать товар, который лучше всего соответствует требованиям.
Чтобы кастомизировать функцию мы использовали JavaScript для создания интерактивной таблицы и Liquid для интеграции с Shopify.
Избранные товары в личном кабинете
Добавили функцию «Избранные товары»
С помощью избранного пользователи могут сохранять понравившиеся продукты в отдельном списке.
Эти товары отображаются в личном кабинете, куда покупатели могут вернуться в процессе выбора, сравнить товары из списка или вернуться позже для покупки.
Фильтр товаров в каталоге
Разработали многоуровневое меню и систему фильтров
Меню расположено сбоку на странице и позволяет легко находить нужные продукты, исключая лишнее. Оно включает фильтры по брендам, ценам, весу, а также категории протеинов (например, сывороточный, изолят).
Дополнительно добавлены фильтры по вкусовым предпочтениям (шоколад, ваниль, банан) и странам производства (США, Великобритания и другие), что делает поиск точнее.
Для реализации меню мы использовали JavaScript и Shopify API для динамической подгрузки данных.
Страница оформления заказа
Настроили быстрое оформление заказа
После добавления товаров в корзину, пользователь переходит на страницу чекаута, где оформление происходит на одной странице. Справа отображаются выбранные товары, а слева — поля для ввода контактных данных, адреса и способа доставки.
Если пользователь авторизован, данные заполняются автоматически. Внизу страницы есть кнопка «Оплатить», и после её нажатия покупатель попадает на страницу «Спасибо». В личном кабинете создается заказ, и можно отслеживать его статус и доставку.
Личный кабинет пользователя
Разработали личный кабинет
Через личный кабинет пользователи могут управлять своими данными и покупками. В кабинете можно изменить личную информацию, пароль, добавить или удалить адреса доставки и карты для быстрого оформления заказов.
Также в разделе с заказами можно отслеживать статус текущих покупок и просматривать историю заказов. В отдельной вкладке пользователи могут сохранять избранные товары, а также видеть информацию о бонусах и быстро выходить из аккаунта.
Платежные системы, доступные для Shopify
Настроили интеграцию с платёжными системами
На Shopify легко подключаются различные способы оплаты, такие как Visa, Mastercard, PayPal, Apple Pay, Google Pay и другие локальные системы (например, Klarna и iDEAL).
Все системы соответствуют стандартам безопасности, что гарантирует защиту данных клиентов и правильное выполнение финансовых операций.
Внедренные сервисы доставки
Интегрировали сайт с логистическими сервисами
При оформлении заказа покупатель может выбрать один из вариантов доставки:
- Royal Mail, DPD, Hermes, UPS — для Великобритании;
- DHL или FedEx — для международных отправлений.
После оформления заказа клиент получает трек-номер и может отслеживать посылку через личный кабинет.
Интерфейс CRM HubSpot
Настроили интеграцию с CRM-системой
Настроили интеграцию с HubSpot CRM для автоматизации управления клиентами. С помощью этой интеграции можно передавать данные о заказах и клиентах в CRM, что упрощает создание маркетинговых кампаний, персонализированных предложений и анализ поведения покупателей.
Продавец теперь сможет лучше управлять контактами, организовывать автоматические рассылки и предлагать акции, что должно увеличить продаж и улучшить качество обслуживания.
Магазин на мобильных устройствах
Оптимизировали магазин под мобильные устройства
Интерфейс подстраивается под размер экрана, сохраняя удобство навигации и быструю загрузку страниц.
Покупатели могут комфортно искать товары, просматривать карточки и оформлять заказы на смартфонах и планшетах.
Страница бонусной программы
Внедрили бонусные программы и скидки
Мы добавили систему бонусов и скидок, чтобы стимулировать постоянных клиентов и привлекать новых. Пользователи могут накапливать бонусные баллы за покупки и использовать их для получения скидок на следующие заказы. Также система позволяет проводить акции для определенных товаров или групп клиентов.
Уведомления по email
Внедрили систему уведомлений
Она нужна, чтобы держать пользователей в курсе о статусе заказов и новостях магазина. После оформления заказа клиент получает уведомления по электронной почте или SMS с подтверждением и обновлениями по статусу заказа.
Также система уведомлений информирует о новых акциях, предложениях и поступлении товаров из избранного на склад.
Выбор языка и валюты на сайте
Добавили несколько языков и валют
Клиент вышел в онлайн, чтобы продавать свой продукт по всей Европе и миру. Посетители из разных стран могут выбирать язык интерфейса и валюту (фунты, евро, доллары) через меню на странице.
Курсы валют обновляются автоматически, а система оплаты поддерживает многовалютные транзакции, что делает покупки простыми для международной аудитории.
Блок с рекомендациями
Персонализировали рекомендации товаров
Мы внедрили систему, которая анализирует действия пользователя на сайте и предлагает подходящие товары. Алгоритм учитывает предыдущие покупки, просмотренные товары и добавленные в избранное, чтобы предлагать товары, которые могут заинтересовать пользователя.
Отзывы клиентов
Добавили возможностью прикреплять изображения к отзывам
Теперь пользователи могут не только писать отзывы, но и загружать фотографии приобретенных товаров. Это помогает другим покупателям лучше оценить продукт перед покупкой и увеличивает доверие к продукции.
При разработке использовали комбинацию инструментов: Liquid — для вывода отзывов и JavaScript — для загрузки и отображения изображений.
Специальное предложение
Внедрили динамическое ценообразование
Система динамического ценообразования автоматически меняет цену товаров в зависимости от спроса, акций или наличия продукции на складе.
Это помогает продавцу гибко управлять ценами и предлагать актуальные предложения.
Использовали Shopify Scripts для настройки автоматического ценообразования и API платформы для отображения актуальных данных.
Резервирование товара при поступлении на склад
Добавили автоматическое предзаказное резервирование
Функция для товаров, которые временно отсутствуют на складе. Когда товар поступает в продажу, покупатель получает уведомление, оплачивает его, и заказ отправляется к клиенту. Это позволяет сохранить продажи, даже если товара нет в наличии.
При разработке использовали Shopify API для обработки заказов и уведомлений и вебхуки для автоматического отслеживания статуса товаров на складе.
Калькулятор КБЖУ с движком рекомендаций
Разработали калькулятор спортивного питания
Калькулятор помогает пользователям выбирать продукты под их цели. Пользователь вводит свои пол, рост, вес, уровень физической активности и цель (похудение, набор массы или поддержание формы), а калькулятор рассчитывает дневную норму калорий, белков, жиров и углеводов (КБЖУ). После расчета система автоматически подбирает товары из ассортимента магазина для достижения результата.
Калькулятор размещен на отдельной странице и интегрирован с каталогом товаров.
Для реализации использовали кастомный код на JavaScript, а API Shopify — для получения и отображения данных в реальном времени.
Этапы разработки
Аналитика
Провели анализ сайтов-конкурентов и выбрали несколько референсов, которые помогли задать направление для разработки. Основное внимание уделялили улучшению пользовательского опыта, чтобы магазин выделялся на фоне конкурентов простой навигацией и удобством покупок.
Дизайн
Клиент поделился своим видением дизайна, и наша команда дизайнеров провела несколько раундов согласований, чтобы учесть все пожелания. В итоге был разработан кастомный дизайн, который адаптировали под существующую тему Shopify.
Мы добавили уникальные блоки и страницы, сохранив при этом совместимость с платформой. Это позволило создать индивидуальный интерфейс, опираясь на возможности выбранной темы, что ускорило внедрение и сделало проект более эффективным по времени.
Верстка
Перенесли разработанный дизайн в тему Shopify, используя стандартные блоки и кастомные элементы проекта. Для этого мы изменили исходный код шаблона на Liquid, который Shopify использует для настройки тем.
Некоторые элементы, например, карточки товаров и калькулятор спортивного питания, были сделаны с нуля, что добавило сайту уникальности и сделало его удобным и интересным для пользователя.
Использовали JavaScript и CSS для настройки стандартных компонентов и плавного внедрения кастомных элементов, Это помогло сохранить баланс между оригинальным дизайном и стабильностью платформы.
Бэкенд и интеграции
Настроили и интегрировали функции, которые расширили возможности Shopify и поддержали уникальный функционал магазина. Так как Shopify ограничивает возможность изменений в серверной части, основные задачи решались через API-интеграции и настройку приложений.
Интегрировали платежные сервисы и системы доставки, которые обеспечили удобное и безопасное управление заказами. Для автоматического предзаказа и динамического ценообразования разработали приложения с использованием Shopify API. Это позволило обрабатывать заказы в реальном времени и гибко управлять ценами.
Связали Shopify с CRM-системой HubSpot, чтобы автоматизировать передачу данных о клиентах и их покупках.
Эти решения позволили клиенту эффективно управлять магазином и расширить его функционал без необходимости глубоких изменений в базовом коде Shopify.
Тестирование и наполнение контентом
Провели полную проверку всех функций интернет-магазина. Протестировали стандартные функции Shopify и кастомные решения, включая систему предзаказов, калькулятор спортивного питания и динамическое ценообразование.
Начали с ручного тестирования, проверяя различные сценарии пользователя: оформление заказа, работу с каталогом, калькулятор и систему фильтров.
Провели нагрузочный тест, чтобы убедиться в стабильной работе сайта при пиковых посещениях, особенно в периоды акций и распродаж.
После завершения тестирования магазин прошел финальные улучшения, и мы передали клиенту полностью готовый и проверенный продукт, готовый к запуску.
Результаты
-
Вывели бизнес в онлайн
Успешно запустили проект в онлайн. Теперь продукция клиента доступна широкой аудитории в Великобритании и за её пределами.
-
Продажи выросли в 2,5 раза, а средний чек на 30%
Магазин получился удобным, с персонализированными рекомендациями и интересным функционалом, который улучшил взаимодействие с покупателями.
-
Масштабирование бизнеса
Клиент собирается выходить на новые рынки и добавлять еще больше категорий в каталог, а мы будем ему в этом помогать.
