> For the complete documentation index, see [llms.txt](https://manual.dxable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.dxable.com/optimizely/configured-commerce/optimizely-configured-commerce/marketing/use-product-badging.md).
# 製品バッジを使用する
Optimizelyマニュアル｜Optimizelyの製品バッジを使用して、製品の属性やプロモーションを視覚的に表示し、電子商取引を強化します。
製品バッジを使用して、製品リスト、製品詳細、ホームページなどの製品カルーセル ウィジェットがある可能性のあるその他のページなどに表示される製品カードに視覚的なインジケーターを適用します。 これらのインジケーター (アイコン、画像、テキスト バッジ) は、顧客が購入を決定する際に役立つ重要な情報を表示します。 たとえば、製品バッジは、製品属性 ('Heavy'や 'Hazardous'」など)、プロモーション (セール中)、または製品ステータス (製造中止) などのその他の理由に使用できます。
このセクションを表示するには、 **Admin Console** > **Marketing** > **Product Badging**に移動します。
### テーブルを操作する
製品バッジ テーブルを使用すると、利用可能な製品バッジをすばやく確認したり、新しい製品バッジを作成したりできます。 テーブルには、**名前**、**アクティブ化日**、**非アクティブ化日**、**並べ替え順序**、**タグ名**の列が表示されます。
* 製品バッジを編集するには、編集アイコンをクリックします。
* **検索**と**フィルター**を使用します。
* 複数のバッジを選択して、**削除、製品または属性値の割り当て**、または複数のバッジの**編集**を行います。
### バッジを追加する
1. **\[+ Badge]**をクリックします。
2. バッジの**名前**を入力します。
3. 該当する場合は、**アクティブ化**または**非アクティブ化**の日時を設定します。
4. 複数のバッジがある場合にバッジを表示する場所を決定するには、**並べ替え順序**を設定します。 同じソート順番号を持つバッジはアルファベット順に表示されます。
5. (オプション)**タグ名**を入力します。 これにより、バッジをグループ化し、Spire CMS で定義されたウィジェットにまとめることができます。
* バッジにタグを追加すると、[商品詳細ページのバッジ ウィジェット](https://support.optimizely.com/hc/en-us/articles/11449338645389)に追加されたタグと一致する場合にのみバッジが表示されます。
* ストアフロントのウィジェットにタグを追加しない場合、バッジは並べ替えの優先順位に基づいて表示されます。
6. **表示場所**を使用するかどうかを選択します。
* **Overlay** – **On**に切り替えると、バッジがメインの製品画像にオーバーレイとして表示されます。
* **Badge Widget** – **On**に切り替えると、バッジ ウィジェットが表示される場所にバッジが表示されます。
7. **バッジのスタイル設定**セクションで、バッジのスタイルを設定します。
* **Badge Type** – **Text**と**Image**から選択します。
* **Text** – 製品バッジにテキストを使用する場合は、**表示テキスト、テキストの色**と**バッジの色**の 16 進コードを入力し、**バッジのスタイル**を選択します。
* **Image** – バッジに画像を使用する場合は、大きな画像のファイル パスを選択し、 Web ページで画像の読み込みに失敗した場合に表示される**画像の代替テキスト**を入力します**。**
8. **バッジの配置**セクションで、バッジの位置を設定します。 **大きい画像の配置**（**上中央**や**右下**など）と**大きい画像のテキスト サイズ**を設定できます。
9. **ウィジェット スタイル設定**を使用して、ウィジェットのサイズ (**大**、**中**、**小)** を設定します。
10. **\[Save]**をクリックします。
ページで使用される画像サイズの詳細については、\[[製品画像のアップロードと割り当て](https://support.optimizely.com/hc/en-us/articles/4413199922701)]を参照してください。
注記
Classic のアーキテクチャにより、製品バッジは Spire でのみ自動的にサポートされます。 ただし、パートナーはバッジの使用を自由にカスタマイズできます。 製品バッジに関する情報には、Swagger の Products API の**バッジ**オブジェクトを通じて、または返品を直接表示することでアクセスできます。
### 製品の割り当て
管理コンソールで、ルールを使用して手動で、または属性に基づいて、製品にバッジの割り当てを追加できます。
1. **Assign products manually** – 割り当てるバッジを選択するか、上記の手順に従ってバッジを作成します。 特定の製品を追加するには、 **Products** > **Assign Products** を選択します。 希望する製品の横にあるチェックボックスを選択して、 **\[Assign]**をクリックします。 **\[Done]**をクリックし、 **\[Save]**をクリックします。
2. **Use product rules** – エディターでバッジにルールを追加するには、 **\[Product Rules]**をクリックします。指示に従って、**製品カスタム プロパティ**または**製品フィールド タイプ**ルールを作成します。 必要に応じて他のルールまたはルール グループを追加します。**\[Save]**をクリックします。
3. **Use product attributes** – **Product Attributes** > **Assign Attribute Values**をクリックし、バッジを割り当てます。目的の値の横にあるチェックボックスを選択して、**\[Assign]**をクリックします。**\[Done]**をクリックし、**\[Save]**をクリックします。
### 検索インデックスの再構築時に製品バッジを保持する
ジョブを使用して製品バッジを割り当て、検索インデックスを再構築するときに Configured Commerce によってそれらの製品バッジの割り当てが削除されないようにするには、次の手順を実行します。
1. 管理コンソールで、**Administration > Job Definitions** に移動します。
2. 製品バッジの割り当てに使用するジョブ (たとえば、*製品バッジ*) を編集し、**\[Steps]**を選択します。
3. 製品バッジを更新するステップを編集します。
4. **\[Field Mapping]**を選択します。
5. **\[+ Job Step Field Mapping]**をクリックし、次のフィールドに入力します。
* **Field Type** – 静的値を選択します。
* **Static Value** – *1と入力します*。
* **To Property** – **\[Manually Assigned]**を選択します。
* **Can Overwrite** – **Yes**に切り替えます。
* **Is Dataset Key – No**に切り替えます。
6. **\[Save]**をクリックします。
これで、検索インデックスが再構築されても、このジョブを通じて割り当てられた製品バッジは保持されます。
### スパイアウィジェット
管理コンソールのこれらのオプションに加えて、Spire CMS を通じて Web サイトにバッジを追加できます。
#### **製品詳細ウィジェット**
[製品詳細要素](https://support.optimizely.com/hc/en-us/articles/11449338645389/)セクションのウィジェットを使用して、製品詳細ページにバッジを追加できます。
注記
タグにより、タグのないページではバッジが表示されなくなります。 バッジ コンテナーにはタグを含めることができますが、コンテナーにはタグに一致するバッジのみが含まれます。
* **Image Badge** – 特定の画像バッジを表示するには、このウィジェットを使用します。
* **Tag** – タグの名前を入力し、キーボードの**\[Enter]**キーを押すと、表示されるバッジが絞り込まれます。 このフィールドには複数のタグを入力できます。**\[Save]**をクリックするか、フィールドから移動した場合も、タグは保存されます。
* **Max Badges to Display** – 表示するバッジの最大数を設定します。 デフォルトは 8 です。
* **Badges per Row** – 行ごとに表示するバッジの数を設定します。 デフォルトは 4 です。
* **Text Badge** – このウィジェットを使用して、特定のテキスト バッジを表示します。
* **Tag** – タグの名前を入力し、キーボードの**\[Enter]**キーを押すと、表示されるバッジが絞り込まれます。 このフィールドには複数のタグを入力できます。**\[Save]**をクリックするか、フィールドから移動した場合もタグは保存されます。
* **Max Badges to Display** – 表示するバッジの最大数を設定します。 デフォルトは 8 です。
#### **商品リストカードリストウィジェット**
製品リスト カード リスト ウィジェットには、テキスト バッジと画像バッジを表示するためのオプションが含まれています。
* **Image Badges** – 製品に関連付けられたバッジの設定された並べ替え順序に基づいて画像バッジを表示するには、このオプションを選択します。 表示する**画像バッジの最大数**を設定することもできます。 デフォルトは 4 です。
* **Text Badges** – 製品に関連付けられたバッジの構成された並べ替え順序に基づいてテキスト バッジを表示するには、このオプションを選択します。 表示する**テキストバッジの最大数**を設定することもできます。 デフォルトは 4 です。
#### **製品比較カルーセルウィジェット**
製品比較カルーセル ウィジェットには、テキスト バッジと画像バッジを表示するためのオプションが含まれています。
* **Image Badges** – 製品に関連付けられたバッジの設定された並べ替え順序に基づいて画像バッジを表示するには、このオプションを選択します。 表示する**画像バッジの最大数**を設定することもできます。 デフォルトは 4 です。
* **Text Badges** – 製品に関連付けられたバッジの構成された並べ替え順序に基づいてテキスト バッジを表示するには、このオプションを選択します。 表示する**テキストバッジの最大数**を設定することもできます。 デフォルトは 4 です。
#### **マイリストの詳細製品リストウィジェット**
マイリスト詳細製品リストウィジェットには、テキストバッジと画像バッジを表示するためのオプションが含まれています。
* **Image Badges** – 製品に関連付けられたバッジの設定された並べ替え順序に基づいて画像バッジを表示するには、このオプションを選択します。 表示する**画像バッジの最大数**を設定することもできます。 デフォルトは 4 です。
* **Text Badges** – 製品に関連付けられたバッジの構成された並べ替え順序に基づいてテキスト バッジを表示するには、このオプションを選択します。 表示する**テキストバッジの最大数**を設定することもできます。 デフォルトは 4 です。