ЗадачаCOCOSBEAUTY — косметика для тела, рук, бровей и ванны, которую бренд делает сам из натурального сырья. Товар уже продавался на Золотом Яблоке и Wildberries, но там он стоит в одном ряду с сотнями баночек, и рассказать, чем он отличается, негде. Нужен был собственный магазин, который покажет бренд целиком: что внутри каждой баночки, как продукт выглядит в руках и кто за ним стоит, — и не заставит покупателя ходить по десяткам страниц.
РешениеВесь каталог собран на одной странице: меню ведёт якорями к разделам «Для ванной», «Для тела», «Для рук», «Для бровей», «Для душа», и в каждом — карусель карточек с ценой и кнопкой «Купить». Между витринами стоят блоки, которые продают без слова «купи»: состав скраба и геля с фото каждого ингредиента, вертикальные видео с продуктом в руках, история основательницы Дарьи Моруновой и подарочный бокс. Тёмный фон, тропические листья и розовый акцент из упаковки делают сайт продолжением самой баночки.
Стек- Joomla
- Bootstrap 5
- jQuery
- Owl Carousel
- AOS
- GTranslate
РезультатМагазин на 26 товаров в шести категориях с корзиной, бокс за 13 000 ₽ с возможностью собрать свой набор, −10% на первый заказ за подписку на рассылку и переход на маркетплейсы для тех, кому так привычнее. Английская версия включается флажком в шапке.
Главные фишки
01Каталог на одной странице
Пункты меню — не отдельные страницы, а якоря. Покупатель листает витрину как ленту: новинки, хиты, уход для тела, рук и бровей. Каждая категория — карусель, поэтому длинный ассортимент не растягивает страницу, а метки NEW и HIT сразу подсказывают, с чего начать.
02Состав вместо обещаний
Для натуральной косметики главный аргумент — что внутри. Блоки «Основные компоненты» разбирают скраб и гель для душа: кокосовая стружка, масло ши, рисовая пудра, масла авокадо и макадамии. У каждого ингредиента фото и одна строка о том, что он делает с кожей.
03Лицо бренда
Дарья Морунова рассказывает о бренде в видео, её подпись прорисовывается на экране линией, а цитата «Все женщины красивы» занимает отдельный экран. Рядом пять вертикальных роликов: продукт в руках, текстура, нанесение — то, чего не видно на фото с маркетплейса.
04Повод купить здесь
Подарочный COCOS BOX с пятью продуктами и сборкой набора на выбор, промокод −10% на первый заказ за подписку и условия для дилеров в подвале. А тем, кто привык к маркетплейсам, сайт сам даёт ссылки на Золотое Яблоко и Wildberries.
26товаров в шести категориях
8ингредиентов с фото и описанием
5видео с продуктом в руках
Сделаю похожий проект для вас – сам, от макета до запуска
Ключевые экраны
01Цель: передать настроение бренда за секунду
Первый экран
Видео с тропическими листьями, крупный логотип и сразу под ним новинки.
- 1На фоне видео с листьями монстеры, поверх — логотип во всю ширину и слоган «Love. Cocos. Beauty.»: тропики и кокос из названия без лишних слов.
- 2Меню — это категории ухода. Каждый пункт прокручивает страницу к своей витрине, рядом корзина и переключатель языка.
- 3Соцсети бренда всегда под рукой: VK, Telegram и YouTube у правого края.
- 4Первая витрина — новинки. Метка NEW, название, назначение, цена и кнопка «Купить» прямо на карточке, без перехода на страницу товара.
02Цель: объяснить, за что платить
Основные компоненты
Между витринами — разбор состава, ради которого бренд и выбирают.
- 1Заголовок называет конкретный продукт: не «натуральная косметика» вообще, а что лежит в банке Body Scrub.
- 2Продукт снят как в рекламе: банка, лист монстеры и всплеск молока. Тот же приём повторяется у геля для душа ниже по странице.
- 3Четыре ингредиента, у каждого фото и короткая польза: кокосовая стружка отшелушивает, масла ши и миндаля питают, рисовая пудра выравнивает, витамин Е держит влагу.
03Цель: показать продукт вживую и человека за ним
Видео и основательница
То, чего нет на маркетплейсе: текстура в движении и история бренда от первого лица.
- 1Пять вертикальных роликов: продукт в руках, текстура, нанесение. Формат как в сторис, привычный для аудитории.
- 2Розовый акцент в заголовке тот же, что на упаковке и кнопках «Купить».
- 3Дарья Морунова рассказывает, что Cocos — это ещё студия со своими технологиями и школа для бьюти-мастеров: косметику делают люди, которые сами ей работают.
- 4Видеообращение основательницы и её подпись, которая прорисовывается линией при появлении блока.
04Цель: поднять средний чек
COCOS BOX
Готовый подарок вместо одной баночки и короткие витрины для остальных категорий.
- 1Наполнение бокса нарисовано линейными иконками: мыло для бровей, баттер, крем для рук, гель для душа и масло для загара.
- 2Рядом аргумент про собственное производство и статус ЭКО-продукта и обещание собрать набор из любимых продуктов покупателя.
- 3Цена 13 000 ₽ и кнопка «В корзину» на одной линии: бокс покупается так же, как обычный товар.
- 4Ниже три короткие витрины рядом: для рук, для душа, для лица. Маленькие категории не растягивают страницу отдельными блоками.
Нужен похожий проект?
Расскажите о задаче, и я предложу решение и сроки.