Розробка та налаштування 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 — у нас є досвід і гарантія якості. Отримайте консультацію щодо ваших завдань.