Transform Your Shopify Sale Badges: Show 'Save $X' on Nordic Theme Collection Pages

Hey there, fellow store owners! As a Shopify migration expert, I spend a lot of time poring over community discussions, and one common theme that pops up is how to make your sales really sing. A generic "SALE" badge is fine, but wouldn't it be great if your customers could instantly see exactly how much they're saving? That's exactly what one store owner, wingedmonkey, asked recently in the Shopify community about their Nordic theme.

It's a fantastic question, and the community really rallied to provide some super actionable insights. Let's dive into how you can transform those simple "SALE" badges into powerful "SAVE $X" messages on your collection pages.

Why "Save $X" Makes a Bigger Impact

Think about it from a customer's perspective. Seeing "SALE" is good, but seeing "SAVE $15.00" or "SAVE 25%" immediately communicates tangible value. It's clearer, more persuasive, and can often be the nudge a customer needs to click that product. It’s all about making that value proposition undeniable right on the collection page, improving your conversion rates.

The Community's Solution: Customizing Your Nordic Theme

The good news is, if you're using the Nordic theme, this customization is totally doable with a small code edit. Our community experts, particularly Custom-Cursor, ai-theme-code-editor, and Ploqo, laid out the process beautifully. The core idea is to calculate the difference between your product's compare_at_price (the original price) and its current price, then display that difference.

Here’s a clear, step-by-step guide based on their excellent contributions:

Step-by-Step: Changing Your Sale Badge to Amount Saved

Before you start, it's always a good idea to duplicate your theme. This way, if anything goes awry, you can easily revert to your original version.

As Ploqo demonstrated for the Nordic theme, here's how to do it:

1. Go to your Shopify Admin > Online Store > Themes.
2. On your active Nordic theme row, click the … (three dots) > Edit code.

3. In the code editor, open the Search function (magnifying glass icon on the left, or press Ctrl/Cmd + Shift + F).
4. Search for: on_sale' | t. This should lead you directly to the relevant line for the sale badge.
5. You'll likely find a line that looks like this:
   

   {{ 'products.product.on_sale' | t }}
   

6. Replace just that line with the following code snippet:

   Save {{ card_product.compare_at_price | minus: card_product.price | money }}
   

   A quick note from ai-theme-code-editor: Your theme might use product instead of card_product. If your original line uses product (e.g., product.compare_at_price), then stick with product in the new code as well:

   Save {{ product.compare_at_price | minus: product.price | money }}
   

7. Click Save.

Once saved, your collection badges will now display the exact amount saved!

A few extra tips:

• The | money filter automatically formats the savings with your store's currency.
• If you prefer to drop the .00 for whole dollar amounts, simply change | money to | money_without_trailing_zeros.
• Feel free to change the word "Save" to anything you like, such as "You save" or "Discount".

Important Consideration for Variants

As ai-theme-code-editor wisely pointed out, if your products have multiple variants with different prices, product.price and product.compare_at_price typically represent the lowest available variant price. This means the displayed savings will be for the cheapest option. For most stores, this is perfectly acceptable, but it's something to keep in mind!

Bonus Tip: Collapsing Filters on Nordic Theme Collection Pages

While we're on the topic of improving the user experience on your Nordic theme, Ploqo also shared a fantastic tip about managing collection page filters. By default, Nordic often opens every filter group, which can make for a cluttered look, especially on desktop. wingedmonkey even followed up asking for help with this!

Here are two ways to have your filters start collapsed:

Option 1: Small Code Edit to Collapse Each Group

1. Go to Online Store > Themes. On your Nordic theme row, click the … (three dots) > Edit code.
2. Open snippets/facets.liquid. (You can also use Ctrl/Cmd + Shift + F and search for facets__disclosure).
3. Within the filter's
   tag, you'll find the word open. Delete just that word.
4. There are usually two of these (one for normal filters, one for the price filter). Remove open from both.
5. Click Save.

Now, every filter will start collapsed and open only when clicked.

Option 2: No Code (Switch to Drawer Layout)

If you prefer a cleaner look where filters are hidden behind a button until needed, you can switch to the Drawer layout:

1. Go to Online Store > Themes > Customize.
2. Click on the Product grid section.
3. Under Filtering and sorting > Desktop filter layout, select Drawer.
4. Click Save.

This replaces the sidebar with a slide-out panel, so nothing shows expanded on the page. Remember, these changes primarily affect desktop, as filters on mobile typically open collapsed by default.

It's these kinds of small but impactful customizations that can really elevate your store's professionalism and user experience. The Shopify community is a treasure trove of knowledge, and tapping into it for insights like these can make a huge difference in how your customers perceive your brand and interact with your products. So, go ahead, give these tweaks a try, and watch your sales badges and filter layouts work harder for you! If you're looking to start your own online store and want to make it shine from day one, consider starting your journey with Shopify – it offers endless possibilities for customization and growth.