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

【Dawn】Shopifyのテーマ「Rise/Dawn」の商品ページに メタフィールドを使って「商品バロメーター」を表示する設定例(テーマエディタ上でブロック追加する方式)

【Dawn】Shopifyのテーマ「Rise/Dawn」の商品ページに メタフィールドを使って「商品バロメーター」を表示する設定例(テーマエディタ上でブロック追加する方式)

用途

  • 商品情報管理・編集

実装方法

  • Shopify Flow
詳細を表示する

こちらの方法とは別の方法で、商品バロメーターを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法を紹介。
バロメーターの追加が容易になり、運用がさらに便利になります。

◆実装のメリット
・テーマエディタ上で視覚的に設定可能
・商品ごとに表示項目のカスタマイズが容易
・コードを触らずに設定内容の変更が可能

◆具体的な手順
①商品情報ブロックの作成
・sections/main-product.liquidにschemeを追加
・ja.schema.jsonにラベルを追加
②バロメーターブロックの実装
・main-product.liquidを編集して商品情報セクションにブロックを定義
③表示設定
・商品メタフィールドでバロメーターを定義
・テーマエディタでブロックを追加
・各項目の表示設定をカスタマイズ

◆実装のポイント
・バロメーターの定義は商品ごとに必要
・ブロックの並び順で表示順をコントロール可能
・プレビューモードで表示確認しながら設定可能


Shopifyのテーマ「Rise/Dawn」の商品ページにメタフィールドを使って「商品バロメーター」を表示する設定例(テーマエディタ上でブロック追加する方式)


【(テーマRise/Dawnの場合)設定方法①:商品情報ブロックの新規作成】「sections/main-product.liquid」にschemaを、「ja.schema.json」にラベルを追加


【(テーマRise/Dawnの場合)設定方法②】「sections/main-product.liquid」に商品情報セクションに「バロメーターブロック」用のコードを追加


【設定方法③】必要な分だけ商品メタフィールドにバロメーターの定義を追加して対象の商品のバロメーターを設定し、テーマエディタ上で「バロメーターブロック」を追加して表示設定を行う


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

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

サンプルコード

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

「sections/main-product.liquid」の「blocks」にschemaを追加

関連ポスト

その他の購入促進に関するTIPS