Apply product badging

10 min

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.

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.

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

Click Add Badge.

Enter a Name for the badge.

(Optional) Set Activate On or Deactivate On dates and times.

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.

(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.

If you do not add a tag to the widgets on the storefront, then badges display based on their sort priority.

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.

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.

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.

Use Widget Styling to set the size for the widget: Large, Medium, or Small.

Click Save.

See Upload and assign product images 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.

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.

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.

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.

Go to Admin Console > Marketing > Product Badging.

Edit the badge you want to assign.

In the Categories field, select the categories to assign the badge to.

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:

Go to Administration > Job Definitions.

Edit the job that you use to assign product badges (for example, Product Badging) and select Steps.

Edit the step that updates product badging.

Select Field Mapping.

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.

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 section in Spire to add badges to Product Detail pages.

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.

The Product List Card 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.

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.

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.