商品ページでオプション(サイズ・カラーなど)を選ぶとき、バリエーションごとにバッジ(短いテキスト)を表示できます。「予約商品」「数量限定」など、バリエーションごとに伝えたい情報を目立たせたいときに活用してください。
本ガイドでは、バリエーションのメタフィールドを使った設定方法をご案内いたします。
設定イメージ
Shopify管理画面で、次の2つを設定します。
バリエーションのメタフィールド定義を作成する
商品のバリエーションごとに、バッジに表示する文字列を入力する
Shopify管理画面>設定>メタフィールドとメタオブジェクト>バリエーション>定義を追加するをクリックします。
バリエーションのメタフィールド定義を追加する
注意事項「商品」で定義を作成すると、アプリにバッジが表示されません。必ず「バリエーション」で作成してください。
次の内容を入力し、保存してください。
項目名 | 内容 |
|---|---|
名前 | 商品バリエーションバッジ |
ネームスペースとキー |
|
説明 | 任意で入力してください |
タイプ | 単一行のテキスト(値のリスト) |
定義の入力内容
Shopify管理画面>商品管理>バッジを表示したい商品>バッジを表示したいバリエーションをクリックします。バリエーションの編集画面下部の「バリエーションのメタフィールド」で、手順2で作成した「商品バリエーションバッジ」にバッジに表示する文字列を入力し、保存してください。
バッジの文字列を入力する
文字列が長い場合は、折り返して表示されます。文字列は複数登録できます。複数登録した場合、バッジは縦に並んで表示されます。