Use product badging 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 to see this section.
Interact with the table
The Product Badge table allows you to quickly see your available product badges or create a new one. The table displays columns for Name, Activate On, Deactivate On, Sort Order, and Tag Name.
- Click on a badge name to edit it.
- 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 New Badge to create one.
- Name the badge.
- Set Activate On or Deactivate On dates/times, if applicable.
- 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.
- Give the badge a Tag Name (optional) - This allows badges to be grouped and pulled together into widgets defined in Spire CMS.
- If you add a Tag to a badge, the badge only shows when it matches the Tag added to the product detail page badge widget(s).
- If no Tag is added to the widget(s) on the storefront, then all badges display based on their sort priority.
- Select whether to use the Display Locations.
- Overlay – When turned On, it shows the badge as an overlay on main product images.
- Badge Widget – When turned On, it shows the badge wherever the badge widget is displayed.
- Use Badge Styling to style your badge. Choose between Text and Image.
- Text – If you use text for your product badge, enter the Display Text, enter the hex code for the Text Color and Badge Color, and choose a Badge Style.
- Image – If you use an image for your badge, select the file path for your large image and enter the Image Alt Text to display if the webpage fails to load the image.
- Use Badge Positioning to set the position for your badge. 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, either Large, Medium, or Small.
- Click Save.
Click here to learn more about what image sizes pages use.
Product Badging is only supported OOTB for Spire due to the way that classic is architected vs Spire. However, partners are free to customize the use of badging. All of the information about product badges are available through the "badges" object on the Products API. This is visibile via Swagger, as well as through directly viewing returns from the Product APIs.
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 new one using the steps above. Select Products > Assign Products to add specific products. Select the checkbox next to the desired product(s), 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 checkbox next to the desired value(s), then click Assign. Click Done. Click Save.
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.
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. Multiple tags can be entered in this 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. Multiple tags can be entered in this field.
- Max Badges to Display – Set the maximum number of badges to display. The default is 8.
Product Compare Carousel widget
The Product Compare Carousel widget contains options for displaying text badges and image badges.
- Image Badges – Check 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 – Check 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 – Check 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 – Check 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.
<%= heading %>