How to Display "Amount Saved" on Your Shopify Sale Page with Dawn Theme

There’s a funny thing about setting up an online store. It's a lot like baking a cake for the first time. You have your shiny Shopify theme—that's the whole cake mix—and you think it’s going to be a piece of cake. All pun intended! But once you get started, you realize you also need a pinch of this, a dash of that, and oh, you forgot the eggs! I remember this vividly when my cousin Kate and I embarked on setting up her online shop using Shopify's Dawn Theme—determined, but a little oblivious to the tech-bit that awaited us. Our mission was crystal clear: make those discounts pop out like our grandma's famous apple pie.

When we hit the snag of not being able to display the "Amount Saved" under each product in our sale collection, I thought, “How hard could it be?” As it turns out, it took a little more than a sprinkle of basic CSS. Like a good puzzle, it needed patience, creativity, and a handful of line codes to bring our vision to life. But hey, if we could do it, so can you! So let’s dive into this frosting of code and magic our sale page with both savings and a splash of red.

Step 1: Adding Some Holiday Cheer with Color

The first thing Kate wanted was that eye-popping red font color. You know, the kind that screams “SALE” in the most delightful, stop-you-in-your-tracks way. Fortunately, adding a color change in Shopify isn't akin to decoding the Rosetta Stone.

Find Your Way to the Stylesheet

Head over to your Shopify admin dashboard.
In the left panel, click on Online Store, then select Themes.
Spot Dawn Theme—our trusty companion—and click on Actions > Edit Code.

Here is where the magic begins. Now, why don't we scroll our way to the Assets folder and find that little nugget of a file called base.css or simply theme.scss.liquid.

Let's Code

Add this snippet of coquetry:

.sale-price {
  color: red;
  font-weight: bold;
}

Just drop this into your stylesheet. Maybe even imagine yourself as a sorcerer casting spells. Because that is quite literally what you're doing here, changing aesthetics with a flick of a wand—ahem, I mean cursor.

Step 2: Crunching Numbers like a Master Chef

Now, the real adventure begins—adding the text "Save $X.00" for your buyers. This is the line where tech meets a bit of math (hello, scary!). But fear not, for we have your back—and spreadsheets too if necessary.

Mix Those Ingredients—A Dash of Liquid!

Let's head back to our Edit Code area and find the elusive product-grid-item.liquid file or whatever your theme uses to define product tiles. It lives in the sections or snippets directory.

Insert the Secret Code

Alright, here’s where we pop your delightful “Save $X.00” message:

{% if product.compare_at_price %}
  <div class="amount-saved">
    Save {{ product.compare_at_price | minus: product.price | money }}
  </div>
{% endif %}

What exactly are we doing here? In layman's terms—we're deducting the current price from the compared (original) price and throwing a little currency formatting pixie dust on it.

Step 3: Package it with a Nice Bow

By now, you and Kate would've huddled over the screen, perhaps with a celebratory coffee at hand. Our festive red? Check. The "Amount Saved" display? Double check. And once you preview this in your theme, the result should make you giddy with joy—like finding the perfect bow to tie around a heartfelt gift.

But remember! Nothing stays static in the e-verse—tinker, tweak, and yes, ask around the community if you get stuck. We’re all paddling in this ocean of code together.

In closing, I want you to know that if two non-tech folks like us can craft these delightful displays of customer love, right under your sale stars, you can too! Here's to crafting a sales page that's as beautiful as it is functional, and here's to making sure your customers know just how much they're saving—because after all, who doesn't love a tale of savings and a bit of retail magic?