How can I add a Save x % button next to my discounted price on the product page - Symmetry theme?

[ecom36]

Hi there, how can I add a red button next to the old price on the product page that states ‘Save x%’ on Symmetry theme?

At the same time, I want the discount button to disappear from the top of the product photo. It should, however, still show on the product images on the homepage, collection page and you may also like products on the product page itself.

[PaulNewton]

Hi @ecom36 that is an advanced theme customization to control the placement of a calculated badge with the price.

The photo badge could be hidden with CSS but you neglected to provide a url for inspection.

Such changes can sometimes be found by searching the forums for you theme and use case keywords.

READ: https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

If you need this customization then contact me by my email for services, or if you have access private message by clicking here (sloooower).
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[namphan]

Hi @ecom36 ,

Please send me the code of main-product.liquid file, I will check it for you

[ecom36]

Hi Namphan, just sent you a DM with the code.

[namphan]

Hi @ecom36 ,

Please follow these steps:

• Step 1: Please move code here:

• Step 2: Go to main.css file and add code:

.product-info__price {
  display: flex;
  gap: 8px;
  align-items: center;
}
.product-info__price .product-label-container {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

I hope it helps!