Shopifyをコードから触ろうと思った時に、必ず理解しておかなければいけないのが、Shopifyにあるフォルダやファイルがどのような構造になっているのかです。
ここでは、テーマフォルダとその中にあるファイルの構造を覚えましょう。
「Shopifyの管理画面⇒オンラインストア⇒...⇒コード編集」
の順にクリックすると、コード編集画面に移動します。
フォルダは以下の順で並んでいます。
Shopifyのフォルダは、この順序どおりに上から読み込まれていきます。
Shopifyの管理画面から入ると、日本語表記になっていますが、ShopifyCLIなどでローカル環境からコード編集をすると、英語表記になります。
各フォルダの英語表記と各フォルダの内容は、
-
レイアウト⇒「layout」：
「theme.liquid」ファイルと「password.liquid」ファイルが入っています。
theme.liquid：Shopifyテーマの一番外の枠組みが記載されたファイル。headerとテンプレートとfooterなどが入っています。
password.liquid：パスワード設定しサイトにアクセスした時に表示されるページの枠組みが書かれたファイル。
-
テンプレート⇒「templates」：
各ページを構成するファイルがjson形式で入っています。
index.json：トップページを構成するファイル。
product.json：各商品ページを構成するファイル。テンプレートフォルダ内のファイルは各々１つしか作成できないが、product.jsonは複数作れる。複製した場合のファイル名は「product.*****.json」となります。
その他、blog.json, 404.jsonなどがあります。
-
セクション⇒「sections」：
各テンプレートを構成するファイルがliquid形式で入っています。テーマごとにファイルの名前は異なり、自分で新たな名前のセクションファイルを作ることも出来ます。
header.liquid：ヘッダーの構成が書かれたファイル。
main-blog.liquid：ブログの個別記事の構成が書かれたファイル。
その他、featured-product.liquid等があるが、ここで上げたファイル名はテーマ「Dawn」固有のもので他のテーマになると名前が変わるので注意が必要。
-
スニペット⇒「snippets」：
スニペットにはセクション内で利用する細かなコードのまとまりが記載してあります。また、その他にもセクション内で使用されるアイコンなども置いてあります。
スニペットファイル内には、schemaは書けない。
セクションファイル内でスニペットを呼び出すには{% render 'icon-arrow' %}のような形で記載する。（icon-arrowは、icon-arrow.liquid）
※以下のような記載の場合は、セクションではproductで呼び出していたものがcard-product.liqui内ではdcard_productで読み込みになるので注意が必要。
- {% render 'card-product', card_product: product %}
-
設定⇒「config」：
テーマの設定の情報が保存されている。
settings_data.json：カスタム画面のテーマ設定の情報が記載されている。
settings_chema.json：settings_data.jsonに書かれたデータがカスタム画面で動的に反映されるようにschemaが書かれている。
-
アセット⇒「assets」：
cssやjs、または画像が置いてあるフォルダ。
cssやjsのファイルは、拡張子を.liquid（例：custom.css.liquid）とすることでliquidも記載できるようになる。
cssやjsを新たに書き込みたい場合は、アセットフォルダ内に新たにファイルを作り記載していく。
-
ロケール⇒「locales」：
言語設定についての記載があるフォルダ。
日本語に関しては以下の２つのフォルダ内に記載あり。
セクションフォルダ内のファイルに{{ '*********' | t }}のように、波括弧内に「 | t 」が書かれたものがあればロケールフォルダ内から引っ張ってきている。
「Shopify管理画面⇒...⇒デフォルトテーマのコンテンツを編集する」から編集も可能。
ja.json：ストアに直接反映される部分の日本語翻訳内容が書かれたファイル。
ja.schema.json：管理画面の日本語翻訳の詳細内容が記載されたファイル。
日本語が設定されていないテーマだと、そもそも上記の２つのファイルがないため、自分でファイルを作成しなければいけない。
Liquidでコードを記載する時には、テーマフォルダの構造を理解することが必要です。
最低限、「レイアウト」＞「テンプレート」＞「セクション」＞「スニペット」の順に小さいファイルが格納されていることを知っておきましょう。