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 5 (5)

ProtoMan44
Shopify Partner
495 43 80

@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
Pathfinder
80 13 14

 

  • 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

Perennial
Shopify Partner
1466 114 233

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
4416 1006 1657

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!


PageFly - #1 Page Builder for Shopify merchants.


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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

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

 

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.