Sale button and price size

Topic summary

A user is attempting to customize their Shopify store’s product display with two specific changes:

Primary Issues:

  • Reduce the sale badge border-radius to 4px (currently too rounded)
  • Decrease the size of the crossed-out original price to match the sale price (currently the original price appears larger, creating visual imbalance)

Current Status:
Multiple CSS code solutions have been provided by a helper, but none are working correctly. The user reports:

  • Some code works on product pages but not on product grid pages
  • Other attempts either don’t apply at all or make both prices larger instead of adjusting only the original price
  • Code is being added to theme.liquid before the </head> tag as instructed

Unresolved:
The discussion remains ongoing with no successful solution yet. Screenshots have been shared showing the desired changes, but the CSS targeting appears incorrect for the product grid context. The user can partially fix the product page using custom CSS but cannot achieve consistent results across both views.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hello

I would like to change the sale bade corners to 4px so its not as round

also i would like to adjust the size of the price on the product grid so it matches the sale price.

it looks strange when the normal price is bigger than the sale price

thanks for the help!

website: www.gogghi.ch

password: GOGGHI10NEWWEBSITE2025

attached are screenshots

Hi @LeandroS

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow
Thanks

Hi

that didn’t quite work.. now the sal price is bigger.. and the sale button is correct on the product page but not on the product grid..

see attached screenshots with description

@LeandroS An extremly sorry for this, Try this code then let me know do you want sale badge like this?

topnewyork_1-1737468634999.png


@LeandroS Also add this code


that code is not working.. the sale badge stays the same..

the crossed out price needs to get smaller. so it matches the new sale price.

with this code both will get bigger..

it would just need to adjust the crossed original price..

I don’t know why it’s not working, try this code


am i pasting this code like the other instruction before right?

@LeandroS yes

unfortunately it’s not working.. i can make it work for the product page if i paste this code in the custom css

.product .price .badge { padding: 8px 33px !important; border-radius: 4px !important; }

but for the product grid its not working..

@LeandroS remove that code which is related to border-radius only put this one


I pasted here (see screenshot)

still not working…