Ecommerce badges

Ecommerce badges serve as a subtle method to notify customers that a product is part of a campaign. They assist customers in identifying products that are New, On Sale, or part of a custom campaign. This guide will demonstrate how to set up Ecommerce badges and create custom ones. Additionally, you can use this guide to verify whether your current setup is correctly configured.

Badges are available on the following columns:

• Product List - Grid View
• Product List - List View
• Product List - Compact View
• Product Details Media Gallery
• Product Details Media
• Product Slider/Grid view
• Related Products List View

Badges are also available when working with Product Components.

Manual setup

Note

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 Preview 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 Campaign product field has already been configured, you should be able to locate it in Products in the settings of each product. Here you will see a list of campaigns with checkboxes next to them.

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

1. In Settings go to Products > Attributes > Product fields > Global custom 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. Hit Save and close

This is all the configuration that is needed for the Campaign product field to work. You can add campaigns in the Options section by clicking 'New option'. Give it a name and value (E.g., “Black Friday” and “BlackFriday”).

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

1. Head to Content > Swift tools > Design
2. Create a New page under the Design folder by right clicking it
3. Choose Ecommerce badges collection as the new page and name it Ecommerce badges
4. Head to the Publication tab. Under Publication, select 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. In the Ecommerce badges collection, create a New paragraph, select 'Ecommerce badges', and name it "Black Friday". (1)
2. Enter a Css class name like “BlackFriday” (it is important that your css class names are unique) (2)
3. Tick the checkbox Campaign (3)
4. In the Campaign section, choose the relevant campaign type, in this case “Black Friday”. (4)
5. Style the badge with relevant colors. (5)
   • Foreground color controls text color
   • Background color controls the color of the badge
   • Border color controls the border color of the badge

When designing the style of the new 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 Preview. This is done by clicking the three dots next to your collection of badges. 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. This opens a list of your websites. Choose the one relevant for you
3. Scroll to the Design section and locate the Ecommerce badges page field
4. Click the Internal button to the right and navigate to Swift tools > Design > YourEcommerceBadgesCollection
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 Products.