Разработка и настройка Shopify Sections и Blocks

Вы открываете Theme Editor, меняете текст в секции, а на сайте — ничего. Или блоки съезжают, или настройки не применяются. Знакомая боль? Мы, как разработчики с 8-летним опытом в Shopify, знаем каждую ловушку. Расскажем, как правильно настроить Sections и Blocks, чтобы команда контента работала без вас, а редактор тем не ломал вёрстку.

Online Store 2.0 дал мощный инструмент — секции с блоками. Но использовать их нужно осознанно. Неправильная схема превращает гибкость в кошмар: блоки перекрываются, настройки не сохраняются, а пресеты не появляются. Ниже — практика, которая избавит от этих проблем.

Как избежать конфликтов блоков?

Каждый блок внутри секции должен иметь уникальный type. Если два блока имеют одинаковый type, они будут вести себя как один — настройки перезапишутся. Используйте разные type или ограничивайте количество через max_blocks. Также обязательно добавляйте атрибут {{ block.shopify_attributes }} — он позволяет Theme Editor правильно идентифицировать каждый блок.

Почему статичные секции опасны?

Статичные секции жёстко прописаны в layout/theme.liquid. Их нельзя переместить или удалить из редактора — только через код. Это увеличивает время правок в 3 раза по сравнению с динамическими секциями. Для всех новых проектов мы рекомендуем динамические секции: они управляются через JSON-шаблон страницы, что даёт полный контроль контент-менеджеру без доступа к коду.

Как устроены Sections

Секция — файл в /sections/ с Liquid-шаблоном и JSON-схемой в одном файле. Схема описывает настройки секции и типы блоков, которые она принимает. Ключевое поле — presets: без него секция не появится в списке «Добавить секцию». Подробнее про Liquid можно почитать в Википедии.

Минимальная секция:

{%- comment -%} sections/text-banner.liquid {%- endcomment -%} <div class="text-banner text-banner--{{ section.settings.alignment }}"> <div class="container"> {% if section.settings.heading != blank %} <h2>{{ section.settings.heading }}</h2> {% endif %} {% if section.settings.text != blank %} <div class="text-banner__body">{{ section.settings.text }}</div> {% endif %} </div> </div> {% schema %} { "name": "Текстовый баннер", "tag": "section", "class": "section-text-banner", "settings": [ { "type": "text", "id": "heading", "label": "Заголовок", "default": "Заголовок секции" }, { "type": "richtext", "id": "text", "label": "Текст" }, { "type": "select", "id": "alignment", "label": "Выравнивание", "options": [ { "value": "left", "label": "По левому краю" }, { "value": "center", "label": "По центру" }, { "value": "right", "label": "По правому краю" } ], "default": "center" } ], "presets": [ { "name": "Текстовый баннер" } ] } {% endschema %} 

Статичные vs динамические секции: сравнение

Динамические секции выигрывают в 3 раза по скорости внесения правок. Это особенно важно для магазинов, где контент меняется еженедельно.

Типы настроек (settings types)

Blocks внутри секции

Блоки — динамические повторяемые элементы секции. Пример — секция «Карточки преимуществ»:

{%- comment -%} sections/features-grid.liquid {%- endcomment -%} <div class="features-grid features-grid--cols-{{ section.settings.columns }}"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'feature_card' -%} <div class="feature-card" {{ block.shopify_attributes }}> {%- if block.settings.icon != blank -%} <img src="{{ block.settings.icon | image_url: width: 80 }}" alt="{{ block.settings.icon.alt | escape }}" width="80" height="80" loading="lazy" > {%- endif -%} <h3>{{ block.settings.title }}</h3> <p>{{ block.settings.description }}</p> </div> {%- endcase -%} {%- endfor -%} </div> {% schema %} { "name": "Сетка преимуществ", "tag": "section", "settings": [ { "type": "range", "id": "columns", "min": 2, "max": 4, "step": 1, "label": "Количество колонок", "default": 3 } ], "blocks": [ { "type": "feature_card", "name": "Карточка преимущества", "settings": [ { "type": "image_picker", "id": "icon", "label": "Иконка" }, { "type": "text", "id": "title", "label": "Заголовок", "default": "Преимущество" }, { "type": "textarea", "id": "description", "label": "Описание" } ] } ], "max_blocks": 12, "presets": [ { "name": "Сетка преимуществ", "blocks": [ { "type": "feature_card" }, { "type": "feature_card" }, { "type": "feature_card" } ] } ] } {% endschema %} 

Атрибут {{ block.shopify_attributes }} обязателен — он добавляет data-атрибуты для inline-редактирования в Theme Editor.

Пошаговый процесс создания секции

1. Создайте файл .liquid в /sections/.
2. Опишите Liquid-разметку с использованием section.settings и block.settings.
3. Добавьте {% schema %} с name, tag, settings и, при необходимости, blocks.
4. Укажите хотя бы один preset, чтобы секция появилась в редакторе.
5. Подключите секцию в JSON-шаблон страницы (например, templates/index.json).
6. Проверьте в Theme Editor: добавьте секцию, настройте блоки, сохраните.

Ограничения для защиты от поломки

limit в конфигурации секции или блока предотвращает добавление лишних элементов:

// Запрет на дублирование hero-секции { "type": "hero-banner", "limit": 1 } // Не более 6 блоков в слайдере "max_blocks": 6 

Что входит в работу по настройке

• Аудит текущей темы на наличие хардкода и негибких секций.
• Проектирование архитектуры секций под требования вашего магазина.
• Разработка 5–8 кастомных секций с блоками согласно макетам.
• Настройка глобальных цветовых схем и шрифтов.
• Интеграция секций в JSON-шаблоны страниц.
• Документирование созданных компонентов и обучение команды контента.
• Гарантия работы всех блоков в Theme Editor (2 недели поддержки после сдачи).

Сроки и оценка

Разработка 5–8 кастомных секций с блоками для конкретного проекта: 3–5 дней. Рефакторинг существующей темы с переносом хардкода в редактируемые секции: 1–2 недели. Если у вас уже есть тема, но блоки работают непредсказуемо, напишите нам — мы оценим проект за 1 день и предложим план рефакторинга. Более 50 магазинов мы перевели на Online Store 2.0 — у нас есть опыт и гарантия качества. Получите консультацию по вашим задачам.