How can I display discount percentage on my product page?

Store Design
1

Hi

Can someone please help me to add “%” discount on product page.

URL- https://wagntails.store/products/aeolian-dryer

Thanks

2

@Rahul1998 - please open product page in customize settings and check if you have an option to show % discount, else will need to do it via code editing

3

Hello there

heres how you can show a discount to a product’s price in HTML and Javascript:


$100

20% off

JavaScript

const price = document.querySelector('.price');
const discount = document.querySelector('.discount');

const originalPrice = parseFloat(price.textContent.slice(1));
const discountAmount = originalPrice * parseFloat(discount.textContent.slice(0, -3)) / 100;
const discountedPrice = originalPrice - discountAmount;

price.textContent = `$${discountedPrice.toFixed(2)}`;

This code will grab the original price and discount amount from the HTML and calculate the discounted price. The discounted price is then displayed in the .price element.

4

Its not working.