Интернет-магазин · WooCommerce · 2026

Sportlabs — интернет-магазин спортивного питания

WooCommerce-магазин спортивного питания на 200+ брендов. Кастомный single-step checkout под Новую Почту, акционный движок с countdown и промокодами, переписанные с нуля карточка товара, корзина и checkout.

Хочу такой же проект Открыть сайт

Контекст

Sportlabs — украинский интернет-магазин спортивного питания с каталогом на 19 товарных категорий и более 200 мировых брендов (Optimum Nutrition, MuscleTech, Olimp Labs, Activlab, Muscle Pharm, BSN, Dymatize, Kevin Levrone, MST Nutrition и другие). Задача — построить на WordPress + WooCommerce магазин, который держит одновременно три роли: витрина бренда с собственной айдентикой, полноценный e-commerce с фильтрами и checkout, и промо-движок с акциями, countdown-таймерами и промокодами. Стандартная WC-сборка такую сложность не вытягивает — переписали ключевые шаблоны (карточку товара, корзину, checkout) под брендовый тёмно-зелёный UI.

Что сделали на главной

Hero с ключевым оферным месседжем

Первый экран работает как баннер бренда: полноэкранное фото атлета с гантелью на тёмно-зелёном градиенте слева, типографический H1 «Питание для тех, кто не сдаётся.» с акцентным смешением белого и серого, дескриптор «Спортивное питание для тех, кто выбирает лучшее. 100% сертифицированные продукты мировых брендов» и единственный зелёный CTA «Перейти в каталог». Справа в hero — две физические упаковки ON Gold Standard Whey, которые работают и как продуктовый тизер, и как композиционный баланс с фотобаннером.

Sportlabs — полная главная страница — Главная страница полностью: hero с атлетом и двумя банками ON Whey, марки-лента брендов, рекомендуемые товары в категориях, 4 quick-link карточки категорий, MST Nutrition промо-блок, «Почему выбирают Sportlabs?» с видео и 4 USP, блок блога, интенсив-блок 7% за регистрацию.

Марки-лента с 30+ брендами

Под hero — горизонтально прокручиваемая лента-карусель с логотипами 30+ брендов (Universal, MST, Now Foods, Nutrend, USN, Olimp, Be First и т. д.). Лента имеет круглые карточки на светлом фоне, что контрастирует с тёмным hero — это и визуальное «дыхание», и социальное доказательство «у нас тут серьёзные бренды, а не безымянный noname».

Табированный блок «Рекомендуемые товары»

Свайпер с 4 рядами товарных карточек и табами-фильтрами сверху: ВСЕ / Аминокислоты / Экдистероны / Жиросжигатели / Протеины. Каждый таб переключает набор карточек без перезагрузки. На карточке — бейдж скидки (-15%), фото продукта на светлом фоне, название, перечёркнутая старая цена и новая в зелёном, кнопка «Добавить в корзину» (AJAX, без перехода на товар).

Quick-link карточки категорий + промо-блок MST

4 широкие карточки топ-категорий (Протеин, Гейнеры, Аминокислоты, Креатин) с тематическим фото товара, затем — двухсегментный промо-блок: слева большая карточка MST Nutrition («Немецкое качество, проверенное годами»), справа — фото сборки Solgar/Olimp как квази-полка магазина. Это отдельный рекламный инвентарь, который можно перепродавать брендам как preferred placement.

«Почему выбирают Sportlabs?» с видео и 4 USP

Контент-секция в split-layout: слева YouTube-плеер-перекрытие («Почему выбирают Sportlabs?») с кастомной заглушкой, справа — длинный текст о миссии магазина с CTA на каталог. Снизу — 4-карточный блок USP с зелёными иконками: 200+ брендов, Сертификаты качества, Доставка 1–3 дня, Принимаем заказы без выходных. Замыкается главная 7% регистрационным bonus-блоком с email-формой на тёмно-зелёной плитке.

Каталог /shop/ — фильтры и пагинация

