【Shopify】テーマのディレクトリ構造について

テーマについて

Shopifyテーマとは、世界175か国で利用されているEC構築プラットフォーム「Shopify」のデザインテンプレートのこと。

ShopifyテーマにはECサイトのデザインや機能が組み込まれており、誰でも簡単にECサイトを構築できる。
テーマはShopifyの管理画面からカスタマイズ可能。

無料・有料のテンプレートが提供されている。

参照

今回はDawnテーマについて確認します。

ディレクトリ構成

Dawnは7つのディレクトリから構成されている。

レイアウト
テンプレート
セクション
スニペット
設定
アセット
ロケール

レイアウト（Layout）

レイアウトディレクトリは、テーマのベースとなる大枠を作る部分。
入っているファイルは、theme.liquidとpassword.liquidの２つ。

theme.liquid

ページの大枠部分で、Shopifyストアのほぼ全てのページで使われている。
headタグ内のCSS・JSファイルの読み込みや、ヘッダー・メイン・フッターなどの共通セクションの記述がある。
ヘッダーやフッターのセクションはbodyタグ内で読み込んでいるだけなので、直接編集したい場合は各セクションを編集する必要がある。
セクションにあるheader.liquidなど。

password.liquid

ショップオープン前の「オンラインストアのパスワード保護」状態の表示で使用。
ストアを公開すると不要になるため、こちらのファイルを編集することは基本無し。

theme.liquid→メインメニューやフッターセクションのような共通パーツを表示させるための記述がある。
password.liquid→ショップオープン前の「オンラインストアのパスワード保護」状態の表示で使用。公開したら使用しない。

テンプレート（Templates）

テンプレートディレクトリには、各ページのごとのテンプレートファイル（枠組み）が入っている。
20個のファイルが格納されている。
それぞれのファイルは、レイアウトのmain部分で読み込まれます。
ファイル名で、ざっくりどのファイルがどのページに該当するファイルなのかが分かる。

テーマエディタ（ノーコードのテーマ編集、カスタマイズのところ）上部で編集するページを切り替えられますが、これもテンプレートファイルと対応している。

• ブログ→blog.jason
• ブログ記事→article.jason
• カート→cart.jason

テーマファイルは増やせる。
よくある質問、会社概要などをそれぞれ作りこみたい場合は、テンプレートが複数必要になる。
テンプレートファイルはテーマカスタマイズで触れる頻度が高い。

セクション（Sections）

セクションディレクトリには、各ページで使用可能なセクションを作るためのLiquidファイルが格納されている。
セクションは、テンプレートの中に配置できるブロックパーツのこと。
テーマエディタの左側にある、ヘッダーやフッター、リッチテキストなどが該当。

• rich-text.liquid→リッチテキスト

テーマエディタ上の表記と、ファイル名はほぼ同じ。

セクションファイルも増やせる。
ストアに合ったセクションを作ったり、ブロックを追加したりと、テーマカスタマイズではセクションファイルも触る機会が多い。

スニペット（Snippets）

スニペットディレクトリには、各ページ内で使用する細かいアイテムのLiquidファイルが格納されている。
レイアウト、テンプレート、セクション、スニペットどのファイルからも呼び出して利用することが可能。

例）
icon-facebook.liquidはfacebookアイコンのSVGを指す。
icon-youtube.liquidであればYou Tubeのアイコンのsvgタグだけが記載されている。

icons.liquidなどとしてまとめて記載されることも。

スニペットはテーマエディタでノーコード編集不可。
liquidファイルを記述する必要がある。

設定（Config）

テーマ設定に関するファイル格納されている。
2つのファイルが格納されている。

• settings_data.json
• settings_schema.json

settings_data.json

現在のテーマの共通設定が保存されている。
テーマエディタで設定されたデータが保存されていて、
テーマエディタ > テーマ設定で色などを指定すると、その情報が保存される。

settings_schema.json

テーマ設定の構成・設定可能な内容を定義している。
テーマエディタ上で変更可能なカスタマイズ項目を追加する際に使用する。

settings_data.json→テーマの共通設定が保存されている。
settings_schema.json→テーマエディタ上で変更可能なカスタマイズ項目を追加する際に使用。

アセット(Assets)

テーマで使用するCSSやJava Scripファイル、画像などが格納されている。

テーマのコード編集画面から新しいアセットを追加する、から画像やファイルのアップロードも可能。

サブディレクトリを作ることはできない。
Shopify CLIを使ってローカルで作業をするときに、imagesやcssフォルダを作って整理しようとすると、エラーとなり読み込めなくなる。
テーマのコード編集から追加する場合は「新しいアセットを追加する」から直接アセットの配下にファイルを追加する形になる。

ロケール(Locales)

ロケールディレクトリには、翻訳に使われる言語設定ファイルがデフォルトで格納されている。
〇〇.jsonと〇〇.schema.json というファイルで設定されている。
ページで表示される日本語は、ja.jsonで編集可能。
同じ編集は、管理画面（テーマ言語エディター）からも可能。

• Shopifyテーマ→3点リーダー→デフォルトテーマのコンテンツを編集する

テーマ言語エディターからの編集のほうがわかりやすいためjasonから編集することは少ないと思われる。
各項目ごとに入力できるため入力ミスの可能性も低くなる。