Налаштування Shopify Sections та Blocks

Налаштування Shopify Sections та Blocks

Sections та Blocks — архітектурна основа Online Store 2.0. Правильна налаштування дозволяє команді контенту самостійно зібрати сторінки без залучення розробника. Неправильна — перетворює Theme Editor на джерело болю з непередбачуваною поведінкою.

Як влаштовані Sections

Секція — файл у /sections/ з Liquid-шаблоном та JSON-схемою в одному файлі. Схема описує налаштування секції та типи блоків, які вона приймає.

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

{%- 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 %}

Ключове поле — presets: секція з'являється в списку «Додати секцію» в Theme Editor тільки за наявності presets.

Типи налаштувань (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.

Статичні та динамічні секції

Статична секція — жорстко прописана в layout/theme.liquid через {% section 'header' %}. Не може бути перемщена або видалена в Theme Editor.

Динамічна секція — керується через JSON-шаблон сторінки. Саме вони додаються через кнопку «Додати секцію»:

// templates/index.json
{
  "sections": {
    "main-banner": {
      "type": "hero-banner",
      "settings": {
        "heading": "Добро пожаловать",
        "subheading": "Найкращі товари за найкращими цінами"
      }
    },
    "features": {
      "type": "features-grid",
      "block_order": ["block-1", "block-2", "block-3"],
      "blocks": {
        "block-1": { "type": "feature_card", "settings": { "title": "Швидка доставка" } },
        "block-2": { "type": "feature_card", "settings": { "title": "Гарантія якості" } },
        "block-3": { "type": "feature_card", "settings": { "title": "Повернення 30 днів" } }
      }
    }
  },
  "order": ["main-banner", "features"]
}

Колірні схеми

Глобальні колірні схеми задаються в config/settings_schema.json та переиспользуются у будь-якій секції:

{
  "name": "Колірні схеми",
  "settings": [
    {
      "type": "color_scheme_group",
      "id": "color_schemes",
      "definition": [
        {
          "type": "color",
          "id": "background",
          "label": "Фон"
        },
        {
          "type": "color",
          "id": "foreground",
          "label": "Текст"
        },
        {
          "type": "color",
          "id": "button",
          "label": "Кнопки"
        }
      ],
      "role": {
        "background": "background",
        "text": "foreground"
      }
    }
  ]
}

У секції використовується через "type": "color_scheme".

Обмеження для захисту від поломки

"limit" у конфігурації секції або блоку запобігає додаванню додаткових елементів:

// Заборона на дублювання hero-секції
{ "type": "hero-banner", "limit": 1 }

// Не більше 6 блоків у слайдері
"max_blocks": 6

Терміни

Розробка 5–8 користувацьких секцій з блоками для конкретного проекту: 3–5 днів. Рефакторинг існуючої теми з перенесенням hardcode в редагувані секції: 1–2 тижні.