Sale icon needs to be in solid red to stand out

Highlighted
New Member
7 0 0

Hi I am using Brooklyn theme and sale icon shows less amount in clear icon on top left corner of the product image. I want that icon to show red and text within is white in color to stand out more. 

How do I do it?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 86

Hey there!

Savannah here from Shopify. :) 

Here's how you can change that badge colour: 

  • Navigate to Online Store> Themes and select "Edit Code" from the Actions menu on Brooklyn. 
  • In your Assets folder, select the theme.scss and scroll down to the bottom of the code. Paste this code: 
.grid-product__on-sale {
  background-color: $colorSaleTag;
  p {
    color: $colorBody;
  }
}
  • Click save, and let me know if that does the trick!

Savannah | Social Care
support@shopify.com

0 Likes
Highlighted
New Member
7 0 0

Thanks Savannah. This code works like magic. 

I have another request if you can take a look into. I will be very much appriciateed. 

Here is the link of my another topic that no one responded yet.

https://ecommerce.shopify.com/c/ecommerce-design/t/replacing-social-media-icons-payment-icons-with-t...

Thank you for your help and support. 

0 Likes
Highlighted
New Member
3 0 0

I just followed your code and completely messed up my site! I tried to remove it and save but it completely messed everything up and now I dont know how to fix it... Can anyone help?

0 Likes
Highlighted
Astronaut
911 81 109

@AHMED97J wrote:

I just followed your code and completely messed up my site! I tried to remove it and save but it completely messed everything up and now I dont know how to fix it... Can anyone help?


share your site link and if possible add me to your staff, let me check

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
3 0 0

Thanks for your help and your quick reply but I managed to fix it. I had to download the theme files and replace the corrupted page with the fresh one I downloaded. It seems like that small code corrupted one of the theme files

0 Likes
Highlighted
Astronaut
911 81 109
ok sure, if you need anything, feel free to contact
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
1 0 0

Hi. I would also like to be able to change the circle badge to say sale instead of save $6. Can you help? I am using Brooklyn theme. 

0 Likes
Highlighted
Astronaut
911 81 109

can you pplease add me to staff? feel free to contact, will need few code changes

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes