ざっくりつかむShopify2.0のテーマ構造: Dawnを例に

レイアウト→テンプレート→セクション→スニペットの流れを把握する

Shopifyテーマがコードを呼び出していく大きな流れとして、レイアウト→テンプレート→セクション→スニペットの流れがあります。（インクルードの順番）

少し抽象的な内容になりますが、それぞれのファイルがどのような役割を果たしているのかを把握しておきましょう。

ざっくりとしたShopifyテーマの構成イメージ。多少の齟齬はご了承ください。

レイアウトファイル: 最も基本的なファイル。ページの種類を判別

まず最も基本的なファイルとしてレイアウトファイルが読み込まれ、その中で「呼び出すのはどのページか」がURLによって判別されます。呼び出す種類のページが判別されたら、その種類のページの雛形である「テンプレートファイル」が呼び出されます。

最も基礎となるレイアウトファイルによって、表示されるページが商品ページか、ブログ記事ページか、TOPページかなどが判別されます。

テンプレートファイル: 該当ページの雛形となる「枠組み」ファイル

テンプレートファイルでは、「そのテンプレートを構成するパーツ（=セクション）をどのような順番や設定で出力するか」という雛形が定められています。

まさしく、そのページの「テンプレート」を定めている形です。そのページの基本的な形を決めてある、「枠組み」ファイルだと思っても良いでしょう。

このテンプレートファイルは、Shopify管理画面のテーマ編集から編集する際、ページの雛形として出力されるものと同一になります。

セクションファイル: 該当テンプレートの「エリア」

テンプレートファイルによってどこのページが呼び出されるかが決まったら、そのページを構成していく「セクション」単位のコードがセクションファイルによって書き出されていきます。

実際に書き出されるHTMLコードはこのセクションファイルに記述されていることが多いです。

スニペットファイル: 再利用ブロックなどを別に保管しておく「便利な道具箱」

何度も利用する可能性があるブロックのコードや、セクションファイルに記述してしまうと冗長になってしまう可能性のあるコードが保管してあるファイル群です。

セクションファイルから呼び出されることがほとんどですが、特に制約はなく、いかなる種類のファイルから呼び出すことも可能です。

スニペット = 用語集という意味合いもあることから、よく使うコード表現を保管しておき、必要に応じて短い表現で利用できる「便利な道具箱」のようなイメージを持っておくとよいと思います。

以上のレイアウト→テンプレート→セクション→スニペットの流れ、特にテンプレート→セクションの関係を抑えておきましょう。

以下より、それぞれのファイル群について詳細を説明していきます。

レイアウト(layout): 基本ファイルから、ふさわしいテンプレートを自動呼で選んで呼び出す

layoutフォルダ内のレイアウトファイル。もっとも基本となるこのレイアウトファイルについて詳細を見ていきます。

レイアウトファイル(layout)は、デフォルトでは theme.liquidが採用されます。

「テーマタグ」と呼ばれるタグによって、他ファイルの情報をインクルードしている。

テンプレートを自動で選んで呼び出す以外にも、ヘッダー情報の出力や直接セクションファイルを呼び出したりもしています。

さまざまな条件分岐などを用いて、「今いるページでは何を出力するか = 何のテンプレートファイルを呼び出すか」を判別・出力しています。

ページごとにふさわしいテンプレートを呼び出す: {{ content_for_layout }}

レイアウトファイルの中で最も重要だと言っても過言ではない、この1つのタグ。

{{ content_for_layout }}

theme.liquid

このタグによって、「templateフォルダ内にある、どのテンプレートファイルを呼び出すか？」が制御されています。

この {{ content_for_layout }} タグがレイアウト → テンプレートの流れを作っています。

ヘッダー情報を出力: {{ content for header }}

{{ content for header }}

theme.liquid

セクションファイルやスニペットを呼び出すことも可能

レイアウト → テンプレート → セクション → スニペットの流れをスキップして、レイアウトファイルから直接セクションファイル(sections)を呼び出すことも可能です。

sectionsフォルダ内に格納されている、セクションファイルを呼び出すタグは下記のように記述します。

{% section ‘section-file-name’ %}

たとえば、私の場合（Dawn2.0テーマ）はtheme.liquidに下記のようなコードが記述されていました。

{% section 'announcement-bar' %}
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
	{{ content_for_layout }}
</main>

{% section 'footer' %}

theme.liquid

また、セクションよりも粒度の小さい「スニペット」(snippets)を呼び出すことも可能です。

スニペットファイルはsnippetフォルダに格納されています。

下記のコードでは、renderタグを用いてsnippet > meta-tags.liquid を呼び出しています。

{% render 'meta-tags' %}

theme.liquid

テンプレート(templates): ページを構成するセクションと順序を記述

「特定のページ内でどのセクションを表示させるか？」というセクション内容とその順序の情報を持っているのがテンプレートファイル。

2つのテンプレートファイル方式: .liquidと.json

JSON形式の場合

下記は、Dawn2.0のarticle.jsonの内容です。JSON形式で、article = ブログ記事にどんな内容をどんな順番で吐き出すのか？を定義しています。

吐き出すブロックの順番は、特に sections > main > blocks で定義されてあります。

{
  "sections": {
    "main": {
      "type": "main-article",
      "blocks": {
        "featured_image": {
          "type": "featured_image",
          "settings": {
            "image_height": "adapt"
          }
        },
        "title": {
          "type": "title",
          "settings": {
            "blog_show_date": true,
            "blog_show_author": false
          }
        },
        "content": {
          "type": "content",
          "settings": {
          }
        },
        "share": {
          "type": "share",
          "settings": {
            "share_label": "この記事をシェアする"
          }
        }
      },
      "block_order": [
        "featured_image",
        "title",
        "content",
        "share"
      ],
      "settings": {
      }
    }
  },
  "order": [
    "main"
  ]
}

templates/article.json

実際にarticleページで呼び出されるセクションファイルは、 sections > main > type に”main-article”とあるように、sections/main-article.liquidファイルが出力されることとなります。