Solved

how to show % discount on a product using debut theme

Lovelyn12
Excursionist
39 1 4

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.

Accepted Solutions (2)

Tejas_Nadpara
Shopify Partner
1118 222 552

This is an 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

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help

View solution in original post

ankur-verma
Shopify Expert
94 19 27

This is an 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.

View solution in original post

Replies 40 (40)

Tejas_Nadpara
Shopify Partner
1118 222 552

This is an 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

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
Lovelyn12
Excursionist
39 1 4

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
Tourist
6 0 2

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

Tejas_Nadpara
Shopify Partner
1118 222 552

@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

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
TBD19
Tourist
6 0 2

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 code.png

Thanks

Vishnu

Tejas_Nadpara
Shopify Partner
1118 222 552

@TBD19 

 

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

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
TBD19
Tourist
6 0 2

Here's the url www.thebigdealstore.in

 

Thanks

Vishnu

Tejas_Nadpara
Shopify Partner
1118 222 552

@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"

discount.png

 

Let me know if you are looking for something else.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
TBD19
Tourist
6 0 2

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.

 

Sizee.png

Tejas_Nadpara
Shopify Partner
1118 222 552

@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

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
chilco
Visitor
2 0 1

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
Visitor
1 0 0

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
Visitor
3 0 0

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
Visitor
1 0 0

FB_IMG_1593659256740.jpg

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

abalejr
Visitor
1 0 0

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
Visitor
2 0 0

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

Adler
Visitor
3 0 0

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

Cris_ch
Visitor
1 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

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
Excursionist
11 1 4

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
Visitor
1 0 0

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
Tourist
9 0 4

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
Visitor
1 0 0

Hi,

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

Here's the url www.bakstur.fo

please help.

 

Emorrison09
Visitor
2 0 1

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

millyen
Visitor
2 0 0

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

Lolaaa3
Visitor
2 0 0

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
Shopify Expert
94 19 27

This is an 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
Visitor
2 0 0

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

Thanks,
Chris

JAMS
Visitor
1 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

hello

here is my site.

https://suubula.com/

I put the code but it is not working.

Pepitocat
Visitor
1 0 0

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
New Member
4 0 0

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
Tourist
5 0 2

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
Excursionist
27 1 8

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
Excursionist
12 0 1

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
Visitor
3 0 0

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
Shopify Partner
13 0 2

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
Shopify Partner
1 0 0
{% assign diff = product.compare_at_price | minus: product.price %}
{{ diff | times: 100.0 | divided_by: product.compare_at_price | split: '.' | first }}%