Shopifyテーマをカスタマイズしようとしたとき、どのliquidファイルを編集すればよいかわからない、といった経験はありませんか？テーマ構造を理解することで、どのページにどのliquidファイルが対応しているかがおおよそ掴めるようになるため、効率的にカスタマイズを進められるようになります。本記事ではShopifyのテーマ構造について解説します。
テーマ構造の基本
Shopifyのテーマは、いくつかの重要なファイルやフォルダで構成されています。それぞれの役割を理解することで、どこを編集すればよいかが明確になります。
テーマのフォルダ構成
Shopifyテーマは以下のようなフォルダ構成になっています。
.
├── assets
├── blocks
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
└── customers
└── metaobject
各フォルダが何を管理しているのかを具体的に見ていきましょう。
assetsフォルダ
assetsフォルダには、CSSやJavaScript、画像ファイルなどのリソースが保存されています。 {{ 'sample.js' | asset_url }} のようにasset_urlフィルタを利用することでliquidファイルからassetsフォルダ内のリソースを参照することができます。
blocksフォルダ
ブロックはあらゆる箇所で使われることを想定してつくられたパーツのようなものとして作られますが、そのブロックを格納するフォルダがblocksフォルダになります。ブロックは必ずしも必要なわけではないため、blocksフォルダが空のテーマも存在します。
configフォルダ
configフォルダには settings_data.json や settings_schema.json などのテーマ設定に関するファイルが保存されています。うまく利用すれば様々な要素を設定項目として共通化できますが、イチからテーマ開発を行うなどでなければ、始めのうちはあまり触る機会はないでしょう。
layoutフォルダ
layoutフォルダにはテーマ全体のベースとなるレイアウトファイルが含まれており、Shopifyストアのページは、このフォルダのいずれかのファイルを土台として構築されます。なお、テーマをShopifyにアップロードするためには、layoutフォルダ内に theme.liquid が必ず含まれている必要があります。
localesフォルダ
localsフォルダは翻訳されたコンテンツを提供するために必要なロケールファイルを配置する場所です。各言語のテキストをカスタマイズしたい場合、ここに配置されたファイルを修正することになります。
sectionsフォルダ
sectionsフォルダには、動的に編集可能なセクションが含まれています。サイトに描画される部分は、このフォルダに格納されているliquidファイルに記述されることが多いため、特定のページをカスタマイズしたい場合には、このフォルダから目的のページに該当しそうなファイル名にアタリをつけると良いです。
snippetsフォルダ
snippetsフォルダには、小規模なテンプレートパーツが含まれています。繰り返し使用されるコードを保存し、効率的に再利用することができます。ブロックと似ていますが、テーマエディタには表示されないため、複雑なロジックをパーツ化するなど、開発者に閉じた再利用を目的にしたファイルが保存されます。
templatesフォルダ
templatesフォルダには、ページごとのテンプレートファイルが保存されています。以前はliquidファイルのみでしたが、現在はJSON形式のテンプレートファイルを使うことが主流になっており、トップページ、商品ページ、コレクションページなどの構造を決定する役割を持っています。
図で表すと以下のようになります。
①はレイアウトファイル、②がテンプレートファイル、③④がセクション、⑤がブロック、という作りです。
ref: https://shopify.dev/docs/storefronts/themes/architecture#markup-and-features
まとめ
Shopifyのテーマ構造を理解することは、効率的なカスタマイズの第一歩です。本記事で紹介した基本構造を参考に、ぜひ自分のストアをより魅力的にしてみてください。初心者でもできる簡単な変更から始め、慣れてきたら徐々に応用的な編集にも挑戦してみましょう。