Adding Badges

Articles on: Content Management

In this help article we will show how to add and customize badges.

Adding Badges

To add a badge, in the

Content Tab

map a column or several columns from your Google Sheet to the Badges element:



You can map several columns as well, each value will be of its own color.

Multiple values from the same column separated by commas will be displayed as badges of the same color.

Changing the badges colors

You can customize the color of badges by adding the following custom CSS code:

Copy the following code:

.sv-badge__1 { background-color: #d21ac4; } .sv-badge__2 { background-color: #00bf7a; } .sv-badge__3 { background-color: #ffc01e; } .sv-badge__4 { background-color: #ff4d4d; }

Change the values after background-color: -- add the colors you want to have on your website in HEX format


Add the modified code lines to the Settings -> Inject custom code -> section text area.


Save the changes.

Updated on: 06/03/2023

Updated on: 28/12/2023