---
title: Apply product badging
slug: configured-commerce/docs/apply-product-badging
docTags: 
createdAt: 2026-08-13T10:46:31.000Z
---

Use product badging in Optimizely Configured Commerce to apply visual indicators to product cards displayed on pages such as Product List, Product Detail, and other pages that may have product carousel widgets, like the homepage. These indicators (icons, images, and text badges) show important information to help your customers make purchasing decisions. For example, you can use product badging for product attributes (like *Heavy* or *Hazardous*), promotional (*On Sale!*), or other reasons like product status (*Discontinued*). 

Go to **Admin Console** > **Marketing** > **Product Badging**.

![B2B\_ProductBadging.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2gMNj1yTK8AJ_svUA42VS-20260720-144653.png)

## Sizing

By design, the product badge on the Product Display page has a max width of 25% and a max height of 25% of the product primary image. The text badge has max width of 50%. This is hardcoded but can easily be adjusted by [customizing the CSS in the blueprint](docId\:CnH0YRG5nXlJJbZheO7v2). 

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vdhRvh4yO5JjQ8nxnooRh-20260720-144653.png)

For example, if your primary image is 211x211 pixels, Spire uses the following sizes by default:

| **Product Display page size** | **Size shown on Product Display page** | **Size on Product List page list view** | **Size on Product List page grid view** |
| ----------------------------- | -------------------------------------- | --------------------------------------- | --------------------------------------- |
| Small                         | 52.75px x 52.75px (25%)                | 69px x 69px (32.7%)                     | 48.31px x 48.31px (22.9%)               |
| Medium                        | 118px x 118px (56%)                    | 146px x 146px (69.2%)                   | 48.31px x 48.31px (22.9%)               |
| Large                         | 211px x 211px (100%)                   | 146px x 146px (69.2%)                   | 48.31px x 48.31px (22.9%)               |

## Interact with the table

The Product Badge table lets you quickly see your available product badges or create one. The table displays columns for **Name**, **Activate On**, **Deactivate On**, **Sort Order**, and **Tag Name**.

- Click the edit icon to edit a product badge.
- Use the **Search** and **Filters** to show specific badges.
- Select multiple badges to **Delete**, **Assign Products** or **Attribute Values**, or **Edit** more than one.

## Add a badge

1. Click **Add Badge**.
2. Enter a **Name** for the badge.
3. (Optional) Set **Activate On** or **Deactivate On** dates and times.
4. Set the **Sort Order** to determine where the badge should display when there are multiple badges. Badges with the same sort order number display alphabetically.
5. (Optional) Enter a **Tag Name**. This lets you group badges and pull them together into widgets defined in Spire CMS. 
   - If you add a tag to a badge, the badge only displays when it matches the tag added to the [product detail page badge widgets](docId:634MlFlPo-piFf6wO_B8S).
   - If you do not add a tag to the widgets on the storefront, then badges display based on their sort priority.
6. Select whether to use **Display Locations**.
   - **Overlay** – Displays the badge as an overlay on main product images.
   - **Badge Widget** – Displays the badge wherever the badge widget is displayed.
7. Style your badge in the **Badge Styling** section:
   - **Badge Type** – Choose between **Text** and **Image**.
     - **Text** – Enter the **Display Text**, hex code for the **Text Color** and **Badge Color**, and choose a **Badge Style**.
     - **Image** – Select the file path for your large image and enter the **Image Alt Text** to display if the webpage fails to load the image.
8. Set the badge position in the **Badge Positioning** section. You can set the **Large Image Placement** (such as **Top Center** or **Bottom Right**) and the **Large Image Text Size**.
9. Use **Widget Styling** to set the size for the widget: **Large**, **Medium**, or **Small**.
10. Click **Save**.

See [Upload and assign product images](docId\:IsNSGENthu9cGkVhnrYWp) to learn more about what image sizes pages use.

## Assign products

You can add badging assignments to products in the Admin Console manually, using rules, or based on attributes.

