Ecommerce Badges

Ecommerce badges are a subtle way to notify the customer that a product is part of a campaign. This helps the customer spot products which are New, On Sale, or part of a custom campaign. This guide will show you how to setup Ecommerce badges and how to create custom badges. You can also use it to check if your current setup is configured correctly.  

Badges are available on the following columns:  

Badges are also available when working with Product Components.

Figure 1.1 Badges shown on a product in the product list

After setting up Ecommerce Badges or when creating new ones, you always need to preview the Badge page in frontend. Otherwise, the badges will not load properly as the CSS changes will not be saved. This is especially important after a deployment to a Staging site or a Live site.

  1. Go to Swift tools -> Design -> Ecommerce badges
  2. Click on Show page to view the Badges page in frontend
  3. Do a hard refresh (Ctrl + F5 or Cmd + Shift + R)

This feature is based on a product field called Campaign. In the product field you can choose what campaign the individual products are related to. If the product field has already been configured, you should be able to locate it in either PIM or Ecommerce in the settings of each product. Here you will see a list of campaigns with checkboxes next to them.  

If the product field hasn’t been configured yet, you will have to enter Settings to set it up:  

  1. In Settings go to Ecommerce -> Product catalogue -> Product fields  
  2. Create a New field and fill out the information needed 
  3. Let Name, System name and Template tag be “Campaign”  
  4. Choose “List box” as the Field Type  
  5. Make sure Display as is set to “CheckBoxList” 

This is all the configuration that is needed for the product field to work. You can add campaigns in the Options section at the bottom of the settings page. Give it a name and value (E.g., “Black Friday” and “BlackFriday”). There is no need to create an option for the New and Sale badges as these are automatically made. For those you only need to create the design (this will be shown next) and link them properly on the relevant columns (this will also be shown later in this guide).  

All styling will be done in the Ecommerce Badges page which is the next one to setup.  

  1. In Content open the Swift tools folder  
  2. Create a new page in the Design folder by right clicking it. Choose “Ecommerce badges collection” as the new page and name it “Ecommerce badges”. Make sure to keep the page status Hidden in menu.  

The first paragraph to create on the Ecommerce badges site should be a default no badge paragraph.  

  1. Create a New paragraph, choose the Ecommerce badge and name it “No badge”  
  2. Leave the details and layout as they are and hit Save and close 

Now you are ready to style the options created in the product field called Campaign. Let us say you have already created an option called “Black Friday” and want to style it: 

  1. Create a New paragraph and name it “Black Friday” 
  1. Enter a Css class name like “BlackFriday” (it is important that your css class names are unique) and tick the checkbox Campaign  
  2. In the Campaign section choose the relevant campaign type, in this case “Black Friday”. 
  3. Style the badge with relevant colors. 

When designing for the New and Style badge you do not have a campaign type to link to. This is because the link is done in the relevant ecommerce columns (shown later in the guide). 

Whenever you have designed a new badge, you should always open the Ecommerce Badge page by clicking Show page in the top panel. This is to make sure the colors of the badges are rendered.  

Next, you will need to link to the Ecommerce badge page in the backend. This is done in the website settings.  

  1. Click the three dots next to the website name. Click on Websites  
  2. Right click on your website and click Edit 
  3. Scroll to the Design section and locate the Ecommerce badges page field  
  4. Link to your Ecommerce badge page 
  5. Hit Save and close 

Now everything is ready to be configured in the Visual Editor. The badges are added to the relevant ecommerce columns in the column editor. In each editor there is a Badges section where the configuration is done. In this section you can link the layout of your New and Sale badges along with some configuration for them. You can also choose the custom badges that can be shown on this column. 
Remember to clear your browsing data of cashed images and files when you are done working with badges to see the results yourself.  

When all this is done, the last step is to add the relevant campaigns to the products. This can be done in either Ecommerce or PIM. We recommend using PIM as this allows you to Bulk edit products, meaning you can add campaigns to multiple products at the same time. If you are doing it in Ecommerce you will have to enter each individual product when adding them to campaigns. We have written documentation about how to do it in both PIM and Ecommerce here.