【入門者向け】Shopifyテーマの仕組み、ディレクトリ構造をわかりやすく解説
Shopifyのテーマを、コードでがっつりカスタマイズしたい。と思っても、似た名前のファイルもたくさんあるし、そもそもコードも見慣れない書き方だし……と、初めて見るとちょっと戸惑ってしまいますよね。
Shopifyテーマがどのような仕組みになっているが分かると、カスタマイズのために編集・追加すべきファイルも自然と見えてきます。Shopifyテーマカスタマイズを初めての方は、まずディレクトリ構造と各ディレクトリの役割について知りましょう。 テーマエディタとの関連も含め、図解たっぷりで解説します。
Shopifyテーマの構造について知る
Shopifyのテーマは、オンラインストアのデザインを司るテンプレートのようなもの。 Shopifyのシステムの中から「どの機能・情報を」「どのように表示するか」を決める部分がテーマです。
Shopifyのテーマでは、ファイル名やファイルを配置する場所（ディレクトリ）は、Shopifyが定めたルールに従う必要があります。そうしないと、大元であるShopifyのプログラムがテーマを認識してくれないのです。
このため、既存のテーマをカスタマイズをする場合も、テーマをイチから作成したい場合も、テーマに触れるのであれば最初にShopifyテーマの構造を把握する必要があります。
テーマの構造を確認しよう
Shopify OS2.0対応の無料テーマであり、デフォルトテーマでもある「Dawn」でテーマの構造を見ていきましょう。
テーマに使われているディレクトリやファイルは、コード編集画面で確認できます。
管理画面 > テーマ > コードを編集 を開いてみましょう。
コード編集画面では、ページ左側にテーマ内のディレクトリやファイルが表示されます。
最初の状態では、いくつかのフォルダは開いた状態になっていると思います。
ディレクトリを示すフォルダアイコン の横にある▼をクリックして、閉じてみます。
下のように、テーマ内で7つのディレクトリに分けられていることが確認できるはずです。
この7つのディレクトリは、それぞれに役割・担当していることがあります。
Shopifyテーマの仕組み
Shopifyのテーマは、HTMLページのように1ファイル＝1ページではありません。 ページを構成するパーツ毎にファイルがあり、それを組み立てる“枠組み”的な役割のファイルもあります。沢山のファイルを読み込み、最終的に1ページとして表示させる仕組みです。
WordPressと比較されることが多いのも、仕組みが似ているためでしょう。
この考え方に沿って、Shopifyテーマを構築するためのファイルは、それぞれ役割・担当する内容によってディレクトリで分けられています。これが先程確認した、以下７つのディレクトリ構成なのです。
- レイアウト（Layout）
- テンプレート（Templates）
- セクション（Sections）
- スニペット（Snippets）
- 設定（Config）
- アセット（Assets）
- ロケール（Locales）
Shopifyテーマを構成する各ディレクトリの役割
Shopifyテーマ「Dawn」のディレクトリやファイルは、上で紹介した「Shopifyによって決められているルール」に沿って作られています。 以下では、テーマに必要な各ディレクトリの役割を簡単に解説します。
なお、テーマ構造ルールについては、Shopifyの公式ドキュメント『Shopify Developers Platform(Shopify.dev)』でも紹介されています。完全オリジナルのテーマ制作、テーマ開発者を目指すなら、こちらも目を通しておくと良いでしょう。
https://shopify.dev/themes/architecture
1.レイアウト（Layout）ディレクトリ
レイアウトディレクトリは、テーマのベースとなる大枠を作る部分です。 入っているファイルは、theme.liquidとpassword.liquidの２つ。
特に重要なのは、theme.liquid。
こちらは、ページの大枠部分で、Shopifyストアのほぼすべてのページで使われています。
<head> 要素内（CSSやJSファイルの読み込みなど）の記述や、メインメニューやフッターセクションのような共通パーツを表示させるための記述があります。
もう一つのpassword.liquidは、ショップオープン前の「オンラインストアのパスワード保護」状態の表示に使います。こちらのファイルを編集することは、あまりありません。
2.テンプレート（Templates）ディレクトリ
テンプレートディレクトリには、各ページのごとのテンプレートファイルが入っています。
トップページにはファーストビュー画像とオススメ商品、商品ページでは商品画像と説明…と、ページに合わせてレイアウトを作るための枠組みが、テンプレートディレクトリ内に入っている ○○○.json ファイルです。
テンプレートファイルは、名前でなんとなく「どのページ」を担当しているファイルかわかりますね。テーマエディタ（ノーコードのテーマ編集）上部で編集するページを切り替えられますが、これもテンプレートファイルと対応しています。
テンプレートファイルは今あるものだけではなく、増やすことも出来ます。
例えば、会社概要やよくある質問などをそれぞれ作り込みたい、LPを作りたいストアの場合は、page.about.jsonなどのようにページのテンプレートが複数必要です。このため、テンプレートファイルはテーマカスタマイズで触れる頻度が高いファイルとなっています。
customers
Shopify.devのディレクトリ構造では、templatesディレクトリ内にはcustomersというサブディレクトリが存在しています。このcustomers内には、お客様（商品購入者）アカウント用のテンプレートファイルを入れるようになっています。
https://shopify.dev/themes/architecture
コード編集画面だとcustomers/とサブディレクトリ名から始まるファイルがありますね。
テーマエディタでは その他 > お客様～というページが該当します。
3.セクション（Sections）ディレクトリ
セクションディレクトリには、各ページで使用可能なセクションを作るためのLiquidファイルが入っています。セクションファイル、なんて呼び方をすることもあります。
セクションは、テンプレートの中に配置できるブロックパーツのことです。
テーマエディタの左側にある、ヘッダーやフッター、リッチテキストなどが該当します。
リッチテキストのセクションであれば、rich-text.liquidファイルと、テーマエディタ上の表記と、ファイル名はほぼ同じですね。セクションの中で追加・変更できる“ブロック”も、セクションディレクトリ内の各ファイルで定義されています。
クライアントのストアに合ったセクションを作ったり、ブロックを追加したりと、テーマカスタマイズではセクションファイルも触る機会が多いです。
4.スニペット（Snippets）ディレクトリ
スニペットディレクトリには、各ページ内で使用する細かいアイテムのLiquidファイルが入っています。
例えば、icon-〇〇○.liquidという名前のファイルは、アイコンを表示するためだけのファイルです。icon-youtube.liquid ならYou Tubeのアイコンのsvgタグだけが書かれています。
スニペットディレクトリのファイル（パーツ）は、レイアウト、テンプレート、セクション、スニペットどのファイルからも呼び出して利用ができます。
ただし、スニペットはテーマエディタから追加・変更が出来ません。
スニペットを使いたい時は、コードで直接 {% render 'スニペット名' %} のように記述します。
5.設定（Config）ディレクトリ
設定（Config）ディレクトリには、テーマ設定に関するファイル入っています。
入っているファイルは２つありますね。
settings_data.jsonでは、現在のテーマの共通設定が保存されています。
テーマエディタ > テーマ設定で色などを指定すると、その情報が保存されます。
もう一つのファイルsettings_schema.jsonは、テーマ設定の構成・設定可能な内容を決めています。テーマエディタ上で変更可能なカスタマイズ項目を追加したいときに使います。
6.アセット（Assets）ディレクトリ
Assetsフォルダには、テーマで使用するCSSやJava Scripファイル、画像などを入れます。
新しいアセットを追加する、から画像やファイルのアップロードも可能です。
Shopifyテーマでは、assetsフォルダ内に、サブディレクトリを作ることができません。
Shopify CLIを使ってローカルで作業をするときに、imagesやcssフォルダを作って整理しようとすると、読み込めなくなるので注意が必要です。Shopifyのコード編集画面では、ディレクトリの作成自体ができないですね。
7.ロケール（Locales）ディレクトリ
ロケールディレクトリには、翻訳に使われる言語設定ファイルが入っています。
日本語表記はja.jsonとja.schema.json というファイルで設定されています。
ただ、エディター上部にも表示されているように、表記の変更は「テーマ言語エディター」からも行えます。
テーマ言語エディターをクリックすると、以下のようなページが開きます。
こちらのほうが分かりやすく、入力ミスでエラーになる危険も低いですね。ですので、jsonファイルを直接編集することは少ないです。
テーマ言語エディターは、テーマのアクション > 言語を編集 からも開くことが出来ます。
Shopifyテーマの構造について、なんとなくイメージが掴めたのではないでしょうか？ カスタマイズしたい部分がどのディレクトリ内か、なんとなく見当がつけば大丈夫。実際に触っていくと、しっかり把握できるようになります。
ファイルを開いてみて、コードとテーマエディタとを見比べてみると「あぁ、なるほど」と思う部分も結構あると思います。はじめて触るものの場合、管理画面やファイルを開いてみることも勉強になります。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
10月11日まで