>> 運営者プロフィールはこちら

【Shopify】表示中のページで使われているテンプレートファイルを表示

Shopify カスタマイズ テンプレート ファイル名表示 カスタマイズ
記事内に広告が含まれています。

ShopifyでテーマのLiquidファイルをカスタマイズしているけど、現在表示中のページとテンプレートファイルとの対応関係が知りたい。
表示中のページで使われているテンプレートファイルの調べ方を教えて欲しい。

こんなことを考えている方へ。
この記事のポイントは以下です。

Shopifyで現在表示中のページで使われているテンプレートファイルを確認する方法

Shopify飯店

Shopify飯店

>> 運営者の詳しいプロフィールはこちら

\当サイトのおすすめ記事はこちら👇/

■■Shopifyを学ぼう■■

人気記事 4万文字で徹底解説!Shopifyおすすめスクールまとめ!🏫
人気記事 1.5万文字でデイトラShopifyコース!を徹底解説!口コミはこちら📺
人気記事 2万文字で忍者CODEShopifyコース!を徹底解説!口コミはこちら📺
人気記事 Shopifyのおすすめ学習方法まとめ!👩‍💻
人気記事 筆者の経験談!独学ロードマップ決定版!🖥
人気記事 Shopifyを学べるおすすめの書籍まとめ!📚
人気記事 日本語のみを厳選!おすすめのUdemy動画教材🎦
人気記事 コピペでOK!カスタマイズパーツ販売中📝

 

スポンサーリンク

【Shopify】現在表示中のページで使われているテンプレートファイルを調べる方法

Shopifyで現在表示中のページで使われているテンプレートファイルを確認する方法を解説します。

テーマファイルのJavaScriptに追加の記述をすることで、現在使用中のテンプレートをconsole.log()で出力できます。
Shopifyのカスタマイズを行う際は、是非設定しておきましょう。

【関連記事】【Shopify】Liquidのチートシートなど便利なサイトまとめ

【Shopify】Liquidのチートシートなど便利なサイトまとめ
Shopify案件のカスタマイズ時によく見るページや参考にしているサイトをまとめました。Liquidのチートシートは一番よく見ます。基本英語なのでChromeのブラウザ翻訳機能を使って読んでいます。

 

①theme.liquidにJavaScriptの記述を追加する

Shopifyにログインしたら、「オンラインストア>テーマ」へと進みます。
そして、カスタマイズ中のテーマを選び、「アクション>コードを編集」を押します。

Shopify カスタマイズ テンプレート ファイル名表示

数あるファイルの中から「theme.liquid」を開きます。

Shopify カスタマイズ テンプレート ファイル名表示

そして、「theme.liquid」の閉じタグの直前に、次のコードを記述します。

console.log("{{ template }}")

Shopify カスタマイズ テンプレート ファイル名表示

追加が終わったら「保存」を押します。

Shopify カスタマイズ テンプレート ファイル名表示

 

②ブラウザの検証モードで確認する

実際にブラウザの検証モードを使って、テンプレートファイル名を確認してみましょう。
コンソールの項目を見ると、テーマファイル名が出力されます。

たとえば、こちらは「index」です。
ストアのトップページのファイルですね。

Shopify カスタマイズ テンプレート ファイル名表示

こちらは「search」です。
ストアのサイト内検索結果ページのファイルですね。

Shopify カスタマイズ テンプレート ファイル名表示

こちらは「collection」です。
商品をグルーピングしたコレクションページのファイルですね。

Shopify カスタマイズ テンプレート ファイル名表示

こちらは「product」です。
商品詳細ページのファイルですね。

Shopify カスタマイズ テンプレート ファイル名表示

このようにして、今自分が表示しているページが何のテンプレートなのかが一目でわかるようになります。
大規模なカスタマイズで、テンプレートファイル数が増えた時には重宝します。

 

スポンサーリンク

Shopifyのテーマファイルを編集する前にはバックアップを取りましょう

ストアのコードを編集する場合は、必ずテーマのバックアップを取りましょう。
バックアップさえ取っていれば、万が一不具合が出ても元に戻すことができます。

バックアップの方法は大きく分けて2種類あります。

①テーマの「複製」機能でバックアップを行う方法
②「テーマエクスポート」でバックアップを行う方法

