Как создать свой первый раздел темы Shopify

Предоставление вашим клиентам творческого контроля является ключевым моментом, особенно когда они хотят иметь возможность настраивать свою витрину. Функция разделов Shopify — это мощный инструмент для персонализации тем Shopify, поэтому их эффективное использование и соблюдение рекомендаций откроют ряд возможностей для ваших клиентов.

Если вы создаете тему Shopify с нуля или настраиваете тему для клиента, вам потребуется создать несколько разных типов разделов, которые будут различаться в зависимости от контекста. Кроме того, клиенты ожидают удобного и интуитивно понятного интерфейса, а это означает, что правильный раздел в нужном месте может оказать огромное влияние на конверсию.

В этой статье мы расскажем, как приступить к созданию различных типов тематических разделов и правил их использования, чтобы вы могли помочь своим клиентам настроить свой магазин. Мы также рассмотрим некоторые примеры конкретных разделов из нашей темы Dawn, доступной в исходном коде, чтобы продемонстрировать, как именно вы можете использовать их в реальных сценариях.

Что такое тематические разделы?

На высоком уровне разделы — это модульные компоненты темы Shopify, которые продавцы могут настраивать. Разделы содержат контент и настройки для определенных областей магазина Shopify, таких как основные элементы страницы продукта или компонент слайд-шоу.

В этих разделах разработчики имеют доступ к ряду различных типов настроек, от ввода текста и средств выбора изображений до настраиваемого HTML и меню, которые продавцы могут настраивать в редакторе тем и заполнять своим контентом.

Разделы находятся в каталоге /sections темы и могут быть статически включены в файлы макета темы (например, верхний и нижний колонтитулы) или динамически добавляться в любой шаблон из редактора тем. Чтобы получить представление о различных компонентах, которые могут быть представлены в виде разделов, вы можете изучить каталог /sections темы Dawn.

С запуском Интернет-магазина 2.0 разделы теперь можно использовать в качестве основного способа организации всех различных аспектов вашей темы, от целых страниц до отдельных элементов. Как мы расскажем в этой статье, возможность добавлять разделы в любые шаблоны JSON позволит вам легко упорядочивать разные страницы, которые можно дополнительно улучшить, когда продавцы настроят свою тему.

Шаблоны и разделы

Одним из необходимых условий для изучения того, как работают разделы в темах Shopify, является понимание системы шаблонов тем Shopify. В Online Store 2.0 каждый тип страницы может быть представлен в виде файла .json в каталоге /templates темы. Разработчики могут структурировать каждый тип страницы, определяя, какие разделы будут отображаться по умолчанию в этих файлах шаблонов JSON.

Эти шаблоны JSON не содержат никакой разметки или объектов Liquid для отображения содержимого магазина. Это просто файлы данных, указывающие, какие разделы будут отображаться на странице по умолчанию и в каком порядке.

Вот простой пример того, как может выглядеть файл шаблона product.json :

В этом случае страница продукта будет отображаться с разделом main-product.liquid , и это будет единственный раздел, отображаемый по умолчанию. Когда продавец настраивает эту страницу и добавляет на нее дополнительные разделы, файл шаблона product.json будет обновлен с учетом этой информации. Мы подробнее рассмотрим этот процесс в этой статье, когда рассмотрим, как разделы включаются в шаблоны.

Основы разделов

При разработке темы с использованием разделов и шаблонов JSON вы можете рассмотреть возможность создания файлов разделов в двух разных категориях: «главные» разделы страницы и отдельные модульные компоненты.

Разделы главной страницы

В разделе главной страницы вы должны включить все содержимое по умолчанию для этой страницы. Например, в основной раздел страницы продукта вы должны включить важные элементы для отображения продукта и связанных с ним свойств, таких как название продукта, описание, медиа, цена и форма добавления в корзину.

Вы можете получить доступ к переменным или объектам Liquid в разделе в зависимости от того, в какой шаблон страницы включен раздел. Это означает, что раздел, который будет отображаться в шаблоне product.json , сможет получить доступ к любым атрибутам product Liquid. объект, представляющий продукт, страница которого отображается.

Точно так же раздел, включенный в файл collection.json , сможет получить доступ ко всем атрибутам объекта Liquid collection . Все разделы, независимо от того, где они появляются, могут получить доступ к любому из глобальных объектов Liquid.

