Adding Badges

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:

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

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 -> <head> section text area.

Save the changes.

Updated on: 06/03/2023

Was this article helpful?

Thank you!