前レッスン確認した、テーマに必要な7つのディレクトリ。 今回は、それぞれのディレクトリの役割を見ていきましょう。
ページ構成に関わる4つのディレクトリ
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 'スニペット名' %} のように記述します。
テーマ全体の設定に関わる3つのディレクトリ
5.設定（Config）ディレクトリ
設定（Config）ディレクトリには、テーマ設定に関するファイル入っています。 入っているファイルは２つありますね。
settings_data.jsonでは、現在のテーマの共通設定が保存されています。
テーマエディタ > テーマ設定で色などを指定すると、その情報が保存されます。
もう一つのファイルsettings_schema.jsonは、テーマ設定の構成・設定可能な内容を決めています。
テーマエディタ上で変更可能なカスタマイズ項目を追加したいときに使います。
6.アセット（Assets）ディレクトリ
Assetsフォルダには、テーマで使用するCSSやJava Scripファイル、画像などを入れます。
新しいアセットを追加する、から画像やファイルのアップロードも可能です。
Shopifyテーマでは、assetsフォルダ内に、サブディレクトリを作ることができません。 ローカルで作業をする場合は、imagesやcssフォルダを作って整理すると、読み込めなくなるので注意。 Shopifyのコード編集画面では、ディレクトリの作成自体ができないので気にしないで大丈夫です。
7.ロケール（Locales）ディレクトリ
ロケールディレクトリには、翻訳に使われる言語設定ファイルが入っています。
日本語表記はja.jsonとja.schema.json というファイルで設定されています。
ただ、コード編集画面上部にも表示されているように、表記の変更は「テーマ言語エディター」からも行えます。 テーマ言語エディター のリンク文字をクリックしてみましょう。 以下のようなページが開きます。
こちらのほうが分かりやすく、入力ミスでエラーになる危険も低いですね。
なお、テーマ言語エディターは、テーマのアクション > 言語を編集 からも開くことが出来ます。
Shopifyテーマの構造について、なんとなくイメージが掴めたのではないでしょうか？ カスタマイズしたい部分がどのディレクトリ内か、なんとなく見当がつけば大丈夫。 実際に触っていくと、しっかり把握できるようになります。