1. **Assign products manually** – Select the badge or badges to assign, or create a badge using the steps above. Select **Products** > **Assign Products** to add specific products. Select the check box next to the desired products, then click **Assign**. Click **Done** and then **Save**.
2. **Use product rules** – Click **Product Rules** to add a rule to the badge when in the editor. Follow the prompts to create a **Product Custom Properties** or **Product Field Type** rule. Add other rules or rule groups as needed. Click **Save**.
3. **Use product attributes** – Click **Product Attributes** > **Assign Attribute Values** that should have the badge. Select the check box next to the desired values, then click **Assign**. Click **Done** and then **Save**.

### Assign badges by category

Assign a product badge to a category to apply it to all products within that category. This is useful for marking groups of products, such as applying a Final Sale badge to all products in a Clearance category.

1. Go to **Admin Console > Marketing > Product Badging**.
2. Edit the badge you want to assign.
3. In the **Categories** field, select the categories to assign the badge to.
4. Click **Save**.

Products that belong to multiple categories inherit badges from each assigned category.

## Preserve product badging in search index rebuild

If you use a job to assign product badges, and you do not want Configured Commerce to delete those product badging assignments when rebuilding the search index, complete the following steps:

1. Go to **Administration > Job Definitions**.
2. Edit the job that you use to assign product badges (for example, *Product Badging*) and select **Steps**.
3. Edit the step that updates product badging.
4. Select **Field Mapping**.
5. Click **Add Job Step Field Mapping** and complete the following fields:
   - **Field Type** – Select **Static Value**.
   - **Static Value** – Enter *1*.
   - **To Property** – Select **Manually Assigned**.
   - **Can Overwrite** – Toggle to **Yes**.
   - **Is Dataset Key** – Toggle to **No**.
6. Click **Save**.

When the search index rebuilds, the product badges that were assigned through this job are preserved.

## Spire widgets

Along with these options in the Admin Console, you can add badges to your website through the Spire CMS.

### Product Details widgets

You can use widgets in the [Product Details Elements](docId:634MlFlPo-piFf6wO_B8S) section in Spire to add badges to Product Detail pages.

![ProductBadging\_DetailPage.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_HpoZBWK_e9Dki70KJ-_W-20260720-144653.png)

:::hint{type="info"}
**Note**

Tags exclude the badge from displaying on pages that do not have the tag. Badge containers can include tags, but the containers only include badges that match the tag.
:::

- **Image Badge** – Use this widget to display specific image badges.
  - **Tag** – Type the name of a tag and press **Enter** on your keyboard to narrow the badges that display. You can enter multiple tags in this field. The tag also saves if you click **Save** or move away from the field.
  - **Max Badges to Display** – Set the maximum number of badges to display. The default is 8.
  - **Badges per Row** – Set the number of badges to display per row. The default is 4.
- **Text Badge** – Use this widget to display specific text badges.
  - **Tag** – Type the name of a tag and press **Enter** on your keyboard to narrow the badges that display. You can enter multiple tags in this field. The tag also saves if you click **Save** or move away from the field.
  - **Max Badges to Display** – Set the maximum number of badges to display. The default is 8.

### Product List Card List widget

The Product List Card List widget contains options for displaying text badges and image badges.

![ProductBadging\_ListPage.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/qpompjYb8cNhIVBP1szls-20260720-144653.png)

- **Image Badges** – Select this option to display image badges based on the configured sort order for the badges associated with the product. You can also set the **Maximum Number of Image Badges** to display. The default is 4.
- **Text Badges** – Select this option to display text badges based on the configured sort order for the badges associated with the product. You can also set the **Maximum Number of Text Badges** to display. The default is 4.

### Product Compare Carousel widget

The Product Compare Carousel widget contains options for displaying text badges and image badges.

- **Image Badges** – Select this option to display image badges based on the configured sort order for the badges associated with the product. You can also set the **Maximum Number of Image Badges** to display. The default is 4.
- **Text Badges** – Select this option to display text badges based on the configured sort order for the badges associated with the product. You can also set the **Maximum Number of Text Badges** to display. The default is 4.

### My List Details Product List widget

The My List Details Product List widget contains options for displaying text badges and image badges.

- **Image Badges** – Select this option to display image badges based on the configured sort order for the badges associated with the product. You can also set the **Maximum Number of Image Badges** to display. The default is 4.
- **Text Badges** – Select this option to display text badges based on the configured sort order for the badges associated with the product. You can also set the **Maximum Number of Text Badges** to display. The default is 4.