Use product badging

  • Updated

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 ConsoleMarketing Product Badging to see this section.

B2B_ProductBadging.png

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 NameActivate OnDeactivate OnSort 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 DeleteAssign Products or Attribute Values, or Edit more than one.

Add a badge

  1. Click + Badge.
  2. Enter a Name for the badge.
  3. Set Activate On or Deactivate On dates and times, if applicable.
  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.
    • 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 – When toggled On, it displays the badge as an overlay on main product images.
    • Badge Widget – When toggled On, it displays the badge wherever the badge widget is displayed.
  7. In the Badge Styling section, style your badge:
    • Badge Type – Choose between Text and Image.
      • Text – If you use text for your product badge, enter the Display Text, 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.
  8. In the Badge Positioning section, 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.
  9. Use Widget Styling to set the size for the widget; LargeMedium, or Small.
  10. Click Save.

See Upload and assign product images to learn more about what image sizes pages use.

Product badging is only supported automatically for Spire due to Classic's architecture. However, partners are free to customize the use of badging. You can access information about product badges through the badges object on the Products API in Swagger or by directly viewing returns.

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 AttributesAssign Attribute Values that should have the badge. Select the check box next to the desired values, then click Assign. Click Done and then Save.

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. In the Admin Console, 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 + 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.

Now, when the search index rebuilds, the product badges that were assigned through this job will be 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.

ProductBadging_DetailPage.png

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

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