Individually change color of each category (styled like a badge)

How can I have different category labels using different colour? I know I can use :nth-child() Pseudo-class, but different store may have different number of categories.

2 Likes

Hi there, @user33971 :waving_hand:

Under the labels you mean the location badges, am I right?


If so, are you going to use only the Childcare and Spark-centered badges?

1 Like

Hi Max,

Yes for the time being, but there may be more different badges in the future.

Additionally, can we add an image or icon beside the title (location name)?

2 Likes

Hi there, @user33971 :waving_hand:

Got it, thanks! I’ve forwarded your request to change the badge color individually to the devs and will update you once I have their response.

As for the icon, you can add a business logo, which can be displayed in the location detailed card:


Does it work for your needs?

1 Like

Hi Max,

The logo feature doesn’t really fit as it seems like a profile image for that location.

Please refer to the attached mockup that show what we’re trying to achieve:

  • “Category” badges should have individual colors. Since you’ve forwarded this to your development team, do you have an ETA on when this feature will be delivered?
  • We want to insert a image beside the location title, the current “badge” feature actually works (showing at the correct location) but currently it only supports text input, can make it support img upload as well?
1 Like

Hi there, @user33971 :waving_hand:

I’ve talked to the devs and, unfortunately, to implement both customizations at the moment. I am really sorry!

I’ve moved this thread to the Wishlist and created a separate request for the location icon feature - Location icon

If these ideas get more votes, we’ll try to consider them in the future updates :slightly_smiling_face:

You mentioned that you already know how to use the nth-child selector, but just in case, I’d like to share a CSS snippet that lets you change the color of each category badge individually based on its order number:

/* background of the first category */
.es-location-labels-labels-item-container:nth-child(1)
.es-location-labels-item-label {
  background-color: #c4c842 !important;
}

/* background of the second category */
.es-location-labels-labels-item-container:nth-child(2) 
.es-location-labels-item-label {
  background-color: blue !important;
}