Change color of each badge (text and background)

Wishlist Store Locator
1

Would be nice to be able to change the colors of each badge. I have different types of locations that I’d like to be able to change the color to differentiate.

1 Like
2

I agree that it would be awesome to have this feature right in the editor. We’ll try to take it under consideration in the future.

As for now, you can use this code to change the color of each badge:

[class*='location-preview-image-layout__Container-sc']:nth-child(2) [class*='badge__StyledBadge-sc'] {
	background-color: gold;
	color: black;
}

This code should be added to the Custom CSS field on the Style tab of your widget’s settings.

In brackets :nth-child(2) set the number of the badge where you’d like to change the color (counting from top to the bottom).

3

Would love to see the badge color have the ability to set certain listings with a different color.

1 Like
4

Hi there, @Shawn_Martin :wave:

We already have a similar suggestion on the Wishlist, and I’ve moved your comment there too. Here you can find the code that changes the background of the specific badge, and I’ll ask devs to provide the solution that changes the text color too :slightly_smiling_face:

5

3 posts were split to a new topic: Badge customization in Store Locator