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

Shopifyで最後に閲覧した商品に関連するコレクションをトップページなどに自動で切り替えて表示できるようにする設定例

Shopifyで最後に閲覧した商品に関連するコレクションをトップページなどに自動で切り替えて表示できるようにする設定例

用途

  • トップページ編集

実装方法

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

テーマ「Dawn/Rise」で、最後に閲覧した商品の関連コレクションをトップページなどで自動で切り替えて表示できるようにする方法です。
商品閲覧履歴とは異なり、商品に関連するコレクションを表示することで、ユーザーの関心を惹きつける可能性が高まります。

◆実装のメリット
・関連コレクションを表示することで購買意欲を刺激
・ユーザーの回遊性が向上し、購入率アップが期待できる
・商品のクロスセル効果で売上増加のチャンス

◆具体的な3ステップ
①メタフィールドの設定
・関連コレクション用のメタフィールド定義を作成
・対象商品に表示したいコレクションを紐付け
②コードの修正
・「sections/featured-collection.liquid」を編集
・動的表示のための設定を追加
③最終調整
・「sections/main-product.liquid」にコードを追加
・テーマエディタで「特集コレクション」をONに


テーマ「Dawn/Rise」で、最後に閲覧した商品に関連するコレクションをトップページなどに自動で切り替えて表示できるようにする設定例


【(テーマRise/Dawnの場合)設定方法①】関連コレクションを指定するための商品メタフィールド定義を作成し対象商品のコレクションを指定


【(テーマRise/Dawnの場合)設定手順②】「sections/featured-collection.liquid」のコードを修正


【(テーマRise/Dawnの場合)設定手順③】「sections/main-product.liquid」にコードを追加しテーマエディタで「特集コレクション」を設置して設定を「ON」にする


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

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

サンプルコード

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

「sections/featured-collection.liquid」のコードを修正:①冒頭のliquidコードに追加・修正

関連ポスト

その他のJavascriptに関するTIPS