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

Shopifyのテーマ「Dawn」のコレクションページから商品ページに遷移した際 元のコレクション内での位置に基づいて前後の商品リンクを表示する設定例

Shopifyのテーマ「Dawn」のコレクションページから商品ページに遷移した際 元のコレクション内での位置に基づいて前後の商品リンクを表示する設定例

用途

  • コレクション情報管理・編集

実装方法

  • LIQUID
詳細を表示する

Shopifyのテーマ「Dawn」のコレクションページから商品詳細ページに移動した際、その表示順に合わせて前後の商品リンクを設置する設定例です。都度コレクションに戻らなくても連続して閲覧してもらうことができます。


テーマ「Dawn」のコレクションページから商品ページに遷移した際元のコレクション内での位置に基づいて前後の商品リンクを表示する設定例


【設定方法①】「card-product.liquid」に記載されている2箇所のアンカーリンクに要素を追加


【設定方法②】「main-product.liquid」の冒頭に前後リンクを設定するコードを追加


【設定方法③】「theme.liquid」の内にスクリプトタグを追加


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

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

サンプルコード

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

「card-product.liquid」に記載されている2箇所のアンカーリンクに要素を追加

「main-product.liquid」の冒頭に前後リンクを設定するコードを追加

関連ポスト

その他の回遊促進・離脱改善に関するTIPS