Shopifyテーマの読み方～ソースファイルの追い方編～

2023-05-31 08:10（更新：2024-01-17 06:29）トランスコスモスShopifyエンジニアShopify

Shopify ショッピファイ Shopify Plus

この記事は、Shopifyで構築されたサイトのソースコードを読んでみたい！という方を対象にしています。今回は、具体的な例をあげてソースファイルの追い方を説明します。

目次[非表示]

1.今回使用する例
2.Shopifyテーマの構造
3.テンプレート・セクションの特定
4.ソースファイルの特定
5.最後に

今回使用する例

今回は、下記の商品カード部分がどこのソースファイルに書かれているかを、Shopifyテーマの構造から特定してみたいと思います。
※テーマはShopifyのデフォルトテーマである「Dawn」を使用しています。

Shopifyテーマの構造

実際にファイルを特定する前に、Shopifyテーマ全体の構造について説明します。Shopifyテーマは、下記のように7つのディレクトリが存在します。

基本的には、レイアウトファイルに<head>タグや<body>タグなど全体のHTML構造が記載されており、<body>タグの中で、テーマ共通の要素（ヘッダー・フッター等）や、各ページ固有のテンプレートが呼び出されます。テンプレートファイルの中では様々なセクションファイルが呼び出され、更に小さい単位のスニペットファイルが呼び出される場合もあります。

上記の例では、このような構成になっています。

レイアウト：テーマ→サイト全体（ヘッダー・フッターを含む）を構成するファイル
テンプレート：コレクション → DOUGHNUT（商品一覧）ページを構成するファイル
セクション：商品グリッド → 商品一覧（商品カードのまとまり）を構成するファイル
スニペット：商品カード → 商品一覧のひとつのパーツ（商品カード）を構成するファイル

テンプレート・セクションの特定

それでは、実際にファイルを特定していきましょう。最初に、読みたい箇所が記載されているShopifyテーマのテンプレート・セクションを特定します。

1.Shopifyの管理画面を開きます。

①「オンラインストア」をクリックします。
②テーマ画面の「カスタマイズ」ボタンをクリックします。

2.カスタマイズ画面(テーマエディタ)内で、読みたいページに遷移すると、以下を確認することができます。

①対象のページは、「デフォルトのコレクション」というテンプレートを使用しています。
②商品カードは、上記テンプレートの中で2番目に位置する「商品グリッド」というセクションに所属しています。

ソースファイルの特定

次に、読みたい箇所が記載されているShopifyテーマのソースファイルを特定します。

1.オンラインストアのテーマ画面に戻ります。

①「…」ボタンをクリックします。
②「コードを編集」をクリックします。

2.「テンプレート・セクションの特定」で得た情報を元に、「デフォルトのコレクション」のテンプレートファイルを探します。

コード編集画面(コードエディタ)で、「collection」と検索します。

3.①の「collection.json」をクリックすると、コレクションテンプレートのソースファイルが開き、以下を確認することができます。

②"order"(並び順)を見ると、2番目に"product-grid"(商品グリッド)が存在します。
③"sections"(セクション)を見ると、"product-grid"(商品グリッド)の"type"(セクションファイル名)は「main-collection-product-grid」となっています。

4.コード編集画面(コードエディタ)で、「main-collection-product-grid」と検索します。

5.①の「main-collection-product-grid.liquid」をクリックすると、商品グリッドのソースファイルが開き、以下を確認することができます。

②商品カードを表示している部分に、renderと書いてあります。
※renderは、スニペット(再利用可能な小さなコード)ファイルを呼び出す時に記述されます。

6.コード編集画面(コードエディタ)で、「card-product」と検索します。

7.「card-product.liquid」をクリックすると、冒頭で示した商品カードのソースファイルが開き、ソースコードを確認することができます。

最後に

いかがでしたでしょうか。今回は一例からソースの追い方を説明しましたが、テーマファイルの構造を理解することで、正確にソースを追うことができるようになります。ソースコードの中身を読むためには、ShopifyはLiquidというテンプレート言語を使用しているので、HTML・CSS・JavaScriptとは別に、Liquidの理解も必要です。今回紹介できなかったものについては、また次回以降にご紹介できればと思いますので、引き続きよろしくお願いします。

トランスコスモスShopifyエンジニア

トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。