この2つを解説します。

 

①テーマの「複製」機能でバックアップを行う

1つ目の方法はテーマの「複製」機能でバックアップを行うやり方です。
Shopifyにログインしたら、「販売チャネル>オンラインストア>テーマ」へと進みます。

Shopify カスタマイズ テンプレート ファイル名表示

「アクション」を押すとメニューが展開されるので、「複製」を押します。

Shopify カスタマイズ テンプレート ファイル名表示

すると、「●●●●のコピー」という名前でテーマが複製(コピー)されます。

Shopify カスタマイズ テンプレート ファイル名表示

最後に、いつ時点のバックアップなのかを名前に含めます。
私は「yyyymmddまで_ストア名」とすることが多いです。

Shopify カスタマイズ テンプレート ファイル名表示

たとえば、ストア名が「Shopify飯店」で、バックアップ日付が2023年4月25日ならば、「20230425まで_Shopify飯店」といった形ですね。

 

②「テーマエクスポート」でバックアップを行う

2つ目の方法は「テーマエクスポート」機能でバックアップを行うやり方です。
Shopifyにログインしたら、「販売チャネル>オンラインストア>テーマ」へと進みます。

Shopify カスタマイズ テンプレート ファイル名表示

「アクション」を押すとメニューが展開されるので、「テーマファイルをダウンロード」を押します。

Shopify カスタマイズ テンプレート ファイル名表示

すると、ポップアップが開きます。
ファイルデータの送信先のアドレスが表示されるので、問題なければ「メールを送信する」を押します。

Shopify カスタマイズ テンプレート ファイル名表示

すると、指定されたアドレスに以下のメールが届きます。
メール本文内の「テーマのエクスポート」を押せば、テーマファイルをダウンロードできます。

Shopify カスタマイズ テンプレート ファイル名表示

ファイルはZIP形式で圧縮されています。

Shopify カスタマイズ テンプレート ファイル名表示

解凍すると、ディレクトリごとに整理されたテーマファイルを見ることができます。

Shopify カスタマイズ テンプレート ファイル名表示

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|オンラインスクール・本・動画

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。
そこで、仕事でShopifyを扱っている筆者が、おすすめの学習方法をまとめました。

オンラインスクール、本(参考書)、動画教材(Udemy)を活用して、効果的に学習しましょう。思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

\当サイトのおすすめ記事はこちら👇/

■■Shopifyを学ぼう■■

人気記事 4万文字で徹底解説!Shopifyおすすめスクールまとめ!🏫
人気記事 1.5万文字でデイトラShopifyコース!を徹底解説!口コミはこちら📺
人気記事 2万文字で忍者CODEShopifyコース!を徹底解説!口コミはこちら📺
人気記事 Shopifyのおすすめ学習方法まとめ!👩‍💻
人気記事 筆者の経験談!独学ロードマップ決定版!🖥
人気記事 Shopifyを学べるおすすめの書籍まとめ!📚
人気記事 日本語のみを厳選!おすすめのUdemy動画教材🎦
人気記事 コピペでOK!カスタマイズパーツ販売中📝

\初回購入で最大90%OFF👇/

■■Udemyは初回購入がお得■■

Udemy Shopify
Point Udemyは初回購入がお得!
Point 通常1万〜2万円の商品が80%OFF〜90%OFF程度の値段で購入できる!
Point ランチ1回分の値段でShopifyを学べます!

 

スポンサーリンク

まとめ

この記事のポイントをまとめます。

テーマファイルのJavaScriptに追加の記述をすることで、現在使用中のテンプレートをconsole.log()で出力できます。
Shopifyのカスタマイズを行う際は、是非設定しておきましょう。

設定の手順は次の通りです。

①theme.liquidにJavaScriptの記述を追加する
②ブラウザの検証モードで確認する

今回の記事はここまでです。

この記事を書いた人
Shopify飯店店主

自分の仕事の経験を記事にしています。東証一部のEC企業で5年→個人事業主→法人化。サイト構築実績80社以上、ECコンサル・分析実績40社以上。コンサルにおいては、EC売上3倍、キャンペーン応募者数1.7倍などの実績があります。

Shopify飯店店主をフォローする
カスタマイズ
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました