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 Developers Platform（Shopify.dev）』があります。 URL：https://shopify.dev/
Shopify.devは日本語非対応。 親切なリファレンスとも言い難いですが、必要な情報は網羅されています。 テーマで使うShopify独自オブジェクトを調べるのにも、アプリなど本格的な開発を行う時にの参考にもなります。
今回～次回のレッスンで紹介するテーマの構造についてのルールも、下記で確認できます。 完全オリジナルのテーマ制作、テーマ開発者を目指すなら、目を通しておくと良いでしょう。
https://shopify.dev/themes/architecture
