>> Udemyのセール!Shopify講座が2,000円から!6/2まで

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

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

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

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

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

Shopify飯店

Shopify飯店

🔽Shopifyを学びたい方へ👇
私はShopifyを独学しましたが、いま思えば効率が悪かったと思います。
自身の経験を踏まえて、おすすめの学習方法を以下の記事にまとめました。

Shopifyの学習方法まとめ
🔽その他のおすすめ記事はこちら👇
・おすすめの書籍こちら📚
・おすすめのUdemy動画教材こちら🎦
独学ロードマップはこちら🖥
・おすすめオンラインスクールまとめはこちら📖
スクールの中でもデイトラがおすすめです🏫

 

スポンサーリンク

【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を扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】【2023年最新】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【オンラインスクール紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2023年最新】デイトラShopifyコースは買うべき?【レビュー】
※2コース目以降の追加受講は5000円引き!

デイトラShopifyコースは買うべきか?徹底レビュー【2023年最新】
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】【2023年最新】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ【2023年最新】
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【2023年最新】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyでセールが開催中!】
2023年6月2日(金)まで、Shopifyの動画教材が2,000円から買える!
Udemyはセールのタイミングに買うべきです。通常1万〜2万円の商品がセール中だと80%OFF〜90%OFF程度の値段で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

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

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

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

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

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

タイトルとURLをコピーしました