How To Show % Discount

How To Show % Discount

pleasehelr
Tourist
9 0 0

Hi there,

Can anyone please tell me how to show the actual % off for each product, say 20% OFF or save $, to replace the "sale". I am using dawn. Thank you.

 

Best Regards,

Replies 8 (8)

ProtoMan44
Shopify Partner
698 57 111

@pleasehelr Hey, thanks for posting here.
 can you please share the link to inspect it, thanks.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

Asad-Mahmood
Navigator
308 53 61

 

  • Go to your Shopify Admin dashboard.
  • Navigate to Online Store > Themes.
  • Click on "Actions" > "Edit code".
  • Look for the template file that controls how product prices and sale labels are displayed. This is usually product.liquid 
  • Replace the part that displays "Sale" with the below Liquid code to calculate the percentage off.

 

{% if product.compare_at_price > product.price %}
   {% assign percent_off = 100 | times: (product.compare_at_price - product.price) | divided_by: product.compare_at_price | round %}
   {{ percent_off }}% OFF
{% endif %}

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




Perennial
Shopify Partner
1474 115 234

hi Pleasehier

 

To display a percentage discount on a collection page in Shopify, you can use the following code in your theme's Custom Liquid block:
1 Calculate the percentage discount:
(% capture discount %) (( product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max ))% (% endcapture %) 
2 Display the discount:
{{discount }}

 

if you face any issue  let m know

PageFly-Richard
Shopify Partner
4902 1102 1776

Hi @pleasehelr 

This is Richard at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file price.liquid

Step 3: In that file comment the code which currently displays the SALE badge, and instead add code for discount.

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>

And replace it with this 

{%- if compare_at_price > price -%}
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ discount }}% OFF
</span>
{% endif %}

 

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

shoaiblucknow
Visitor
1 0 0

Thank you it worked

Dan-From-Ryviu
Shopify Partner
10868 2143 2278

Hi @pleasehelr 

Please go to Online Store > Themes > click "..." in Dawn theme > Edit code > open card-product.liquid file, find this line of code around line 139 to display it on collection

 

{{- 'products.product.on_sale' | t -}}

 

Replace it with this code.

 

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
{{ percent }}%

Screenshot 2024-07-01 at 16.01.02.png

 

To display it on the product page, please open the price.liquid file, find this line of code 

 

{{ 'products.product.on_sale' | t }}

 

Replace it with this code and save the file.

 

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
{{ percent }}%

Screenshot 2024-07-01 at 16.01.06.png

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gr_trading
Shopify Partner
1996 147 205

Hi @Perennial ,

 

Please find the below code to implement the same file named to change is card-product.liquid.

{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- discount_percentage }}

 

To implement the same on product page too, request you to refer the below video for line number and other details.

 

Hope this will helps...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

hh2038
Shopify Partner
3 0 1
{% if product.compare_at_price > product.price %}
{% assign discount = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
<span>
{{ discount }}% OFF
</span>
{% endif %}


this one works for me.