how to show % discount on a product using debut theme

[Lovelyn12]

Hello experts,

I am using debut theme. May I know how to show % discount on every product. And How to make proper layout of qty and add to cart button on home page. Please help me to fix this.

Thank you.

[Tejas_Nadpara · Accepted solution]

@Lovelyn12 

Add following code where you want to display like "17% off" in your product page:

{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}

Also, I can help you to fix Qty and AddToCart button, just mail me with store details.

Thank you,

Tejas

[Tejas_Nadpara · Accepted solution]

@Lovelyn12 

Add following code where you want to display like "17% off" in your product page:

{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}

Also, I can help you to fix Qty and AddToCart button, just mail me with store details.

Thank you,

Tejas

[Lovelyn12]

Thank you so much. 

www.boutq.com store url.

I already add the code on product.price.liquid, but as I go to home page there is not % discount display on each product.

[TBD19]

May i know in which section code should i apply this on ?

[Tejas_Nadpara]

@TBD19 

If you want display discount on product page then add code in Sections > product-template.liquid file

and, If you want to display it on collection page products then add code in Assets > product-price.liquid file

Thank you,

Tejas

[TBD19]

Hi, 

Thanks for reaching out to me, 

I tried as you have mentioned but nothing happened in the page. I Could not find the Product-price.liquid file in the assets. 

Sections > product-template.liquid file - I pasted the code in the bottom of the file and saved,

Please refer the attachment 

Thanks

Vishnu

[Tejas_Nadpara]

@TBD19 

Send my your store url so, I can check and assist you better.

Thank you,

Tejas

[TBD19]

Here's the url www.thebigdealstore.in

Thanks

Vishnu

[Tejas_Nadpara]

@TBD19 

I checked and seems like working fine. Check this product https://thebigdealstore.in/products/faded-salmon-evening-wear-gown

It's showing "50% off"

Let me know if you are looking for something else.

Thank you,

Tejas

[TBD19]

Hi

Thanks for the great Help,  I have another request from you,

 How can I remove the drop down style size and display the sizes in box type and if customer changes the color variants, it should display the available sizes of that product. Please refer the attachment i want to display the sizes like its there.

[Tejas_Nadpara]

@TBD19 

Yes, you can add color and size box something like attached screenshot.

Follow this steps https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

I hope it will help you. If you are not comfortable to do it then you can contact me directly on mail.

Thank you,

Tejas

[chilco]

Works great and can be used on collection pages too... but what code would you use to hide the discount if there is none. Other wise it will show 0%

E.g. I used a div tag to add styling, put the word SAVE in front of it so it reads SAVE 12% or whatever the savings is. But if there is no discount on the product it of course would show

SAVE 0%

Of course that does not look good and it should only show when there is an actual discount.

This is the code I am using:

{% if compare_at_price %}
{% capture discount %}
{{ compare_at_price | minus:price | times:100 | divided_by:compare_at_price }}%
{% endcapture %}
  
        <div style="font-size:1.5em;font-weight:600;color:#ff0000;">SAVE {{ discount }}</div>
  
{% endif %}

Any help as to what if/else code I need to add around the div tag would be much appreciated.

[blackedoutllc]

Hello,

I have found the place to edit the code but continually get error when i put in one of the codes.

Thanks

tyler

[Aakash]

Hi @Tejas_Nadpara 

I tried using the code shared by you given below.

{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}

 I could see it on my store but the calculation displayed was incorrect. The theme I am using is Brooklyn, will appreciate help on this 

Thank you,

Aakash

[Nurherman]

Hai. You know how to make this 60% off and this big Buy Now button?

[abalejr]

The issue with the above solution is that the % off shown is too high. To avoid misleading customers, you should make sure that the displayed discount is rounded down. This works well:

assign percentDiscount = comparePrice | minus: price | times: 0.10 | divided_by: comparePrice | times: 1000.00 | floor

[tarun8]

its not working on my site url :www.smithandblake.com

[Adler]

I have the same issue. I paste the code into it but doesn't work.

[Cris_ch]

hi, i'm trying to modify the debut theme code to insert the discount. I can't, could you take a look?https://chiricostore.com/

[lh23]

Good morning!

I hope this message finds you well Tejas!  For whatever reason I am not getting any % discounts displaying on my product page.  I have copied and pasted the code as is and nothing is being reflected.  I'd like to add a 50% discount to my products.  I am not sure what I am doing wrong.  I look forward to hearing back from you.

-V

[tranleminh0228]

Hi Tejas

I have tried many codes but it did not work out. Please help me with your code: 

1. Where to insert your code?

My domain is teacherhero.net

[Faheem_Iqbal]

Hi tejas, 

How can I show the discount % off on Collection page? I want to display on top left side of the product images on collection page. Please help. 

Thanks.

[hartmanziga]

can someone help me to edit the code ?? because i tried to add this after line 12 and nothing is working.....