Архив построен в трёх этажах. Сверху — полноширокий hero «Большой выбор спортивного питания» с фитнес-фото. Под ним — горизонтальная лента субкатегорий-карточек (плиток) как быстрый переключатель. Основная часть — двухколоночная сетка: слева сайдбар с accordion-фильтрами (Категории, Бренды, Цена), справа 4-колоночная сетка карточек товаров с бейджем скидки, акционным промо-плакатом ON Gold Standard как «card-banner» и нумерованной пагинацией (1, 2, 3, … 240, 241). Внизу архива — SEO-секция с собственным H1-блоком «Креатин — что это за волшебная добавка?» (Что такое креатин / Для чего нужен / Формы креатина), внутренняя перелинковка тегов и блок «Рекомендуемые товары» из 4 карточек.

Sportlabs — каталог /shop/ с фильтрами и пагинацией — Каталог /shop/: hero «Большой выбор спортивного питания», горизонтальная лента субкатегорий, сайдбар-фильтры (Категории / Бренды / Цена), 4-колоночная сетка с акционным card-banner ON Gold Standard, нумерованная пагинация и SEO-блок с внутренней перелинковкой тегов.

Карточка товара — акционный движок, FAQ и табированная информация

Карточку товара переписали с нуля под брендовый e-commerce-флоу. Слева — большое фото товара на светлом фоне с favourite-heart иконкой. Под фото — табированная панель Описание / Состав / Отзывы (2), ниже — full-width prose-описание товара и accordion-FAQ на 3 вопроса («Сколько порций в банке», «Как правильно принимать», «Нужна ли фаза загрузки»). Справа — sticky-блок покупки: H1-название, статус «В наличии» с зелёной точкой, код товара, ссылка на отзывы, категория с иконкой, старая/новая цена, счётчик количества и зелёный CTA «Добавить в корзину». Под CTA — инфо-карточка «Доставка» с двумя способами (Новая Почта / Курьером по адресу) и ETA «1–2 дня». Поверх sticky-блока шаблон поддерживает опциональный промо-баннер с промокодом и countdown-таймером — админ включает на период акции, после завершения убирает, чтобы не показывать пустой счётчик.

Sportlabs — карточка товара Kevin Levrone Gold Creatine — Карточка товара: левая колонка с фото, табами Описание/Состав/Отзывы и accordion-FAQ; правая sticky-колонка с ценой (с отметками скидки), счётчиком и CTA «Добавить в корзину», info-карточка «Доставка» с Новой Почтой и курьером. Внизу — карусель «Рекомендуемые товары» из 5 креатинов-альтернатив.

Корзина — минималистичная таблица с промокодом

Корзину сделали максимально лаконичной: одна полноширокая таблица-карточка с 4 колонками (товар с фото и названием / цена за 1 шт / счётчик количества / итого), кнопка-корзина «Очистить корзину» справа сверху, sticky-summary внизу карточки с итогом «Итого: NNN ₴», secondary-CTA «Использовать промокод» и primary-CTA «Оформить заказ». Под корзиной — карусель «Рекомендуемые товары» (cross-sell на 5 карточек).

Sportlabs — корзина с итогом и промокодом — Корзина: одна полноширокая таблица товаров со счётчиком и ценой за штуку, корзина для очистки, sticky-summary с итогом и двумя CTA («Использовать промокод» / «Оформить заказ»), ниже — кросс-селл карусель.

Кастомный single-step checkout под Новую Почту

Стандартный WooCommerce checkout (multi-step, с полями адреса, штата, ZIP, billing/shipping split) для украинского магазина спортпита — это фрикция, которая убивает конверсию. Поэтому переписали checkout в single-step с тремя обязательными полями (телефон в формате +380, Имя Фамилия, Email) + блок «Выберите город и способ доставки» (radio: Новая почта / Самовывоз, два select-and-search дропдауна «Выберите населённый пункт» / «Выберите отделение или почтомат») + блок «Выберите способ оплаты» (Банковский перевод / Наложенный платёж) + textarea «Комментарии к заказу» + полноширокий зелёный CTA «Подтвердить заказ». Справа — sticky-карточка «Мой заказ» с миниатюрой товара, количеством, ценой, итогом «Итого: NNN ₴» и собственным input-ом «Введите промокод».

