Разработка кастомной темы 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.