how to show % discount on a product using debut theme

Solved
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)

Accepted Solutions
Tejas_Nadpara
Shopify Partner
1087 216 529

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 support@hexaecommerce.com regarding any help

View solution in original post

ankur-verma
Shopify Expert
94 19 26

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 37 (37)
Tejas_Nadpara
Shopify Partner
1087 216 529

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 support@hexaecommerce.com regarding any help
ankur-verma
Shopify Expert
94 19 26

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.

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
1087 216 529

@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 support@hexaecommerce.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
1087 216 529

@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 support@hexaecommerce.com regarding any help
TBD19
Tourist
6 0 2
Tejas_Nadpara
Shopify Partner
1087 216 529

@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 support@hexaecommerce.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
1087 216 529

@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 support@hexaecommerce.com regarding any help
lh23
New Member
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

chris616
New Member
2 0 0

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

Thanks,
Chris

chilco
New Member
1 0 0

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

Adler
New Member
3 0 0

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

JAMS
New Member
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! 

Aakash
New Member
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

Cris_ch
New Member
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/