Shopifyのテーマをカスタマイズしようと思ってコードを開くと、「フォルダがいっぱいある…」「どこを編集すればいいの？」と迷ってしまうことがあります。でも、最初からすべてのファイルを覚える必要はありません。Shopifyテーマでは、それぞれのフォルダに役割があります。まずは「どこに何が入っているのか」をざっくり知るところから始めてみましょう。

Shopifyテーマの基本構成

Shopifyテーマは、主に次の8つのフォルダで構成されています。

theme
├── assets
├── blocks
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates

それぞれの役割をまとめると、次のようになります。

この8つのフォルダは、どれかの中にどれかが入っているわけではなく、基本的には同じ階層に並んでいます。それぞれが別の役割を持ち、必要に応じてファイル同士が連携しながらページを作っています。ここからは、「実際にどんなときに見る場所なのか」という視点でもう少しだけ見ていきましょう。

layout

サイト全体の土台に関わる場所です。代表的なのが `theme.liquid` です。
サイト全体に共通するHTMLの大枠などが書かれているため、ページ単体というより、サイト全体に関わる変更をするときに確認する場所です。最初は「テーマ全体の土台」と覚えておけばOKです。

 templates

ページの種類ごとの構成を決める場所です。たとえば、

* `index.json` → トップページ
* `product.json` → 商品ページ
* `collection.json` → コレクションページ
* `page.json` → 固定ページ
* `blog.json` → ブログ一覧
* `article.json` → ブログ記事

などがあります。「商品ページを変更したい」「固定ページの構成を確認したい」というときは、まずtemplatesを確認すると分かりやすいです。現在のShopifyテーマでは、JSON形式のテンプレートから、ページで使用するsectionなどを指定する形がよく使われています。

 sections

ページを構成する大きなパーツを管理する場所です。たとえば、

* ヘッダー
* 画像バナー
* 商品一覧
* 画像＋テキスト
* フッター

などがあります。
Shopifyのテーマエディタから追加したり、並び替えたりできるコンテンツにも関係しています。そのため、実際にテーマをカスタマイズするときによく見る場所のひとつです。「このバナーを変更したい」「商品一覧の表示を変えたい」というときは、sectionsを探してみましょう。

blocks

小さなコンテンツやパーツを管理する場所です。たとえば、テキスト・ボタン・画像など、ページを構成する細かな要素に使われます。現在のShopifyでは、複数の場所で再利用できる「Theme blocks」を `blocks` フォルダに作ることもできます。sectionsよりも細かなパーツを扱う場所、と考えると分かりやすいです。
※ `blocks` フォルダが `sections` フォルダの中にあるわけではなく、フォルダ自体はそれぞれ独立しています。

snippets

何度も使う小さなコードをまとめておく場所です。たとえば、

* 商品カード
* 価格表示
* アイコン

など、同じコードを複数の場所で使いたいときに利用します。「いろいろな場所から呼び出して使う、共通部品の置き場所」というイメージです。

 assets

サイトの見た目や動きに関係するファイルを管理する場所です。CSSやJavaScript、画像などが入っています。たとえば、

「文字の色や余白を変えたい」
「ボタンのデザインを変更したい」
「JavaScriptの動きを変更したい」

といったときによく確認します。デザインをカスタマイズするときには、sectionsとあわせて見ることの多い場所です。

config

テーマ全体の設定に関係する場所です。テーマエディタで設定する色やフォントなど、テーマの設定項目や設定値に関係するファイルが入っています。普段のちょっとしたデザイン変更では触る機会は少なめなので、最初は「テーマの設定を管理する場所」と覚えておけば十分です。

 locales

テーマ内で表示する文章や翻訳を管理する場所です。たとえば、

「Add to cart」
↓
「カートに追加する」

のように、言語によって表示するテキストを切り替えるときに使われます。「表示されている文章を変更したい」「多言語に対応したい」というときに確認する場所です。

 最初は全部覚えなくてOK

ここまで8つのフォルダを紹介しましたが、最初から全部覚える必要はありません。Shopifyをカスタマイズするときは、まず次の4つを意識してみてください。

templates

→ どんなページなのかを確認する

sections

→ ページを構成する大きなパーツ

blocks / snippets

→ より細かなパーツや共通部品

assets

→ CSSやJavaScriptなど、見た目や動き

この違いがなんとなく分かれば、最初は十分です。たとえば「商品ページのデザインを変更したい」と思ったら、まず商品ページのtemplateを確認して、そこで使われているsectionを探し、必要に応じてCSSを確認する。このように、目的から少しずつ編集するファイルを探せるようになっていきます。

 まとめ

Shopifyテーマにはたくさんのフォルダやファイルがありますが、それぞれに役割があります。最初からファイル名や仕組みをすべて暗記する必要はありません。まずは、

「ページの種類はtemplates」
「ページのパーツはsections」
小さな部品はblocksやsnippets」
「見た目や動きはassets」

くらいの理解から始めてみましょう。実際にShopifyをカスタマイズしながら、「この変更をしたいときは、どのファイルを見る？」と少しずつ覚えていくのがおすすめです。次回は、これらのファイルがどのようにつながってページが作られているのかを見ていきます。