How can I modify the sale badge shape in Modular Theme?

Store Design
, ,
1

Hey everyone,

I am trying to change the shape of the sale badge on the Modular theme. I am trying to round the edges to make it ‘pill’ shaped. Could someone please help with how to change the corner radius.

I have looked everywhere on Shopify Community and cannot find a solution

(I am talking about the small badge in the corner of the product image displaying the discount amount)

Thank you!

2

Hi @jr-rl

Glad to support you today .

Please paste this code at the bottom of theme.css

.product-status-flag {
    min-width: 65px !important;
    height: 35px !important;
}

Screenshot_6.png
Screenshot_6.png485×362 16.7 KB

3

Screenshot 2023-02-10 at 9.35.26 pm.png
Screenshot 2023-02-10 at 9.35.26 pm.png402×212 32.3 KB

This didn’t seem to work. Does this code only modify custom badges or should it also apply to the default percent off sale badge like shown in the image?

4

@jr-rl Please share your page URL where you want to change the design.

5

https://curae-days-4431.myshopify.com/

I am trying to change the ‘sale badge’ displayed in the featured collection section in the corner of the product. Ideally I would like the badge to style to be consistent in all areas it is displayed but this is the section I am currently talking about

Thank you !!

6

add this css code at the bottom of theme.css

.product__badge__item {
    text-align: center;
    min-width: 65px !important;
   border-radius: 50px !important;
}
1 Like
7

Thank you so much, that worked! I had been trying for so long!

Much appreciated!