Настройка 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 только при его наличии.

Типы настроек (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 дней. Рефакторинг существующей темы с переносом хардкода в редактируемые секции: 1–2 недели.