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

Shopifyのテーマ「Dawn」で複数のコレクションに属する商品の詳細画面で流入元に合わせて動的に関連コレクションを表示できるようにする設定例

Shopifyのテーマ「Dawn」で複数のコレクションに属する商品の詳細画面で流入元に合わせて動的に関連コレクションを表示できるようにする設定例

用途

  • 商品情報管理・編集

実装方法

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

Shopifyテーマの「特集コレクションセクション(コレクションの一部を商品やページに表示する機能)」を使って、複数のコレクションに掲載されている商品の詳細画面の場合、流入元のコレクションに合わせて関連コレクションの内容を動的に切り替える設定例です。回遊性の向上が期待できます。


テーマ「Dawn」で複数のコレクションに属する商品の詳細画面で流入元に合わせて動的に関連コレクションを表示できるようにする設定例


【設定手順①】テーマエディタで商品詳細に特集コレクション(featured-collection.liquid)セクションを追加しデフォルトで表示するコレクションを設定しておく


【設定手順②】featured-collection.liquidにパラメータの値からコレクションを設定するコードを追加し、複数箇所の「section.settings.collection」の部分を「section_collection」に差し替え


【設定手順③】card-product.liquidで、商品詳細ページへのリンクを設定している箇所にコレクションhandleをパラメータとして付与するコードを追加


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

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

サンプルコード

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

featured-collection.liquidにパラメータの値からコレクションを設定するコードを追加し、複数箇所の「section.settings.collection」の部分を「section_collection」に差し替え

関連ポスト