WhatsApp
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 }}%
</p>
{% 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%).
