I’d like to change the background colour of my custom product badges in Stiletto.
They’re currently a white background, and I can change the colour of the text and border, but I’d like coloured backgrounds with white text. TIA 
1 Like
Hi @JordanLily ,
Would you mind to share your URL website? with password if its protected. Just to clarify is the “NEW” badges right?
Like this? https://lmpw7hcputqh354j-25474924626.shopifypreview.com
So, Stiletto has badges preset for SALE and SOLD OUT, then custom badges (attached in the screenshot). Sold out lets you change the background in the theme settings, but all of the other badges only let you change the font colour! Thanks
1 Like
Okay, you only need to change the background right? Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
.product__block--product-header-inner .product-badge {
background: red;
}
Result:
i hope it help.
Thank you! That works for the product listings!
A couple of follow-ups:
-
Can it be edited further so that custom badge 1 has a blue background, and custom badge 2 has a yellow background etc. to differentiate?
-
Is there additional code I’d need to change the background colour on image thumbnails in collections too? (photo attached!)
Thanks so much!
1 Like
You can custom another badge with different content name and different location in the store. If you cant change them in the Customize theme. Then you need to customize them in the Edit theme.
For the collection.
section#shopify-section-template--14541837566034__4641ca20-a1ff-454f-9c41-79b82eeffe46 {
background: pink;
}
Result:
