custom themeinternationalperformanceshopify 2.0

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

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

0,96 с LCP у реальных посетителей
100 PageSpeed desktop
5 языков витрины
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 часов. Бесплатно и без обязательств.