【Shopify】テーマのファイル構成

Shopifyテーマのファイルの構成について解説します。

コードを編集する上での基礎となります。

(参考) https://shopify.dev/docs/themes/architecture

解説

テーマの解説を実施するにはあたり、参考までにShopifyのデフォルトテーマである「Dawn」を使います。

以下はShopifyテーマのディレクトリ構成となっています。

各ディレクトリの用途としては、コメントにある通りとなっており、ファイルが格納されています。

├── assets // css, 画像ファイル, javascriptファイルなど
├── config // テーマ設定(.liquid)
├── layout // テーマのベースとなるレイアウトファイル(.liquid)
├── locales // 言語ファイル(.json)
├── sections // セクション(.liquid)とセクショングループ(.json)
├── snippets // 再利用可能なスニペットファイル(.liquid)
└── templates // 各ページの表示情報をまとめたファイル(.json)

Liquid

続いて、各ディレクトリ内に配置されたファイルについて解説していきます。

解説するファイルの順番も参考にすると、どのようにページが表示されるのかわかりやすいかと思います。

layout/theme.liquid

theme.liquidはテーマの骨組みを担うファイルで、このファイルを基に動的に各ページを生成します。

各ページのコンテンツは、{{ content_for_layout }} 部分に挿入されるわけです。

また、{{ content_for_header }} には、アプリやプラグインのheader情報が追加されます。

(参考) https://shopify.dev/docs/themes/architecture/layouts

<!DOCTYPE html>
<html>
  <head>
    ...
    {{ content_for_header }}
    ...
  </head>

  <body>
    ...
    {{ content_for_layout }}
    ...
  </body>
 </html>

Liquid

templateファイル(.json)

各ページの表示情報をまとめるファイルです。

ここにどのセクション及びブロックを表示するかをjson形式で書きます。

Shopifyのテーマエディターで手動でセクションとブロックを追加したり、配置を動かすことでその要素や配置の情報が都度更新されることになります。

また、templatesファイルだけでなく、setting_data.jsonも同時に更新されることになります。

(参考) https://shopify.dev/docs/themes/architecture/templates/json-templates

sectionファイル

再利用なモジュール単位のファイルです。

例えば、Dawnにデフォルトで備わっているセクションであるリッチテキストや画像バナーなどがそれにあたります。

ファイル内のコードの構成としては、maincontent(セクションの構造と動作を定義)、assets(スタイルを定義)、Schema(セクションの設定オプションを定義)の大きく3つに分かれています。

maincontentの部分で、Schemaで定義したセクション内の設定を呼び出すことができます。

以下の例では、section.settings.heading_color(= "#000000")とsection.settings.heading_text(= "ウェルカム")が表示されます(デフォルトのままの場合)。

//assets
{%- style -%}
  .section-{{ section.id }}-padding {
    ...
  }
{%- endstyle -%}

// maincontent
<div>
  <h1 style="color: {{ section.settings.heading_color }}">{{ section.settings.heading_text }}</h1>
</div>

// Schema
{% schema %}
{
  "name": "ヘッダー",
  "settings": [
    {
      "type": "text",
      "id": "heading_text",
      "label": "見出しテキスト",
      "default": "ウェルカム"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "見出しの色",
      "default": "#000000"
    }
  ]
}
{% endschema %}

Liquid

section-groupファイル

セクションをグループ化したファイル(.json)です。

header-group.jsonとfooter-group.jsonが該当し、セクションとブロックの配置等を記録します。

templatesファイルと同じような仕組みです。

例) sections/header-group.json

{
  "type": "header",
  "name": "Header Group",
  "sections": {
    "header": {
      "type": "header",
      "settings": {}
    }
  },
  "order": [
    "header"
  ]
}

Liquid

snippetsファイル

再利用可能な断片的なコードのまとまりです。

これらを使い回すことで保守しやすくなり、不要なコードを書かずにすみます。

例えば、以下のようなsnippetsファイルを作成して、theme.liquidファイルで呼び出す場合、以下のように描くことができます。

<!-- snippets/header.liquid -->
<header class="site-header">
  <h1>{{ shop.name }}</h1>
  <nav>
    {% for link in linklists.main-menu.links %}
      <a href="{{ link.url }}">{{ link.title }}</a>
    {% endfor %}
  </nav>
</header>

<!-- templates/theme.liquid -->
{% include 'header' %}

Liquid

configファイル

settings_schema.jsonとsettings_data.jsonの2種類のファイルがあります。

settings_schema.jsonは、テーマ全体の設定として、テキストフィールド、カラーピッカーなどを設定するファイルです。

settings_data.jsonは、templatesの項目でも少し解説しましたが、テーマの中のセクションの配置などを記録するファイルとなっています。

localeファイル

各言語ごとに翻訳されたテキストがjson形式書かれたファイルです。

ここのキーを使うことでページに出力されるテキストが言語切り替えとともに動的に翻訳される仕組みとなっています。

assets

静的なファイルを格納するディレクトリです。

画像、スタイルシート(CSS)、Javascriptファイル、カスタムフォントファイル、その他メディアリソース(ビデオ、音声、PDFファイルなど)などを配置します。

配置した静的ファイルを呼び出す場合、以下のようにasset_urlタグを使います。

<!-- 画像のリンク -->
<img src="{{ 'logo.png' | asset_url }}" alt="ロゴ">

<!-- CSSファイルのリンク -->
<link rel="stylesheet" type="text/css" href="{{ 'style.css' | asset_url }}">

<!-- JavaScriptファイルのリンク -->
<script src="{{ 'script.js' | asset_url }}"></script>

ShopifyでのECサイト構築のご依頼はランサーズでも承っております。