【Shopify】Sectionファイルの構造について

ShopifyテーマにおけるSectionファイルについての構造について解説します。

解説

ShopifyのテーマDawnのデフォルトで備わっている、image-banner(特集)を例にセクションの構造について解説していきます。

セクションファイルは大きく分けると、ファイル上部から以下のような構造となっています。

assetsファイルの読み込む
画面をレンダリングするhtml
セクションの設定(schema)

以下は、実際のセクションファイルを抜粋したコードになります。

[sections/image-banner.liquid]

// 1. assetsファイルの読み込む
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
...

// 2. 画面をレンダリングするhtml
<div
  id="Banner-{{ section.id }}"
>
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} ...">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
...
      -%}
...
</div>

// 3. セクションの設定(schema)
{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [ // セクション全体の設定
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
...
  ],
  "blocks": [ // セクションに追加できるブロック
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
...
      ]
    },
...
  ],
  "presets": [ // カスタマイズ画面でセクションとして追加できるようになる
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
...
      ]
    }
  ]
}
{% endschema %}

PHP

さらに上記を深掘りします。

「1.assetsファイルの読み込む」は、セクションのスタイルを調節するcssファイルやjavascriptファイルなどを読み込む領域です。

「2.画面をレンダリングするhtml」は、セクションの見た目部分を担う領域です。

「3.セクションの設定(schema)」は、セクションの設定を担う領域で、カスタマイズ画面で設定する項目をここで定義します。

この中で特に重要なのが、2と3の関係性です。

カスタマイズ画面にある設定項目を変えると、セクションが定義されている項目に対して値がセットされます。
これを2のhtml部分で読み込み、設定値によって画面に表示される要素が変化するというわけです。

例えば以下は、image-banner.liquidの一部です。

    <div class="banner__media media{% ...">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank // ★ blankでない場合、image_class に 'banner__media-image-half' を代入
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}

PHP

★の箇所でsection.settings.image_2について条件分岐を書いていますが、blankでなければ、image_classに'banner__media-image-half'を代入する、という処理が書かれており、設定値によって変数が変わり、以降の処理でさらに使われる変数によって画面に表示される要素が変わるわけです。

この仕組みがあることで、以下のような

設定されていない項目があってもそれに合わせてセクションのレイアウトを適切に配置する
html要素のクラス名が動的に変わることでスタイルが変化する

などといった動的なカスタマイズが可能となるわけです。