here is my code

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}

 
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>

  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}

    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

[lamansh_in]

Hello sir

Want to make some changes in my shopify store's product page.. 

We have a unique buy it now button on the product page & it is named with ' PAY ONLY 25% NOW & REST COD'

What we offer is, that if someone clicks on this button, 75% discount code will be automatically applied to its cart and customer will only have to pay 25% payment

And the change we want is in the button, we want this button to show discounted product price. 

For example - Product price is 1000 INR

What we want is, that button text should be ' PAY ONLY 25% ( 250 INR ) NOW & REST COD'

we want to add discounted product price on the button . 

Please assist us in this matter

We would be highly thankful to you

Our store's URL - https://lamansh.in

Thank you

Regards

Nikhil jain

Lamansh.in

lamansh.in@gmail.com

[olafelli]

Hi,

Can't get this working, I am using theme Brooklyn.

Here's the url www.bakstur.fo

please help.

[Emorrison09]

Tejas, I am trying to do a similar thing can you help me with my website? 

[millyen]

How do you do this on the Dawn theme? Thank you

[Lolaaa3]

Hi Tejas, 

I tried this for my site and it didn’t work. I don’t know if I’m inputting the code into the right liquid section. Please let me know if you can help me. 

[ankur-verma · Accepted solution]

Hi Lovelyn

You can do it very easily if you can modify the liquid files.
Just login in your shopify admin store. There you will see the option of online store.
Expand it here you will find the menu Theme.
Then from there you can find the option to edit the code and find "product-price.liquid" file.
In that files you can write the code after line number 12 write the below code
{% if compare_at_price %}
{% capture discount %}
{{ compare_at_price | minus:price | times:100 | divided_by:compare_at_price }}%
{% endcapture %}
{{ discount }}
{% endif %}


here {{ discount }} is you % discount you can use at any place in that liquid file.

Please let me know if it was helpful.

[chris616]

Hello! I can't seem to make this code work. Using Atlantic Theme. Any tips?

Thanks,
Chris

[JAMS]

Hello, 

I tried to use the solution you provided however I believe I implemented this incorrectly. I got a % on all product pages, 0% where there is no discount and another % value where there is a discount. I am also using Debut, should I paste exactly what you put below line 12? 

Thank you! 

[LogicTH]

BTW, your percentage calculation comes out inversed if the discount is more than 50%. In my store it should come out to 63%, it came out to 37%.

[Camble]

hello

here is my site.

https://suubula.com/

I put the code but it is not working.

[Pepitocat]

Hello there!

I have the same problem, With debut theme I cannot see discount prices on my store www.pepitocat.com, can anyone help please? I have already tried to add the code mentioned in previous comments but din't work.

Thank you very much

Cristina

[GarethVN]

Hi, So I have added the code into the product page and for a product, with a single variant it works well, but I am trying to put it on a product that has 3 variants and it does not refresh when the buyer clicks the other variant only if I refresh the page does it show the correct percentage.

How can we make this work.

Also is there code to say how much the difference is between the price and compare at price so an actual figure of 3€ for example displayed after the % discount that is calculated as above when the user switches between the variants?

[komalpreet0911]

Hi Everyone,

I am using Live theme. May I know how to show % discount on every product. And How to make proper layout of qty and add to cart button on home page. Please help me to fix this.

Thank you.

[komalpreet0911]

Hi Everyone,

I am using Live theme. May I know how to show % discount on every product. And How to make proper layout of qty and add to cart button on home page. Please help me to fix this.

Thank you.

[jjcastillot]

Hello Ankur, your solution worked fine for me. An additional question. Is there a way to show the discount text in a different color or with Bold Style? Thanks a lot for your help

[Thenicholecolle]

Didn't work on my theme (Cart). Can you please help? I want to change the "Sale" button that's in green to show the % of discount for that product. https://www.discountpricesus.com/collections/jewelry

[BlancaC]

Hello Everybody!

I am currently using the them Canopy. But my theme does not show anywhere Sections > product-template.liquid file or Assets > product-price.liquid file. Therefore Im not able to paste the above code anywhere. Does anybody have an idea and can help me please.

Thanks a lot !

Blanca

[agustinsacco]

Hi @Lovelyn12 I'm not sure if this is what you are looking for but this app Codeboost I use let's you promote discount codes across your website really well. You can add custom messages including the percentage the discount code will apply on the eligible products, fully customizable.

I like it because I do not have to modify any theme code.

Description from marketplace:

Codeboost will allow you to display badges and messages above eligible products in the collections page, product page and cart page. Additionally you can only show these promotions selectively and privately to specific customers!

Hopefully this helps!

[DimaDidyk]

{% assign diff = product.compare_at_price | minus: product.price %}
{{ diff | times: 100.0 | divided_by: product.compare_at_price | split: '.' | first }}%