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

Shopifyのテーマ「Dawn」でSearch&Discoveryで設定した「付属商品」を関連商品セクションと同じ形で表示したい場合の設定例

Shopifyのテーマ「Dawn」でSearch&Discoveryで設定した「付属商品」を関連商品セクションと同じ形で表示したい場合の設定例

用途

  • 商品情報管理・編集

実装方法

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

Shopifyのテーマ「Dawn」の商品詳細画面には自動でサジェストされる「関連商品」とは別に手動でサジェスト指定可能な「付属商品」を表示するための枠があります。ただ、少々この表示枠が小さく、関連商品と同じサイズで並べたい場合があります。その設定例です。


テーマ「Dawn」でSearch&Discoveryで設定した「付属商品」を関連商品セクションと同じ形で表示したい場合の設定例


【設定方法①】コード編集から新規セクションファイル「complementary-products.liquid」を作成する


【設定方法②】「related-products.liquid」のコードの中身をまるごと「complementary-products.liquid」にコピー&ペーストする


【設定方法③】「complementary-products.liquid」にペーストしたコードの一部を修正する


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

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

サンプルコード

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

タグのdata-url属性の末尾に「&intent=complementary」という文字列を追加

セクション schema 設定の“name”値を「付属商品」に書き換え、enabled_onプロパティを追加

テーマエディタ上でセクションとして追加できるようにpresetsプロパティを追加

関連ポスト

すべてのShopify TIPS