Show Discount percentage % in Product page in DORIS theme

Shopify Discussion
, ,
1

Hi

Does anyone know how to show discount and discount percentage on DORIS theme product page? The discount and discount percentage should change when the same product has different variants with different prices.

like this:

pridiff.png

pridiff.png

Thank you

Sincerely Linda

2

Hi @Linda38 Just copy and paste below code in your product.liquid file product-template.liquid find the code of price and just paste.

  1. Online Store > Edit Code > product.liquid or whatever product file you have > find price code
{% assign price = product.selected_or_first_available_variant.price %}
  {% assign compare_at_price = product.selected_or_first_available_variant.compare_at_price %}
  {% assign discount_percentage = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price %}
  -{{ discount_percentage | round: 0 }}% off

you can change the color of background or font color as per your choice.

Please let me know and mark as solve!

3

Hei

Thank you for your answer.

I tried this solution, but the percentage remains the same when I change the variant of the same product which has a different price, the percentage show only for the first variant and the first price.

The code of the prices in Doris theme is:

{{ current_variant.price | money }} {% if product.compare_at_price_max > product.price %} {% if current_variant.compare_at_price > current_variant.price %} {{ current_variant.compare_at_price | money }} {%- endif -%} {%- endif -%}

Thank you

sincerely

Linda

4

Hi @Linda38 Please replace my above code with this one it will apply on all variants dynamic discount prices are changed based on sale price and compare at price-

{% assign price = product.selected_variant.price %}
  {% assign compare_at_price = product.selected_variant.compare_at_price %}
  {% assign discount_percentage = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price %}
  
    -{{ discount_percentage | round: 0 }}% off

Please mark as solve!

5

Hi Sandyparihar07

the code above gave me this thing in the picture bellow.

ggfsa.png
ggfsa.png720×215 11.3 KB

For example the price for 40cm is different than 60cm , the discount percentage must be change when I click on the other variant, but it doesn’t. perhaps I have to add javascript code , but I do not know how.

Is there any App that do this?

Thank you

sincerely

Linda

6

Hi @Linda38 I have to check the code what is the issue. i checked on my site is working well. see screenshot below for different variants and different prices-

sandyparihar07_0-1682341281126.png
sandyparihar07_0-1682341281126.png1585×757 128 KB

sandyparihar07_1-1682341297781.png
sandyparihar07_1-1682341297781.png1585×757 128 KB

sandyparihar07_2-1682341306813.png
sandyparihar07_2-1682341306813.png1585×757 129 KB

7

Hi

I can resolve the issue by adding the Javascript code below for this.

code is:

(0, n.default)(a.PerCenT, s).html(r.default.Currency.formatMoney(P.compare_at_price-P.price/P.compare_at_price , i.moneyFormat))

for exemple:

P.compare_at_price-P.price/P.compare_at_price = 71-30/71

But what is the best way to add divide by (/) in this code, if I add operator like - or * or + it work properly , but the division by (/) don’t work properly.

perhaps there is a mistake in the code,

Can anybody help me correct the code above?

Thank you

Linda

Thank you