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