ShopifyでテーマのLiquidファイルをカスタマイズしているけど、現在表示中のページとテンプレートファイルとの対応関係が知りたい。
表示中のページで使われているテンプレートファイルの調べ方を教えて欲しい。
こんなことを考えている方へ。
この記事のポイントは以下です。
Shopifyの学習方法まとめ
🔽その他のおすすめ記事はこちら👇
・おすすめの書籍はこちら📚
・おすすめのUdemy動画教材はこちら🎦
・独学ロードマップはこちら🖥
・おすすめオンラインスクールまとめはこちら📖
・スクールの中でもデイトラがおすすめです🏫
【Shopify】現在表示中のページで使われているテンプレートファイルを調べる方法
Shopifyで現在表示中のページで使われているテンプレートファイルを確認する方法を解説します。
テーマファイルのJavaScriptに追加の記述をすることで、現在使用中のテンプレートをconsole.log()で出力できます。
Shopifyのカスタマイズを行う際は、是非設定しておきましょう。
【関連記事】【Shopify】Liquidのチートシートなど便利なサイトまとめ
①theme.liquidにJavaScriptの記述を追加する
Shopifyにログインしたら、「オンラインストア＞テーマ」へと進みます。
そして、カスタマイズ中のテーマを選び、「アクション＞コードを編集」を押します。
数あるファイルの中から「theme.liquid」を開きます。
そして、「theme.liquid」の閉じタグの直前に、次のコードを記述します。
console.log("{{ template }}")
追加が終わったら「保存」を押します。
②ブラウザの検証モードで確認する
実際にブラウザの検証モードを使って、テンプレートファイル名を確認してみましょう。
コンソールの項目を見ると、テーマファイル名が出力されます。
たとえば、こちらは「index」です。
ストアのトップページのファイルですね。
こちらは「search」です。
ストアのサイト内検索結果ページのファイルですね。
こちらは「collection」です。
商品をグルーピングしたコレクションページのファイルですね。
こちらは「product」です。
商品詳細ページのファイルですね。
このようにして、今自分が表示しているページが何のテンプレートなのかが一目でわかるようになります。
大規模なカスタマイズで、テンプレートファイル数が増えた時には重宝します。
Shopifyのテーマファイルを編集する前にはバックアップを取りましょう
ストアのコードを編集する場合は、必ずテーマのバックアップを取りましょう。
バックアップさえ取っていれば、万が一不具合が出ても元に戻すことができます。
バックアップの方法は大きく分けて2種類あります。
この2つを解説します。
①テーマの「複製」機能でバックアップを行う
1つ目の方法はテーマの「複製」機能でバックアップを行うやり方です。
Shopifyにログインしたら、「販売チャネル＞オンラインストア＞テーマ」へと進みます。
「アクション」を押すとメニューが展開されるので、「複製」を押します。
すると、「●●●●のコピー」という名前でテーマが複製（コピー）されます。
最後に、いつ時点のバックアップなのかを名前に含めます。
私は「yyyymmddまで_ストア名」とすることが多いです。
たとえば、ストア名が「Shopify飯店」で、バックアップ日付が2023年4月25日ならば、「20230425まで_Shopify飯店」といった形ですね。
②「テーマエクスポート」でバックアップを行う
2つ目の方法は「テーマエクスポート」機能でバックアップを行うやり方です。
Shopifyにログインしたら、「販売チャネル＞オンラインストア＞テーマ」へと進みます。
「アクション」を押すとメニューが展開されるので、「テーマファイルをダウンロード」を押します。
すると、ポップアップが開きます。
ファイルデータの送信先のアドレスが表示されるので、問題なければ「メールを送信する」を押します。
すると、指定されたアドレスに以下のメールが届きます。
メール本文内の「テーマのエクスポート」を押せば、テーマファイルをダウンロードできます。
ファイルはZIP形式で圧縮されています。
解凍すると、ディレクトリごとに整理されたテーマファイルを見ることができます。
参考：Shopifyを学ぶ方法まとめ｜本・動画教材・オンラインスクール
Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本（参考書）、動画教材（Udemy）、オンラインスクールを活用して、効果的に学習しましょう。
思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。
仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。
【関連記事】【2023年最新】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】
【関連記事】【2023年最新】デイトラShopifyコースは買うべき？【レビュー】
※2コース目以降の追加受講は5000円引き！
【関連記事】【2023年最新】Shopifyの学習におすすめの動画教材（Udemy）まとめ
【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ
【関連記事】【2023年最新】【Shopifyの独学】勉強方法のまとめ【初心者向け】
2023年6月2日（金）まで、Shopifyの動画教材が2,000円から買える！
Udemyはセールのタイミングに買うべきです。通常1万〜2万円の商品がセール中だと80%OFF〜90%OFF程度の値段で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る
まとめ
この記事のポイントをまとめます。
テーマファイルのJavaScriptに追加の記述をすることで、現在使用中のテンプレートをconsole.log()で出力できます。
Shopifyのカスタマイズを行う際は、是非設定しておきましょう。
設定の手順は次の通りです。
今回の記事はここまでです。
