Shopifyセクション開発入門 — テーマカスタマイズの自由度を上げる

Shopifyのテーマエディターで既存のセクションを並べ替えたり設定を変えたりするのは簡単です。でも「こういうレイアウトのセクションがほしい」「マーチャントが自由に中身を組み替えられるようにしたい」と思ったとき、既存のセクションだけでは物足りなくなります。

そこで覚えたいのが セクション開発 です。Liquidファイルに {% schema %} タグを書くことで、テーマエディターに表示される設定項目やブロックを自分で定義できるようになります。

この記事では、セクション開発の基本構造から schema の書き方、ブロック、プリセットまで、順番に解説していきます。

セクションとは？

Shopifyテーマのページを構成する再利用可能なモジュールです。各セクションは独自のLiquidファイル（sections/ フォルダ内）として作成し、schema でテーマエディター上の設定項目を定義します。Online Store 2.0では、1テンプレートあたり最大25セクション、全セクション合計で最大1,250ブロックまで配置できます。

出典：Shopify.dev - Sections

セクション開発で何ができるのか

テーマエディターの標準セクションでも多くのことは実現できます。それでも自分でセクションを開発する価値がある場面を整理しておきます。

わたし自身、最初は「既存のテーマで十分じゃない？」と思っていました。でも実際にクライアントワークをしていると「ここにもうひとつボタンを置きたい」「画像とテキストの組み合わせを自由に増やしたい」という要望が頻繁に出てきます。セクション開発の基本を押さえておくと、こうした要望にコードで柔軟に応えられるようになります。

セクションファイルの基本構造

セクションは sections/ フォルダ内に .liquid ファイルとして作成します。基本的な構造はとてもシンプルです。

<!-- HTML + Liquid のマークアップ -->
<div class="my-custom-section">
  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.text }}</p>
</div>

{% schema %}
{
  "name": "カスタムセクション",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "見出し",
      "default": "見出しテキスト"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "本文"
    }
  ],
  "presets": [
    {
      "name": "カスタムセクション"
    }
  ]
}
{% endschema %}

1. 01

   マークアップ部分

   HTMLとLiquidを組み合わせて、セクションの見た目を定義します。section.settings.〇〇 でschemaに定義した設定値を取得できます。
2. 02

   schema 部分

   JSONフォーマットで、テーマエディターに表示される設定項目を定義します。name、settings、blocks、presets などを記述します。

出典：Shopify.dev - Section schema

schema の主要プロパティ

schema にはいくつかの重要なプロパティがあります。ここでは特によく使うものを紹介します。

"settings": [
  { "type": "text", "id": "heading", "label": "見出し" },
  { "type": "image_picker", "id": "image", "label": "画像" },
  { "type": "color", "id": "bg_color", "label": "背景色", "default": "#ffffff" },
  { "type": "select", "id": "layout", "label": "レイアウト",
    "options": [
      { "value": "left", "label": "左寄せ" },
      { "value": "center", "label": "中央" }
    ],
    "default": "center"
  }
]

"blocks": [
  {
    "type": "testimonial",
    "name": "お客様の声",
    "settings": [
      { "type": "text", "id": "author", "label": "お名前" },
      { "type": "textarea", "id": "content", "label": "レビュー内容" }
    ]
  }
]

"presets": [
  {
    "name": "カスタムセクション",
    "settings": {
      "heading": "デフォルトの見出し"
    }
  }
]

ブロックを使った実践例

ブロックの仕組みを使って、マーチャントが自由にFAQを追加できるセクションを作ってみます。

<div class="faq-section">
  <h2>{{ section.settings.title }}</h2>

  {% for block in section.blocks %}
    <details {{ block.shopify_attributes }}>
      <summary>{{ block.settings.question }}</summary>
      <p>{{ block.settings.answer }}</p>
    </details>
  {% endfor %}
</div>

{% schema %}
{
  "name": "FAQ",
  "settings": [
    { "type": "text", "id": "title", "label": "セクション見出し", "default": "よくある質問" }
  ],
  "blocks": [
    {
      "type": "faq_item",
      "name": "質問と回答",
      "settings": [
        { "type": "text", "id": "question", "label": "質問" },
        { "type": "textarea", "id": "answer", "label": "回答" }
      ]
    }
  ],
  "presets": [
    { "name": "FAQ" }
  ]
}
{% endschema %}

出典：Shopify.dev - Building with sections and blocks

セクション開発のチェックリスト

セクションを作るときに確認しておきたいポイントをまとめました。

• sections/ フォルダにLiquidファイルを作成した
• schema の name にわかりやすいセクション名をつけた
• presets を定義してテーマエディターから追加できるようにした
• 設定IDがセクション内・ブロック内で重複していないか確認した
• ブロック要素に block.shopify_attributes を追加した
• テーマエディターのプレビューで設定変更が正しく反映されるか確認した
• モバイル表示でもレイアウトが崩れないか確認した

よく使う settings タイプ一覧

settings で指定できる入力タイプは豊富に用意されています。よく使うものをまとめておきます。

1. 1

   テキスト系

   text（1行テキスト）、textarea（複数行テキスト）、richtext（リッチテキスト）、inline_richtext（インラインリッチテキスト）

2. 2

   メディア系

   image_picker（画像選択）、video（動画）、video_url（YouTube/Vimeo URL）

3. 3

   選択系

   select（ドロップダウン）、radio（ラジオボタン）、checkbox（チェックボックス）

4. 4

   数値・色

   range（スライダー）、number（数値入力）、color（カラーピッカー）、color_scheme（カラースキーム）

5. 5

   リソース系

   collection（コレクション選択）、product（商品選択）、page（ページ選択）、url（URL入力）

出典：Shopify.dev - Settings

まとめ

セクション開発は、Shopifyテーマカスタマイズの自由度を大きく広げてくれるスキルです。schema でマーチャント向けの設定UIを定義し、blocks で柔軟なコンテンツ構成を実現し、presets でテーマエディターから簡単に追加できるようにする。この3つの要素を押さえるだけで、テーマの表現力が格段に上がります。

まずは既存テーマのセクションファイルを読んでみるところから始めるのがおすすめです。Dawnテーマのコードは GitHub で公開 されているので、実際のセクション構造を参考にしながら、自分だけのセクションを作ってみてください。

出典：Shopify.dev - Theme architecture

→ Shopifyでストアを始める