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

Dawn2.0テーマを例に、「ざっくりつかむShopifyテーマ」について解説します。各ファイルの関係性や、全体的なインクルードの流れについて記述しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{ content_for_layout }}

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

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

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

{{ content for header }}

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

レイアウト → テンプレート → セクション → スニペットの流れをスキップして、レイアウトファイルから直接セクションファイル(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' %}

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

{% render 'meta-tags' %}

テンプレート(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"
  ]
}

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

セクション(sections): エリア単位で表示させる内容をliquidタグ等を用いて記述

上で説明したlayoutやtemplatesファイルから呼び出される、実際にページにエリアとして出力される内容を保持しているのがセクションファイル(sections)です。

schemaタグ

styleタグ

本セクションファイルのみに適用されるCSSを定義できます。

Shopifyテーマ構造を把握できたら、Dawnテーマのカスタマイズに挑戦

Shopifyテーマ構造の概要・全体を把握できたら、具体的にカスタマイズを行っていきましょう。Shopifyテーマには初期状態のままでは日本の慣習にそぐわないものが多く、Dawnもその1つです。

ShopifyテーマDawnを日本向けにローカライズ（姓名フォーム・抜粋文） の記事で、Dawnテーマを日本向けにローカライズしていく具体的なカスタマイズ方法をご紹介しています。

また、JavaScriptを利用したカスタマイズとして、 Shopifyブログ本文中に吹き出しコメント挿入を実装するカスタマイズ方法 もご紹介しています。こちらも併せてお読みください。

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。

🍀 Webサイト制作とSEOの専門家 - Marketing Wizard

上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。

Category:

Tags: 🛒Shopify