Refresh theme. How to change on sale badge shape to have rounded edges?

Store Design
1

Hi, I am having trouble finding a solution. I would like the on sale badge next to discounted price on product page to have rounded edges instead of sharp corners. Is this feasible? I am using the refresh theme.

2

Hello @hunterbeng

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.

4

Hello @hunterbeng ,
Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

.badge {
height: 45px!important;
width: 45px!important;
padding-left: 0px!important;
padding-right: 0px!important;
border-radius: 50%!important;
display: flex!important;
align-items: center!important;
text-align: center!important;
justify-content: center!important;
}

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

5

Thanks for this! It worked for us using the ‘Dawn’ theme too, except it also made the ‘sale’ and ‘sold out’ badges appear on product pages in the price block. For anyone else with the same theme and issue, I ended up using the below to get circular badges with centred text:

.badge {
background-color: red !important;
border-color: red !important;
height: 50px!important;
width: 50px!important;
padding-left: 0px!important;
padding-top: 15px!important;
padding-right: 0px!important;
justify-content: center!important;
align-items: center!important;
text-align: center!important;

}

Seems like it was the display: flex line that caused the problem with our theme.

Thanks for all the suggestions here, has been so helpful!