Dawn コレクションページごとに画像を表示させたい

Topic summary

Dawnテーマを使用したShopifyストアで、4つのコレクションページそれぞれに異なる画像バナーを表示させたい質問。

問題点:

  • テーマエディタでは全コレクションに同じバナー画像しか設定できない
  • liquid.themeにscriptタグとif文(URL取得による条件分岐)を追加して試したが実現できなかった

提案された解決方法:

方法1:コレクション毎にテンプレートを作成

  • 各コレクション用の専用テンプレートを新規作成
  • 各テンプレートに対応するバナー画像を設定
  • 各コレクションに適切なテンプレートを適用

方法2:コレクション説明欄にバナー画像を挿入

質問者は方法1でコード編集なしに実現でき、問題が解決したと報告。

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

Dawnテーマでショプを作成しており、コレクションページごとに画像バナーを表示させたいと思います。具体的に、

全部で4つのコレクションページがあります。

ページAに画像バナーAを表示させる

ページBに画像バナーBを表示させる

ページCに 画像バナーCを表示させる

ページDに画像バナーDを表示させる

問題点:

編集画面ではページごとに画像バナーを設定することができなく、全てのコレクションページは同じ画像バナーになってしまいます。theme.liqudに<script>タグを追加し、if文(URLを取得して条件分岐させる)で試してみましたが、うまくいかず実現できませんでした。

設定方法をご存知の方教えていただけますか?

よろしくお願い致します。

はじめまして

株式会社Tsunの吉谷と申します。

コクレション毎にバナーを出し分ける簡単な方法として下記2つの方法があると考えています。

方法1:コレクション毎にコレクションテンプレートを作成する

手順

1.テーマエディタを開く

2.コレクションA用のコレクションテンプレートAを新規で作成

3.コレクションテンプレートAにバナー画像Aを設定

4.コレクションAにコレクションテンプレートAを適用する

参考ページ

新しいテンプレートを作成する|Shopifyヘルプセンター

新しいテンプレートを適用する|Shopifyヘルプセンター

方法2:コレクションの説明にバナー画像を挿入する

以上になります

参考になりましたら幸いです。

吉谷さま

ご教示いただきありがとうございます。

コード編集しなくても実現できる方法は知りませんでした。

頂いた方法1で実現できました!心から感謝いたします。

貴重な時間をいただき本当にありがとうございます!

1 Like