Інтернет-магазин · 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 — кошик з підсумком і промокодом — Кошик: одна повноширока таблиця товарів з лічильником і ціною за штуку, smitник для очистки, 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.