【Shopify②】テーマファイルの構造と解説

こんにちは、エンジニアのtakemotoです。

前回更新した記事、 【Shopify①】ローカルで開発環境を構築する方法と使い方 ではTheme Kitを使用した開発方法を説明しました。

今回は第2弾という事で、Theme Kitのファイル構造について解説したいと思います。

※説明するのは無料テーマについてです。有料テーマではありませんので、ご注意ください。

Shopifyテーマの構造

Shopifyの基本(無料)テーマ、Debutテンプレートには下記のようなファイルが含まれています。
勿論、全く使用しないファイルもあります。

主要ファイルは以下の通りです。

theme

├assets/

｜├theme.css

｜└theme.js

├config/

｜├settings_data.json

｜└settings_schema.json

├layout/

｜└theme.liquid

├locales/

｜├ja.json

｜└en.default.json

├sections/

｜├blog-template.liquid

｜├collection.liquid

｜├product-template.liquid

｜└header.liquid

├snippets/

｜├icon-cart.liquid

｜├pagination.liquid

｜└site-nav.liquid

└templates/

　├404.liquid

　├blog.liquid

　├cart.liquid

　├index.liquid

　├page.contact.liquid

　├page.liquid

　└customers

　　├addresses.liquid

　　├login.liquid

　　└register.liquid

では、ディレクトリごとに説明します。

assets

assetsファイルには、サイト内で使用する「CSS(SCSS)ファイル」「Javascriptファイル」「画像」「フォント」などが格納されています。

ShopifyのCSSで使用できる拡張子は3つあります。

CSS(.css)

通常のCSSファイル。

SCSS(.scss)

SCSSの書き方が使用できます。

Shopifyサーバーが保存する時に自動でコンパイルし、
「ファイル名 .scss.css」 ファイルを生成します。

liquid(.scss.liquid)

Shopify用のテンプレートエンジンliquidを使ってシステム変数を利用できます。例えば、settings_schema.jsonに色を定義しておけば、Shopify全体でのフォントカラーを変えたい場合に1箇所を変更して再コンパイルするだけでスタイルを変える事が可能です。
また、.scss.liquid ファイルにすると、管理画面上で編集できるようになります。
liquid→SCSS→CSS という順にコンパイルし、
「ファイル名 .scss.css」ファイルを生成します。

scssファイルはコードにミスがあるとコンパイルされず、ファイルが読み込まれなくなるので注意してください。

assetsディレクトリ内のCSS・JSファイルは以下のコードで呼び出す事ができます。

// CSS
{{ 'theme.css' | asset_url | stylesheet_tag }}

// SCSS
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

// JS
{{ 'script.js' | asset_url | script_tag }}

注意点

• Shopifyの仕様上、assetsディレクトリの中に「css」や「img」のようなフォルダ名でサブディレクトリを作り、その中のファイルを読み込ませることができない。
• @import などで他のCSSファイルを読み込む事ができません。そのため、カラーコードなどを変数にまとめた場合、各ファイルの上部に書く必要があります。

config

configファイルの中には、settings_schema.jsonとsettings_data.jsonがあります。

settings_schema.jsonはテーマ全体の設定を管理するファイルです。

このファイルを変更する事で、テーマエディターのテーマ設定にある以下の項目を編集できます。

settings_data.jsonは管理画面上で設定された外観や機能を保存します。

具体的な使用方法はこちらを参考にしてみてください。

configに関しては公式に詳細が載っています。Configuring theme settings

layout

layoutファイルには、html・meta・bodyなどのHTMLタグが格納されているファイルがあります。

• password.liquid：オンラインストアにパスワードを設定した場合に表示される
• theme.liquid :上記以外のすべてのテンプレートに使用される

基本的に開発する時に編集するファイルはtheme.liquidです。

テーマ内で共通する要素（ヘッダー、フッター、ナビゲーションなど）をtheme.liquidに配置する事で共通部分をまとめる事ができ、逆に、ページごとにレイアウトの構成を変更する事も可能です。

サイト全体に関わる修正はtheme.liquidに、共通パーツや個別ページの内容は個々のliquidファイルに分けて行います。

bodyタグ内にある、{{content_for_layout}}から各ページのテンプレートファイルが読み込まれます。

また、上記構造から分かるように、{% section 'footer' %}や{% section 'header' %}でsectionsディレクトリにある各liquidファイルを読み込んでいます。

locales

localesファイルには、言語ごとに翻訳したjsonファイルが入っています。

Shopifyが生成する翻訳後の単語を変更する際、jsonを変更します。(日本語：ja.json、英語：en.default.json)

管理画面から修正する場合は、
オンラインストア→テーマ→アクションをクリックして、言語を編集するを選択します。

以下の画面のテキストを変更する事で、localesのjsonファイルが編集できます。

管理画面で修正した後はローカルに反映するようにしましょう。

※Shopifyストアから最新コードをダウンロードするコマンドを入力する事で、管理画面での変更をローカルに反映する事ができます。(詳細はこちら)

sections

各ページの共通する大きいパーツのliquidファイルが入っています。

例えば各ページ共通のヘッダーが「header.liquid」として保存されてありました。layoutでも説明しましたが、liquidファイルに{% section 'header' %}と書く事で、「sections」ディレクトリ内の「header.liquid」が読み込まれるようになります。

sections内のファイルが呼び出せるのは、LayoutとTemplatesです。assetsファイルと同様、サブディレクトリを作成してその中のファイルを読み込ませる事ができません。

snippets

sectionsと同じように共通パーツが入っています。

入っているファイルはロゴ・アイコン・ボタンなど、sectionsより小さいパーツで、sectionsは管理画面から編集できますが、snippetsは編集できないのが特徴です。

snippetsファイルは{% render 'ファイル名' %}と{% include 'ファイル名' %}の2つの書き方で呼び出すことができます。

includeの変数へのアクセス方法が、テーマコードの読み込みとメンテナンスのパフォーマンスを低下させてしまうため非推奨とされています。includeを使用している無料テンプレートもありますが、Snippets を呼び出す時は、renderを使うようにしましょう。(2020/9にダウンロードしたMinimalテンプレートはincludeを使用していました)

sectionsとsnippetsの細かい違いに関しては、リリース時（2017年）の公式ブログ解説記事 を参考にしてみてください。

templates

各ページのテンプレートLiquidファイルが格納されています。

各テーマテンプレートについての詳細は公式サイトから確認できます。

おまけ

▷ファイルの読み込み順

ファイルが読み込まれる順番は、以下の通りです。

layout/theme.liquid
↓
templates/該当するliquidファイル
↓(あれば・・)
sections/該当するliquidファイル

ディレクトリやファイルがたくさんありましたが、開発時に触るのは「Templates」「Sections」「Snippets」がほとんどです。

▷現在表示されているページの確認

既存テーマをカスタマイズする際、現在表示されているページがどのテンプレートを使用しているかを確認する時は、theme.liquidにconsole.log("{{ template }}");を追加してみてください。

まとめ

いかがでしたでしょうか？

ファイル数は多いですが、各ファイルの役割を把握すれば開発も進めやすいかと思います。

少しでも参考になりましたら幸いです。

参考サイト

• Shopifyテーマの構造解説。各ディレクトリとファイルの役割を知る
• ファイル構造を紹介します【debutテーマ使用】
• 【Shopify】無料テーマのディレクトリ構造の解説 – #02