How to Display Sale Percentage Badges on the Product Page in Shopify's Dawn Theme

By Tony Ng.
November 26th, 2024

How to Display Sale Percentage Badges on the Product Page in Shopify's Dawn Theme

Introduction

Online shopping platforms like Shopify offer various tools and themes to optimize your ecommerce store’s user experience. One such feature is sale badges, which indicate discounts to your customers. Although you have successfully added these badges to your collection page, transferring them to the product page in the Dawn theme requires a few extra steps. This guide will provide a detailed explanation of how to implement this change.

Understanding the Issue

The Problem

Many Shopify users with the Dawn theme face the challenge of displaying sale percentage badges on the product page. The issue arises because the Dawn theme, by default, does not offer a simple, straightforward way to reflect the sale percentage on product pages as it does on collection pages.

Why This Happens

The main reason behind this limitation is that the Dawn theme’s existing code structure for displaying price reductions is tailored for collection pages. Although the underlying components, like price comparisons, exist in the theme, additional code customization is necessary for the product page.

Exploring the Solution

Now, let's delve into the solution, identify where you need to implement code changes, and how to customize these changes to suit your store's aesthetic.

Step-by-Step Guide to Implement Sale Badges

1. Accessing Your Theme Code

Navigate to Your Shopify Dashboard: Log in to your Shopify admin panel. Navigate to Online Store in the left sidebar.
Select Themes: Under the Online Store section, click on Themes.

2. Editing the Theme Code

Click 'Edit Code': Next, click on the Actions dropdown menu and select Edit code to modify your theme files.

3. Locating the Relevant Snippet

Find the Snippets Folder: In the code editor, locate the Snippets folder from the sidebar.
Identify price.liquid: Search for a file named price.liquid within this folder. This file controls how prices are displayed across your store.

4. Implementing the Sale Badge Code

Insert the Code: Insert the following code snippet at an appropriate location within the price.liquid file:

{% if product.compare_at_price > product.price %}
  <strong>-{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}%</strong>
{% endif %}

Explanation: This code calculates the discount percentage by comparing the regular price with the sale price for products where the original price exceeds the current price.

5. Testing Your Changes

Preview Your Store: After saving the changes, return to your Shopify admin and click Preview on your theme to ensure the sale badges are correctly displayed on all product pages.

6. Additional Customizations (Optional)

Styling Your Badge: To match your store's branding, you can style these badges using CSS within your theme.scss.liquid or theme.css file.

Addressing Similar Issues

If you face similar challenges with other features not appearing on the product pages, the above process can be applied generally: identify relevant liquid files and modify them accordingly.

Conclusion

Adding sale percentage badges to product pages within the Dawn theme is vital for improving transparency and customer satisfaction. By following this guide, you can ensure that your store utilizes all features effectively, giving customers a seamless shopping experience.