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.

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.