Shopify: How To Show Percentage Discount With Rounding

Shopify recently introduced some neat new Math Filters, making it possible to round numbers. I spent a lot of time figuring out how to show a percentage-based discount on the Cart Page and Product Page for a Shopify Client. I haven’t seen it posted anywhere else in its entirety; just in smaller pieces which are difficult to piece together.  To save you the trouble, here’s what you’ll need:

CART PAGE

{% if item.variant.compare_at_price > item.variant.price %}
{{ item.variant.compare_at_price | money }}

{{ item.variant.compare_at_price | minus: item.variant.price | times: 100.0 | divided_by: item.variant.compare_at_price | times: 100 | divided_by: 100 | floor }}%
{% endif %}

PRODUCT PAGE

Replace item.variant with product, like this:

{% if product.compare_at_price > item.variant.price %}

{{ product.compare_at_price | money }}
{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by:product.compare_at_price | times: 100 | divided_by: 100 | floor }}%
{% endif %}

Shopify Rounded Percentage

***

Thank you again for keeping up with our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our products. We also have some top blog recommendations for you to check out; The Benefits Of Multichannel Thinking, how to increase shopify revenue, an overview to e-commerce regulations, the most excited e-commerce marketing trends, and  The Best Shopify Cheat Sheet Resources.  As always, keep a lookout for new blog posts.

Questions? Ask away in the comments below.

What are the top Shopify stores doing?

Take what we've learned and use it to your advantage.
Get our exclusive research: Insights from over 500 Shopify Stores.

Powered by ConvertKit

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

;

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.