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

Shopifyで商品メタフィールドに追加した要素でフィルタリング可能にする設定例

Shopifyで商品メタフィールドに追加した要素でフィルタリング可能にする設定例

用途

  • 商品情報管理・編集

実装方法

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

Shopifyの商品ページでスペック表や関連情報などに使われることが多い商品メタフィールドですが、一覧ページでの絞り込みフィルターとして使うことができます。これを応用して商品ページにリンクを貼っておく設定例です。


商品メタフィールドに追加した要素でフィルタリング可能にする設定例


【設定手順①】商品メタフィールドの定義を追加し、対象商品の詳細画面でメタフィールドを編集


【設定手順②】販売チャネル「オンラインストア」のメニューから「Shopify Search & Discovery」を選択し絞り込み条件に追加した「商品のメタフィールド」を設定する


【設定手順③】商品情報にカスタムLiquidを使ってメタフィールドの内容を表示(この時、表示した要素に絞り込み検索用のリンクも設定する)


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

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

サンプルコード

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

商品情報にカスタムLiquidを使ってメタフィールドの内容を表示

関連ポスト