Change color of each badge (text and background)

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

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).

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

1 Like

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:

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

It would be great to have different colors of Badge visible.
:blush:

1 Like

Hello there, @Shawn_Martin :waving_hand:

Thanks a lot for the feedback!

We already have this idea on the Wishlist, and I’ve added your comment there too. If this request gets more votes, it might be considered in the future.

As for now, you can use the CSS code from the message above to individually change the color of each badge :slightly_smiling_face:

3 posts were split to a new topic: Show badges as tabs above the widget