В дополнение к разметке и объектам Liquid для конкретных страниц, которые вы будете добавлять в раздел главной страницы, вы также можете создавать настройки в тегах {% schema %} . Эти настройки могут ссылаться на элементы раздела и могут быть изменены продавцами в редакторе тем.

Поскольку раздел главной страницы содержит разметку, характерную для одного типа страницы, вам нужно включить ее только в связанный с ней шаблон. Чтобы предотвратить добавление раздела главной страницы к другим типам страниц из редактора темы, он не должен содержать предустановки в своей схеме раздела.

Чтобы просмотреть пример раздела главной страницы, вы можете изучить файл main-product.liquid в каталоге /sections Dawn или любой из разделов с префиксом main в заголовке. Как правило, вы также должны называть разделы главной страницы словом main в заголовке, чтобы различать разные типы разделов.

Модульные секции

Модульные разделы — это разделы, которые можно повторно использовать в разных разделах интернет-магазина и дополнять основные элементы страницы. Примеры этих типов разделов включают избранные коллекции, слайд-шоу и формы подписки на рассылку новостей.

Эти разделы обычно добавляются на страницы продавцами с помощью редактора тем, а не по умолчанию добавляются в шаблон страницы. Чтобы раздел можно было добавить на страницу через редактор, раздел должен содержать пресеты в своей схеме. После добавления этих предустановок раздел станет доступным, когда продавец нажмет « Добавить раздел» в редакторе тем.

В отличие от «основных» разделов страницы, модульные разделы обычно содержат контент и разметку, которые можно повторно использовать на разных типах страниц и в разных контекстах в магазине Shopify. Поэтому разработчикам следует избегать полагаться на специфичные для страницы объекты Liquid в этих разделах.

Однако можно ограничить доступ к разделу только на определенных типах страниц, используя атрибут templates в схеме раздела. Например, если вы хотите ограничить раздел только страницами продуктов и коллекций, вы должны включить эту строку в теги schema раздела:

 "templates": ["product", "collection"]

Атрибут templates принимает список строк, представляющих тип страницы.

В зависимости от того, какую функциональность вы хотите включить в свою тему, или от конкретных требований вашего клиента, вы, скорее всего, создадите ряд различных разделов, которые включают уникальные функции. Чтобы просмотреть примеры модульных разделов, вы можете изучить раздел информационного бюллетеня или раздел расширенного текста, используемый в Dawn.

Настройки раздела

Мы кратко рассмотрели, как можно использовать настройки файла раздела для создания параметров настройки, к которым могут получить доступ продавцы, но давайте углубимся в них немного глубже, чтобы увидеть, как они устроены.

Как мы видели, настройки включены в файлы разделов внутри тегов {% schema %} , которые обозначают, что эти настройки должны отображаться в пользовательском интерфейсе редактора тем. Очень простой пример этого можно увидеть с пользовательским текстовым разделом, который может выглядеть примерно так:

В этом примере у нас есть два элемента HTML: элемент заголовка и элемент абзаца. Каждый из этих элементов содержит динамическое содержимое, которое мы создали с помощью объекта section.settings Liquid. Этот объект раздела позволяет нам получать значения настроек, ссылаясь на уникальный идентификатор настройки.

Под разметкой HTML и Liquid у нас есть настройки нашего раздела, содержащиеся в наших тегах {% schema %} . Каждый параметр представлен объектом, где мы можем определить id параметра, его type и то, как он будет отображаться в редакторе. Чтобы получить доступ к настройке раздела в Liquid, добавьте его id к жидкому объекту section.settings . Мы также определяем тип настройки и то, как она будет отображаться в редакторе тем.

В настройках наших тегов схемы:

• id относится к определяемой переменной Liquid
• type определяет тип вывода, который мы создаем
• label предоставляет контекст, отображаемый в редакторе темы
• default присваивает значение по умолчанию

В этом примере я создал text поле для нашего заголовка и richtext текста для нашего тела, но вы можете добавить широкий спектр типов вывода в зависимости от требований вашего клиента. Другие допустимые типы ввода включают image_picker , radio , video_url и font_picker .