Sportlabs — кастомный single-step checkout — Кастомный checkout: одна колонка с 3 контактными полями, выбором перевозчика (Новая почта / Самовывоз) с autocomplete-поиском городов и отделений, способом оплаты и CTA; справа — sticky-карточка заказа с промокодом.

Страница «О нас» — миссия, принципы и вся структура каталога

Inner-страницы используют единый шаблон с полноширокой медиа-hero (фото атлета с резинкой + тёмно-зелёный overlay, breadcrumbs, H1, дескриптор). На «О нас» дальше — полноширокий текст миссии, 5-карточная сетка «Наши принципы» (Проверено временем / Просто купить качественно / Цена без лишних наценок / Доставка — это просто / Человек, а не бот) с зелёной иконкой на каждой карточке. Ниже — полная тайл-сетка всех 19 категорий каталога (Аксессуары, Аминокислоты, Батончики, Витамины, BCAA, Гейнеры, Для суставов, До/после тренировки, Экдистероны, Жиросжигатели, Заменители питания, Красота и здоровье, Креатины, Повышение тестостерона, Протеин, Спец. препараты, Наборы, Спортивный инвентарь), которая работает как вторичная навигация + SEO-блок. Замыкает страницу секция «Подписывайся на наши соцсети» с 4 квадратными CTA-карточками (TikTok / YouTube / Instagram / Telegram) в фирменных цветах соцсетей.

Sportlabs — страница «О нас» — «О нас»: медиа-hero, 5-карточная сетка «Наши принципы» с зелёными иконками, тайл-сетка всех 19 категорий каталога как SEO-навигация, замыкающий 4-карточный блок подписки на соцсети.

«Доставка и оплата» — 4-stepper и блок возвратов

Отдельная LP, построенная как stepper «Как сделать заказ» с 4 иллюстрированными карточками (1. Оформление корзины / 2. Заполнение данных / 3. Выбор оплаты / 4. Получайте посылку). Ниже — секция «Условия возврата и обмена» с юридическим дисклеймером (спортпит не подлежит возврату) и 4-карточной сеткой (Возврат при наличии дефекта / Условия возврата / Что делать при обнаружении дефекта / Сроки рассмотрения). Каждая карточка — это чек-лист из 3–5 буллетов. Это снимает 80% типичных предзаказных вопросов и снижает нагрузку на горячую линию.

Sportlabs — «Доставка и оплата» — «Доставка и оплата»: 4-stepper «Как сделать заказ» с иконками, секция «Условия возврата и обмена» с юридическим дисклеймером и 4-карточной сеткой (дефекты, условия возврата, инструкция действий, сроки).

Контакты — минималистичная info-карточка

Страница контактов — это одна полноширокая info-карточка на 4 колонки (Адрес / График работы / Телефон / Email) с зелёными иконками, без формы обращения (потому что с лидами работают через горячую линию 0 800 и соцсети). Ниже — тот же 4-карточный блок подписки на TikTok / YouTube / Instagram / Telegram, что и на «О нас» — чтобы закрыть пользователя на какой-нибудь канал связи.

Sportlabs — контакты — Контакты: одна 4-колоночная info-карточка с адресом, графиком, телефоном горячей линии 0 800 и email, замыкающий блок подписки на 4 соцсети.

Результат

Sportlabs запустился как полноценный WordPress + WooCommerce магазин с 19 товарных категорий × 200+ брендов × ~240 страниц каталога. Все ключевые transactional-страницы (карточка товара, корзина, checkout) переписаны с нуля под брендовый тёмно-зелёный UI и логику украинского рынка: акционный движок с countdown и промокодами, кастомный single-step checkout под Новую Почту и Укрпочту вместо дефолтного multi-step WC-флоу, сквозной accordion-FAQ на карточках товаров. Inner-страницы («О нас», «Доставка и оплата», «Контакты») спроектированы как inline-LP с контентом, который снимает типичные предзаказные вопросы и сокращает нагрузку на горячую линию 0 800.