Розробка кастомної теми Shopify (Liquid)
Ми розробляємо кастомні теми Shopify на Liquid, коли жодна з готових тем не відповідає вашому дизайну, структурі секцій або вимогам продуктивності. Наша команда має 10-річний досвід у веб-розробці та реалізувала понад 50 проєктів на Shopify. Наші інженери — сертифіковані Shopify Experts, створюють унікальну тему з нуля або глибоко кастомізують існуючу, використовуючи Liquid, CSS (Tailwind або BEM) та JavaScript (Vanilla JS, Web Components або Alpine.js). Такий підхід дає повний контроль над інтерфейсом, версткою та логікою магазину.
Які проблеми вирішує кастомна тема?
Готові теми часто страждають від неоптимальної архітектури: надлишковий CSS, важкі скрипти, відсутність адаптації під специфіку товарів. Кастомна тема усуває ці проблеми:
- Продуктивність. Прибираємо невикористаний код, оптимізуємо завантаження шрифтів та зображень. Кастомна тема в середньому завантажується на 30–50% швидше, ніж тема з Theme Store.
- Унікальний дизайн. Будь-яка секція, будь-який блок — без обмежень Theme Editor. Реалізуємо макети будь-якої складності: паралакс, анімації, нестандартний кошик.
- Гнучкість даних. Використовуємо метаполя Shopify для зберігання кастомної інформації (дата поставки, артикули, розміри). Налаштовуємо фільтрацію та сортування під каталог.
Як ми розробляємо кастомну тему?
Кожен проєкт починається з аудиту поточної теми (якщо вона є) та узгодження архітектури. Ми використовуємо стандарт Online Store 2.0 — це обов'язкова вимога для всіх сучасних тем. В основі лежать JSON-шаблони та секції з вкладеними блоками.
Приклад структури секції з кастомними налаштуваннями:
{%- comment -%} sections/product-hero.liquid {%- endcomment -%} <div class="product-hero" style="--accent: {{ section.settings.accent_color }}"> {% for block in section.blocks %} {% case block.type %} {% when 'title' %} <h1 class="product-hero__title">{{ product.title }}</h1> {% when 'price' %} <div class="product-hero__price"> {{ product.selected_or_first_available_variant.price | money }} </div> {% when 'add_to_cart' %} <button type="submit" form="product-form-{{ section.id }}" class="btn btn--primary" {% unless product.available %}disabled{% endunless %}> {{ block.settings.button_text | default: 'До кошика' }} </button> {% endcase %} {% endfor %} </div> {% schema %} { "name": "Product Hero", "tag": "section", "class": "section-product-hero", "settings": [ { "type": "color", "id": "accent_color", "label": "Акцентний колір", "default": "#0066cc" } ], "blocks": [ { "type": "title", "name": "Назва товару", "limit": 1 }, { "type": "price", "name": "Ціна", "limit": 1 }, { "type": "add_to_cart", "name": "Кнопка «До кошика»", "limit": 1, "settings": [ { "type": "text", "id": "button_text", "label": "Текст кнопки", "default": "До кошика" } ] } ], "presets": [ { "name": "Product Hero", "blocks": [ { "type": "title" }, { "type": "price" }, { "type": "add_to_cart" } ] } ] } {% endschema %} Для динамічних елементів використовуємо Web Components або Alpine.js — вони не потребують збірки та ідеально лягають в екосистему Shopify.
Чому важливо оптимізувати продуктивність теми?
Core Web Vitals — прямі фактори ранжування в Google, і кастомна тема дозволяє керувати кожним байтом. Ми критичний CSS інлайнимо в <head>, некритичний завантажуємо асинхронно. Шрифти підключаємо з font-display: swap і preconnect. Зображення обробляємо через CDN з lazy-loading та адаптивними роздільностями.
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', widths: '400, 800, 1200', sizes: '(max-width: 768px) 100vw, 50vw' }} Згідно з даними Shopify, покращення Core Web Vitals безпосередньо впливає на конверсію. Результати оптимізації нашої теми:
| Метрика | До оптимізації | Після |
|---|---|---|
| LCP | 4.2 с | 1.8 с |
| TBT | 350 мс | 120 мс |
| CLS | 0.15 | 0.02 |
Як кастомна тема впливає на конверсію?
Покращення LCP на 2.4 секунди та зниження CLS до 0.02 зменшує показник відмов і збільшує час на сайті. За нашими даними, після впровадження кастомної теми конверсія в середньому зростає на 15–20%. Це пов'язано з тим, що користувачі не чекають завантаження та не стикаються зі зміщенням контенту. Додатково ми впроваджуємо мікророзмітку, яка підвищує CTR у видачі.
Чому варто інвестувати в кастомну тему?
Готова тема коштує дешево, але її продуктивність та гнучкість обмежені. Кастомна розробка — це інвестиція, яка окупається за рахунок зростання продажів, зниження навантаження на сервер і зменшення витрат на доопрацювання. Ви отримуєте контроль над кожним елементом, а наша гарантія на код та місячна підтримка забезпечують спокій. Зв'яжіться з нами, щоб обговорити ваш проєкт і отримати попередню оцінку. Замовте консультацію інженера — ми допоможемо розібратися, чи потрібна вам кастомна тема.
Процес роботи та що входить
- Аналітика та аудит — перевіряємо поточну тему, збираємо вимоги щодо дизайну та функціоналу.
- Проєктування — розробляємо структуру секцій, схему метаполів, маршрути.
- Розробка — пишемо код на Liquid, налаштовуємо бандлер (Vite або Webpack), інтегруємо додатки через App Block.
- Тестування — функціональне (кошик, чекаут), крос-браузерне, продуктивність (Lighthouse, WebPageTest).
- Деплой та документація — публікуємо тему, передаємо доступи, інструкції з редагування.
Відмітимо: що входить в результат:
- Повністю кастомна тема з унікальним дизайном.
- Оптимізовані зображення, шрифти, скрипти.
- Документація по секціях та налаштуваннях.
- Навчання редакторів роботі в Theme Editor.
- Гарантія підтримки протягом місяця після здачі.
Порівняння кастомної та готової теми
| Параметр | Готова тема | Кастомна тема |
|---|---|---|
| Індивідуальний дизайн | Обмежений | Необмежений |
| Продуктивність | Середня (залежить від коду) | Висока (оптимізація під проєкт) |
| Гнучкість секцій | Фіксовані | Будь-які блоки та налаштування |
| Оновлюваність | Автоматичні оновлення | Під контролем розробника |
| Вартість | Низька (single purchase) | Індивідуальна |
Терміни орієнтовно
- Розробка з нуля за макетом (до 15 типів сторінок) — 3–6 тижнів.
- Кастомізація існуючої теми під брендбук зі збереженням оновлюваності — 1–2 тижні.
- Рефакторинг legacy-теми в OS 2.0 — 2–3 тижні.
Точна вартість розраховується після аудиту та затвердження ТЗ. Отримайте консультацію інженера — напишіть нам.
Технічні деталі архітектури OS 2.0
Використовуйте JSON-шаблони для сторінок, секції з підтримкою blocks, app blocks для інтеграції додатків. Детальніше в офіційній документації Shopify.