Этот пример теперь является допустимым разделом, однако нам не хватает одного ключевого аспекта: определения, где именно раздел появится в теме. Позже мы рассмотрим несколько различных подходов к включению разделов, но сейчас мы позволим добавить раздел через редактор темы на любую страницу, создав пресеты в разделе.

Предустановки — это конфигурации разделов по умолчанию, которые добавляются в теги {% schema %} раздела. В нашем простом примере пресеты могут выглядеть так:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

После добавления в наш пример раздел пользовательского текстового поля будет выглядеть так:

Теперь, если мы перейдем к редактору тем и выберем « Добавить раздел» на любой странице, этот раздел появится в качестве доступной опции. Созданные нами настройки раздела появятся на правой боковой панели с добавленными нами метками и текстом по умолчанию, и мы можем заполнить параметры ввода текста, которые будут отображаться в нашем разделе.

Это простой пример, показывающий взаимосвязь между настройками раздела и переменными, которые вы можете создать в разделах, а также то, как они отображаются в редакторе тем. Для более продвинутой модели вы можете изучить раздел расширенного текста темы Dawn.

Включение разделов на страницы

Как мы уже упоминали, существует несколько способов включения разделов на страницы темы. Давайте рассмотрим каждый из этих подходов по отдельности и раскроем некоторые применимые к ним правила.

1. Включение разделов в шаблоны JSON

Когда мы рассмотрели разделы главной страницы, мы увидели, что файлы шаблонов JSON принимают свойство "main" , которое становится разделом по умолчанию для этого типа страницы и должно включать все важные элементы содержимого для этой страницы.

В дополнение к "main" разделу в шаблон JSON также можно включить другие разделы, которые будут отображаться по умолчанию на страницах этого типа. Если мы используем шаблон продукта JSON в качестве примера, мы могли бы включить раздел рекомендаций продукта на страницу, добавив новый объект под "main" разделом:

В этом случае мы присваиваем имя разделу, recommendations , а свойство type используется для определения того, какой файл в каталоге /sections мы хотим включить.

Поскольку этот шаблон JSON ссылается на более чем один раздел, нам нужно определить, как разделы отображаются последовательно в объекте order . Каждому разделу, включенному в шаблон JSON, необходимо будет назначить порядок по умолчанию, однако продавцы могут изменить порядок разделов в редакторе тем.

Разделы без пресетов, добавленные в шаблоны JSON, нельзя удалить в редакторе темы, но их можно скрыть, если они не требуются продавцу. Для реального примера того, как разделы могут быть организованы в шаблоне JSON, вы можете изучить шаблон продукта Dawn.

2. Включение разделов в качестве опций на всех страницах

Как мы видели с нашим пользовательским текстом, можно сделать раздел доступным на всех страницах темы, если в настройках schema присутствуют presets .

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

При включении с использованием этого подхода эти разделы можно добавлять, перемещать и удалять из редактора тем. Эти разделы также могут быть ограничены определенными страницами с помощью свойства templates .

Эта функция перетаскивания означает, что при создании пользовательских динамических разделов будет разблокирован широкий спектр параметров для персонализации магазинов. Вы можете создавать подвижные разделы для видео, продуктов или галерей изображений. Хорошим примером раздела, использующего этот метод, может быть раздел информационного бюллетеня Dawn.

3. Использование тегов {% section %} для добавления статических разделов

Тег section Liquid позволяет отображать раздел из каталога /sections в файле макета или шаблона Liquid. Этот тег может выглядеть как:

 {% section 'header' %}

Разделы, добавленные с помощью этого тега section , нельзя удалить, переместить или скрыть в редакторе тем. Положение этого раздела на странице заблокировано в зависимости от того, где он был добавлен в файл макета или шаблон.

Этот подход чаще всего используется для контента и компонентов, которые всегда должны быть видны, таких как заголовки, нижние колонтитулы и панели объявлений. Чтобы увидеть пример этого на Dawn, вы можете проверить файл theme.liquid, где статическая панель объявлений, разделы заголовка и нижнего колонтитула добавляются с помощью тега section .

Расширение возможностей творчества

Теперь, когда вы увидели, как создавать и добавлять разделы в свои темы, вы можете создавать бесконечные варианты для магазинов ваших клиентов.

Работа с шаблонами JSON раскрывает возможности разделов для всех страниц темы, что позволит продавцам создавать свой магазин именно так, как они хотят, — с вашим руководством.