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

Shopifyのテーマ「Dawn/Rise」でメタオブジェクトを使って販売元(ブランド)コレクションへのリンクを表示する設定例

Shopifyのテーマ「Dawn/Rise」でメタオブジェクトを使って販売元(ブランド)コレクションへのリンクを表示する設定例

用途

  • 商品情報管理・編集

実装方法

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

商品詳細ページにブランド名を表示するケースは多いのですが、そのブランド名からブランド商品一覧ページにメタオブジェクトを使って自動でリンクするようにする方法です。
一度設定しておけば、新しいブランド名が追加されてもコレクションとメタオブジェクトを作成するだけでコードに手を入れる必要なく、自動でリンクされるようになります。

◆実装のメリット
・ユーザーが気に入ったブランドの商品をすぐに探せるようになります
・ブランドごとの回遊性が向上し、購買機会の増加が期待できます
・一度設定すれば、新商品追加時も自動的にリンクされます

◆具体的な設定手順(Dawn/Riseテーマ向け)
①ブランドコレクションの作成
・管理画面から「コレクション」→「コレクション作成」へ
・条件として「販売元」を選択し、各ブランド名で絞り込み設定
②メタオブジェクトでの紐付け
・メタオブジェクトの定義を新規追加
・必要なブランド名とコレクションURLを関連付け
③商品詳細ページへの実装
・商品情報セクションにカスタムLiquidブロックを追加
・商品の販売元(ブランド)名とメタオブジェクトと照合してリンク設定するコードを挿入


テーマ「Dawn/Rise」でメタオブジェクトを使って販売元(ブランド)コレクションへのリンクを表示する設定例


【設定手順①】販売元(ブランド)でフィルタリングするコレクションを作成


【設定手順②】販売元(ブランド)名とコレクションを結びつけるメタオブジェクトを作成


【設定方法③(テーマRise/Dawnの場合)】商品テンプレートの商品情報セクションにカスタムLiquidブロックを追加し商品の販売元(ブランド)名とメタオブジェクトを照合してリンクを設定するコードを挿入


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

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

サンプルコード

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

商品テンプレートの商品情報セクションにカスタムLiquidブロックを追加し商品の販売元(ブランド)名とメタオブジェクトを照合してリンクを設定するコードを挿入

関連ポスト

すべてのShopify TIPS