I trust that you found this blog post to be enjoyable. If you are interested in having my team handle your eCommerce setup and marketing for you, Contact Us Click here.

How to Compare the Prices of Your Products in Percentage on Shopify

How to Compare the Prices of Your Products in Percentage on Shopify

Comparing product prices as a percentage can provide valuable insight into your pricing strategy and help you understand how discounts and sales affect your sales. This article provides steps to calculate and view price percentage comparisons for your Shopify store.

Step 1: Understanding price comparisons as percentages:

Before we get into the technical implementation, it's important to understand what we mean by percentage price comparison. When comparing prices, we typically look at the difference between the original price (comparison price) and the discounted price (actual sale price). The discount percentage can be calculated using the following formula:

                                               ( Compare-at Price − Selling Price )

Discount Percentage =   ----------------------------------------------------------  ×  100

                                                        ( Compare-at Price )


Step 2: Setting up comparison pricing in Shopify

Make sure your products have both a Compare Price and a Sell Price set. In your Shopify admin panel, you can:

  • Go to Products > All Products. 
  • Select the product you want to edit.
  • In the Pricing section, enter the Compare-at Price and Price.


Step 3: Change your Shopify theme to display discount percentages

Display the discount percentage on your product pages, you'll need to edit your Shopify Theme. Follow these steps:

Access Theme Files:

  • From your Shopify admin, go to Online Store > Themes.
  • Click on Actions > Edit Code.


Edit the Product Template:

  • In the Sections folder, locate and open the  main-product.liquid file, or a similarly named file that contains your product details.


Add Discount Percentage Calculation:

  • Find the section where the product price is displayed.
  • Add the subsequent Liquid code to calculate and show the cut price percentage:

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

  {% assign discount = product.compare_at_price | minus: product.price %}

  {% assign discount_percentage = discount | times: 100 | divided_by: product.compare_at_price %}

  <p class="discount-percentage">

    Save {{ discount_percentage | round }}%


{% endif %}

This code checks if the comparison price is higher than the sale price, and if so, calculates and displays the discount percentage.



Step 4: Testing the implementation

After you make these changes, preview your store to make sure that the discount percentage is displayed correctly on any product pages that have price differences.

Step 5: Optional Enhancements

You can also extend the implementation with additional functionality.

  • Show on collection page: Modify your collection template to display the discount percentage on your collection page.
  • Badge Style: To make your discount stand out more clearly, create a discount badge instead of just text. 
  • Conditional Display: Display only if the discount percentage reaches a certain threshold (e.g., display only if the discount is greater than 10%).


Back to blog