商品情報にスキップ
1 1
公開日:2024.12.05

Shopifyのテーマ「Dawn/Rise」のコレクションページで 商品リストの間にバナー画像を差し込む設定例

Shopifyのテーマ「Dawn/Rise」のコレクションページで 商品リストの間にバナー画像を差し込む設定例

用途

  • トップページ編集

実装方法

  • LIQUID
  • HTML/CSS
詳細を表示する

Shopifyのテーマ「Dawn/Rise」のコレクションページで、プロモーション用のバナー画像を商品と商品の間に埋め込んで表示するための方法です。

◆実装手順(Rise/Dawn テーマの場合)
・コレクションテンプレートの商品グリッドセクションにブロック要素を新規追加
・新規追加したブロック用を差し込むコードを設定

◆バナー設定手順
・テーマエディターの「コレクション」テンプレートを開く
・「商品グリッド」セクションの「プロモーションバナー」ブロックを追加し、画像やリンク先などを設定
・バランスと考慮しつつ、バナー画像の表示位置を調整

◆補足
・表示設定数とは別にバナー画像を差し込むため1ページあたりの商品表示数にズレが生じます。末端を揃えるには表示するバナー数と表示列数による調整が必要になります。


テーマ「Dawn/Rise」のコレクションページで商品リストの間にバナー画像を差し込む設定例


【(テーマRiseの場合)設定手順①】「sections/main-collection-product-grid.liquid」のschemaにblocks要素を新たに追加


【(テーマRiseの場合)設定手順②】「sections/main-collection-product-grid.liquid」にコードを追加


【設定方法(テーマRise/Dawnの場合)】コレクションテンプレートの商品グリッドセクションでブロックを追加し画像とリンク先、バナー表示位置および画像比を設定


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「sections/main-collection-product-grid.liquid」のschemaにblocks要素を新たに追加

関連ポスト