shopifyイメージ

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

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

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

目次[非表示]

  1. 1.今回使用する例
  2. 2.Shopifyテーマの構造
  3. 3.テンプレート・セクションの特定
  4. 4.ソースファイルの特定
  5. 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に関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー


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

Shopify導入についてのサービス問い合わせ

Shopifyアプリ解説・紹介記事


【無料】セミナー動画視聴


EC関連サービス


トランスコスモスのEC全領域を網羅するサービス


従業員(メンバー)インタビュー


トランスコスモスの定量的な強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
ロジスティクスサービス

 記事カテゴリー

【週間ランキング】ECブログ人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用