custom themeinternationalperformanceshopify 2.0

one tunne — інтернет-магазин тюнінгу для електросамокатів

Власна Shopify-тема з нуля для бренду тюнінгу електросамокатів: підбір деталей за моделлю самоката, 5 мов, продажі по всьому світу. Реальні відвідувачі отримують сайт з LCP 0,96 с — усі Core Web Vitals у зеленій зоні.

0,96 с LCP у реальних відвідувачів
100 PageSpeed desktop
5 мов вітрини
↗ onetunne.com
01

про клієнта

ONE TUNNE виготовляє деталі для трюкової їзди на електросамокатах Kukirin: wheelie bar, кермові демпфери, захист, гріпси та підсвітку. Деталі зі сталі 5 мм з лазерним зварюванням і порошковим фарбуванням, доставка включена в ціну.

Бренд продає в Європу, США, Канаду, на Близький Схід, в Азію та Південну Америку. Покупці приходять переважно з TikTok і з телефона. У бренду є колаборація з райдером Kenzy: wheelie bar з його іменем у дизайнерській упаковці.

02

задача

Магазин працював на стандартній темі. Вона не передавала характер бренду й не відповідала на головне питання покупця: чи підійде деталь до його самоката. У Kukirin 7 моделей, і кожна деталь сумісна лише з частиною з них. Покупці писали в WhatsApp, щоб це уточнити.

Потрібна була власна тема за дизайн-концептом бренду, яка сама підказує сумісність, швидко відкривається на мобільному й дає власнику змінювати контент без програміста.

→Власна тема Online Store 2.0 за дизайн-концептом бренду, без готового шаблону
→Підбір деталей за моделлю самоката на всіх сторінках магазину
→Сторінки моделей самокатів і таблиця сумісності
→Сторінка товару з вибором кольору, допами й терміном доставки за країною
→Кошик-дровер і фільтри колекцій без перезавантаження сторінки
→Вітрина 5 мовами: англійська, французька, німецька, італійська, іспанська
→Відгуки Judge.me та відстеження замовлення в стилі теми
→Швидкість: зелені Core Web Vitals на мобільному трафіку з TikTok
→SEO та AEO: структуровані дані, доступ AI-пошуковиків
03

рішення

Тему написали з нуля на офіційній основі Shopify Skeleton: 48 секцій, 35 блоків, 4 колірні схеми. Кожна секція й блок налаштовуються в редакторі Shopify, тому команда бренду збирає сторінки сама. Дизайн перевіряли скриптом: він порівнює розміри, шрифти й відступи на сторінках із макетами.

гараж: підбір за моделлю

Покупець один раз обирає свій самокат, і на всіх сторінках видно, які деталі до нього підходять. Таблиця сумісності підсвічує його модель. Кожна з 7 моделей Kukirin має свою сторінку з відповідними деталями — вона ж посадкова для пошуку.

сторінка товару

Колір перемикає фото й ціну без перезавантаження. Блок допів додає в кошик одразу кілька деталей. Термін доставки показується за країною покупця, залишок — лише за реальним складом. На мобільному кнопка купівлі завжди під рукою.

каталог і кошик

Фільтри за наявністю, ціною й кольором застосовуються миттєво. Під час наведення на колір у картці показується фото цього варіанта. Кошик відкривається збоку й оновлюється без перезавантаження сторінки.

швидкість

Без JS-фреймворків: увесь JavaScript теми — близько 24 KB у стиснутому вигляді. Шрифти на власному хостингу, CSS за секціями, зсувів верстки немає. Результат у реальних відвідувачів: LCP 0,96 с, INP 94 мс, CLS 0.

5 мов

Магазин працює англійською, французькою, німецькою, італійською та іспанською. У коді теми немає жодного жорстко прописаного рядка: усі тексти винесені в переклади, а окремий скрипт перевіряє, що жоден ключ не загубився.

SEO та AEO

Структуровані дані: Product з доставкою та поверненням, рейтинг, FAQ, Article, хлібні крихти, сумісність деталі з моделлю. robots.txt відкритий для ChatGPT, Perplexity, Claude та Google AI.

03.1

як виглядає

Ключові екрани магазину — desktop і mobile

desktop · головна
desktop · головна
mobile
mobile
desktop · сторінка товару
desktop · сторінка товару
mobile
mobile
desktop · колекція з фільтрами
desktop · колекція з фільтрами
mobile
mobile
desktop · відстеження замовлення
desktop · відстеження замовлення
mobile
mobile
04

процес

день 1

дизайн-система й каркас

Токени дизайну, 4 колірні схеми, шрифти, усі шаблони магазину, шапка, підвал, головна, товар, кошик, колекції та SEO. Кожен етап закривався автоматичними перевірками.

тиждень 1

дані й підбір за моделлю

Метаоб'єкти моделей самокатів, метаполя сумісності й характеристик, гараж, сторінки моделей, таблиця сумісності. Наповнення реальними товарами.

тижні 2–3

доопрацювання й запуск

Миттєві фільтри, фото варіанта в картці, відгуки Judge.me, відстеження замовлення, колаборація Kenzy на головній. Запуск теми й заміри швидкості на живому сайті.

Розробка йшла з AI-агентами Claude Code під контролем розробника. Після кожного етапу автоматично перевіряли код теми, переклади, відповідність макету, доступність і швидкість. Фото й тексти товарів готувала команда бренду; ми підготували інструкцію з роботи з темою в редакторі.

05

команда

lead developer
Архітектура теми, Liquid, метаоб'єкти й метаполя, Shopify API, code review
frontend developer
Верстка за концептом, CSS за секціями, JavaScript без фреймворків, адаптивність
QA & performance
Звірка з макетами, доступність, переклади, заміри швидкості, структуровані дані
06

результат

✓Власна тема за концептом бренду замість стандартного шаблону
✓Усі Core Web Vitals у зеленій зоні в реальних відвідувачів: LCP 0,96 с, INP 94 мс, CLS 0
✓PageSpeed 100 на desktop для головної, товару й колекції
✓Accessibility 100 і SEO 100 на всіх перевірених сторінках
✓Покупець бачить сумісність деталі зі своїм самокатом без питань у WhatsApp
✓Вітрина 5 мовами, продажі по всьому світу
✓Команда бренду сама збирає сторінки в редакторі Shopify

є схожий проєкт?

Розкажіть нам про ваші завдання — підготуємо оцінку протягом 24 годин. Безкоштовно та без зобов’язань.

обговорити проєкт →інші кейси

Налаштування теми Shopify

TradeMinister виконує повну кастомізацію тем Shopify за макетами з Figma. Кожен розділ перебудовується з нуля з збереженням сумісності з Theme Editor. Послуга кастомізації від 500 у.о.

Shopify під ключ

Повний цикл розробки магазинів на Shopify: від аналізу завдань до запуску. Адаптивна верстка, SEO, інтеграції з українськими платіжними системами та доставкою.

Інші кейси

Перегляньте портфоліо TradeMinister: всі кейси. Магазини одягу, косметики, електроніки, харчових продуктів і добавок. Від кастомізації теми до повного магазину під ключ. Замовити проєкт →