2023/09/12 (更新日: 2023/09/18)

【Shopify】表示されているページのテンプレート名を調べる方法【簡単】

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは！

本記事では、Shopifyで表示されているページのテンプレート名を調べる方法を解説します！

開発していく上で、自分がどのページをカスタマイズしているのかが分からなくなったり、どのページをカスタマイズをすればいいのか調べる必要があったりします。

そんな時は、表示されているページのテンプレート名を調べる方法を使えば解決できます。簡単なのでぜひ活用してみてください。

使っているテーマやバージョンは下記になります。

他のテーマやバージョンが違うとうまくいかないこともあるので、実装前はソースコードをバックアップしたり、テーマ自体を複製したりと対策をしておいてください。

Shopify参考記事一覧

表示されているページのテンプレート名を調べる方法

調べる方法は簡単です。

順番に見ていきます。

まずは、theme.liquidを開き、下記のソースコードを埋め込みます。


    <script>
      console.log("{{ template }}");
    </script>

これでOKです。簡単ですね。

参考画像を貼付するので、分からない方は参考にしてみてください！

Shopifyのコード編集から直接記述する場合

VSCodeの方

このようになればOKです。そしたら保存します。
ターミナルで開発している方はpushやshopify serveなどで確認してみてください。

保存が終わったら、各ページをデベロッパーツールで確認します。
コンソールを見れば、どのページを触っているかが記載されているので、テンプレート名が分かるようになります。

このように、Shopifyはテンプレート構造がシンプルでありがながらやや複雑なこともあります。

いかがでしたか？

実装や設定が難しいようであれば、ぜひお問い合わせページからご相談いただければご対応しますので、お気軽にどうぞ(｀・ω・)ゞ