How do i add round edges to the sale advertised red box on product pictures and product page?

Store Design
,

Topic summary

A Shopify store owner using the Palo Alto 4.5 theme wanted to add rounded corners to sale badge boxes appearing on product images.

Initial Problem:

  • Red sale boxes and blue sale squares displayed with sharp corners
  • Needed rounded edges on both homepage product images and product pages

Solution Process:

  • Support provided CSS code targeting .product__price--off with border-radius: 50px
  • User experimented and applied border-radius to multiple CSS classes:
    • .product__unit-price
    • .product__price--off
    • .products.product.save
    • .products.product.unit_price_label

Resolution:
The issue was resolved when the user discovered a built-in theme setting that rounded all badge elements automatically, eliminating the need for custom CSS. The discussion is marked complete.

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

how can i add round edges to the sale advertised red box on product pictures on home page and then also on product page i think they are the same.

current theme: Palo Alto 4.5

here is the code i need to add it to i believe: Snippets>product.liquid

blue sale3.jpg
blue sale3.jpg635×205 22 KB

blue sale.jpg
blue sale.jpg291×165 5.23 KB

blue sale2.jpg

2

Hi @jamesdemongin
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

1 Like
3

Acpcovers.com
No password needed

4

You can try to add this code into the bottom of the file theme.css

.product__price--off {
border-radius: 50px;
}
1 Like
5

So I played around with it and got the red one to round. I used what you
told me but hat to plug in a few.

.product__unit-price { border-radius: 50px; }
.product__price–off { border-radius: 50px; }
.products.product.save { border-radius: 50px; }
.products.product.unit_price_label { border-radius: 50px; }
.product__price–unit { border-radius: 50px; }

Now if I only can get the blue sale square to round. I’m thinking maybe it
not .product because the blue square is only showing on product pictures on
home page not on product pages.

Thank you for the help and code you posted before.

6

.product__badge {
border-radius: 50px;
overflow: hidden;
}

1 Like
7

I didn’t try this code found a built in box that rounded everything in the theme. Thank you for the help. Consider this complete :100: