Работа с Шопифай: Создание динамической секции

Шаги создания динамической секции:

1. Перейти в папку Section и нажать на «Добавление новой секции»

2. Создать файл Section_name.liquid с начальным кодом. Можно удалить CSS и JavaScript блоки

3. В схеме задаются поля, которые могут редактироваться через Customizer.

• name – задается имя секции, которое отображается в Customizer.
• class – задается дополнительный класс для секции.
• tag – задается тег для секции.
• settings – задаются настройки для секции, которые могут редактироваться через Customizer.
• id – задается id для поля, которое используется для разметки в файле.
• type – задается тип для поля. (text – текст, image_picker – прикрепить фото, color – цвет)
• label – задается подпись для поля в Customizer.
• default – задается значение по умолчанию для поля.
• presets – задаются настройки для создания динамической секции.
• category – задается категория для секции для отображения в Customizer.
• block – задаются настройки для создания динамических блоков внутри секции.

4. Указанные поля в схеме, можно использовать в разметке секции. HTML разметка помещается над схемой. Для вывода применяются фигурные скобочки, в которых указывается {{ section.settings.name }}, где name – это элемент в схеме. К примеру, если в схему поместить изображение (image picker), то для его вывода в шаблоне надо будет написать

<img src="{{ section.settings.image-name | img_url: "master" }}">

Видео по теме: