How to Show a Sale Percentage Badge on Shopify Product Images

June Nguyen -

There is nothing quite as frustrating as pasting custom code into your Shopify theme, only to break your product grid or end up with a badge screaming a messy decimal number! For many merchants upgrading to Online Store 2.0, old tutorials simply do not work anymore.

Displaying exactly how much a customer saves is a powerful conversion driver. In fact, e-commerce UX research shows visual badges can increase click-through rates by up to 15%. If you want to add sale percentage badge shopify features to your storefront, you need methods tailored for modern themes like Dawn rather than outdated legacy code.

In this guide, we will walk you through exactly how to show a discount percentage on Shopify. You will learn the correct Liquid files to edit, the math logic required to round those decimal points, and a completely code-free app alternative.

Let's get started.

I. Overview of Shopify Sale Badges

A clear percentage badge immediately communicates value compared to a generic text label

1. The Rule of 100 in E-commerce

Consumer behavior expert Jonah Berger established a powerful pricing principle called the Rule of 100. It dictates how you should frame your discounts based on the item's original price.

  • Products under $100: Display savings as a percentage (like 20% off). This feels larger to the buyer than a raw dollar amount like $10 off.
  • Products over $100: Display absolute dollar amounts (like $50 off). This feels more substantial than 10% off a $500 item.

Dynamic percentage badges automatically tap into this buyer psychology without requiring manual math on your end. If you want to dive deeper into this strategy, read our guide on How to Use Product Labels to Highlight Special Offers on Shopify.

2. The Online Store 2.0 Architecture Shift

Legacy tutorials instruct you to drop code directly into theme.liquid. In modern themes like Dawn, those instructions fail.

Today, badge logic lives inside modular component snippets like price.liquid and card-product.liquid. When editing these files, many merchants run into a specific math logic error. Standard Liquid division creates floating-point decimals instead of clean integers. We will show you exactly how to fix this below.

II. 5 Steps to Add a Sale Percentage Badge

You have two paths to implement this feature. You can either edit your Dawn theme's Liquid code manually, or you can take the automated app route to save time and prevent technical errors. Here is your step-by-step implementation guide.

1. Set Your Compare-at Prices Correctly

The compare-at price must always be strictly higher than the selling price for the badge logic to trigger

To show a discount percentage on Shopify, the system needs raw data to calculate. Your Liquid code will break if your baseline pricing fields are empty or configured backwards.

Here is how to set it up:

  • Navigate to Products: Open your Shopify Admin and select an active product.
  • Locate Pricing: Scroll down to the Pricing section.
  • Input Values: Enter your discounted selling price in the Price field, and the original higher price in the Compare-at price field.

Make sure you save your changes before testing any custom code.

2. Locate the Correct Liquid Snippets in Dawn

Finding the right file is crucial when you edit code for a Shopify sale badge. Placing code in the wrong template will result in missing badges on your product grid.

Follow these navigation steps:

  1. Go to Online Store > Themes.
  2. Click the three dots next to your active theme and select Edit code.
  3. Open the Snippets folder and search for price.liquid. This file controls the price display across most OS 2.0 themes.
  4. Search for card-product.liquid. This file dictates how items appear in your collection grids.
Pro Tip: Always duplicate your live theme before editing Liquid files. This gives you a safe backup if a syntax error breaks your storefront layout.

3. Inject the Percentage Math Logic

Using the round filter ensures your customers see clean numbers like 20% instead of 20.45%

Standard tutorials fail here because basic subtraction leaves messy decimal data. You must use filters to round the discount percentage in Shopify liquid so it looks professional.

Execute this math logic:

  • Locate the sale badge block: Inside price.liquid, find the code block rendering the standard sale text.
  • Calculate the difference: Use {{ compare_at_price | minus: price }} to find the exact dollar amount saved.
  • Convert to percentage: Multiply the result by 100.0 and divide by the compare-at price.
  • Apply the round filter: Crucially, wrap your math in | round or | floor so 14.2857% becomes a clean 14%.

4. Customize the Shopify Sale Badge CSS

Raw text hovering over a product image ruins the shopping experience. You need to customize the Shopify sale badge CSS to ensure the label is eye-catching but does not block crucial product details.

Apply these styling rules:

  • Target the class: Open your base.css or component-price.css file in the Assets folder.
  • Use CSS Flexbox: Apply display: flex; and align-items: center; to keep the text perfectly centered inside the badge container.
  • Adjust brand colors: Change the background-color property to match your brand's primary accent color. Red or black performs best for sales.
  • Control positioning: Use absolute positioning to anchor the badge to the top-left or top-right corner of the product card.

5. The Free No-Code Alternative

If hacking Liquid files feels risky, you are not alone. Code updates often get wiped out during theme upgrades, and hard-coded badges cannot easily change based on seasonal campaigns.

Here is the faster solution:

  • Install a dedicated app: Add a free sale percentage badge Shopify app to your store.
  • Use Fordeer: The Fordeer Product Labels & Badges app automates this entire process without touching a single line of code.
  • Set dynamic rules: Automatically display percentage savings, hide badges when inventory drops, or change styling for specific holidays.

Using an app transforms a risky technical chore into a simple marketing toggle—saving you hours of frustration. You can explore more Creatives Ideas to Utilize Shopify Product Badges to Attract Customers to see what else automated labels can do for your conversion rates.

III. Other Things to Keep in Mind

Maintaining accurate sale badges requires ongoing store management beyond just the initial setup.

1. How to Bulk Edit Compare-at Prices

The bulk editor saves hours of manual data entry when launching store-wide sales

Skip opening individual product pages to update your discounts. You can bulk edit compare-at prices in Shopify directly from your inventory dashboard.

Here is the workflow:

  1. Go to your Products page and select the checkboxes next to the items you want to discount.
  2. Click the Bulk edit button that appears at the bottom of the screen.
  3. Add the Compare-at price column if it is not already visible.
  4. Type in your new prices and hit save.

Dynamic percentage badges from apps like Fordeer will instantly update across your storefront as soon as these bulk prices are saved.

2. Prioritizing UX Accessibility

Your badges must be accessible to all users. A beautiful design is useless if shoppers cannot read it.

Focus on these accessibility factors:

  • Contrast ratios: Ensure your text pops against the background. White text on a dark red badge offers excellent legibility.
  • Screen readers: Proper CSS-based labels are easily read by screen reading software so visually impaired users know about your discounts.
  • SEO benefits: Avoid uploading flattened PNG images of badges onto your product photos. Search engines cannot read text trapped inside an image file. CSS-coded text or app-injected badges are inherently better for your store's visibility.

IV. Conclusion

Replacing a generic text label with a dynamic sale percentage badge is one of the most effective micro-optimizations you can make for your Shopify store. Whether you choose to edit your Dawn theme's Liquid code using our math logic, or you decide to save time with an automated app, ensuring your customers immediately see their savings is paramount.

You do not need to be an expert developer to make these high-converting changes. Take it step by step, back up your theme, and watch your click-through rates grow.

Follow the Fordeer Team for more useful updates!