Разработка и настройка 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 — у нас есть опыт и гарантия качества. Получите консультацию по вашим задачам.