Adding Discount Badges to Every Product Page: A Step-by-Step Guide

Ever wake up one morning and, in the haze of early coffee, decide that today is the day your online store gets spruced up? You dive into the Shopify sea with the vigor of a golden retriever seeing water for the first time. For us, it was adding that little spark, the discount badge, which somehow says, "Hey, look! This is your lucky day!"

We'd been working on a store just like yours, a place where each product shouted louder than the last for attention. And then, it hit us—what if there were a cozy badge sitting right above the product title, a beckoning beacon of savings?

So, grab your digital toolkit. Let's sprinkle those discount badges everywhere they need to be.

Understanding the Terrain

In our journey to adorn each product with a badge, it was much like setting out to find the perfect coffee bean. The goal was clear: every product page was going to get a badge right above the title. The trick? Placing the code in the right spot. But where? Let's unravel the mystery together.

Step 1: Locate the Product Template

Imagine the product template as the blueprint of your beloved store. It's where product details, images, titles, and—now—badges live harmoniously. Here's where we've got to start. Our adventure begins in the Shopify admin.

1. Navigate to Shopify Admin - Go to your Shopify admin dashboard.
2. Select "Online Store" - Over on the left sidebar, click it.
3. Click "Themes" - Now, your current theme should pop up.
4. Choose "Actions" and then "Edit Code" - Ah, here’s your treasure trove!

Step 2: Unearthing the Liquid File

The liquid (not the stuff in your mug) file is crucial. It whispers directly to our product pages.

1. Find "Sections" or "Templates" Folder - Look around under sections or templates, depending on your theme’s personality.
2. Locate product-template.liquid or product.liquid - Essentially, these files are the stage on which your products perform.

Step 3: Code Like No One’s Watching

Coding can be scary. Like trying a new dance move or mimicking grandma’s secret pie recipe. But trust me, it’ll be fine.

1. Insert the Badge Code - Wrap your heads around this next code snippet. Just as you'd gingerly drop a badge on your product photos - so delicately, yet with purpose:

   {% if product.price < product.compare_at_price %}
     <div class="product-discount-badge">Discount Available!</div>
   {% endif %}
   

   This magic phrase essentially asks, “Hey, if there’s a discount, can you show this badge?”

2. Place Right Above Title Code - Like putting sprinkles on top of ice cream. Find the code that shows the product title (look for something like {{ product.title }}) and put our snippet above it.

Step 4: Style to Thrill

Now our badge is there, bare as a white wall. We need to dress it up a bit, give it some swagger.

1. Locate "Assets" Folder - Head over to the same “Edit Code” section and find the "Assets" folder.

2. Open theme.scss.liquid or theme.css.liquid - Depending on your theme, this is where CSS magic happens.

3. Add Some CSS - Slip this snippet into the file, changing colors and sizing as you fancy:

   .product-discount-badge {
     background-color: #e74c3c; /* red background */
     color: #fff; /* white text */
     padding: 5px;
     border-radius: 5px;
     font-size: 14px;
     margin-bottom: 10px;
   }
   

Step 5: Lights, Camera, Preview

Time to see if our labor bears fruit. Our inner theater enthusiast eagerly previews the new layout.

1. Preview the Store - Go back and click "Preview" from your theme’s action dropdown.
2. Inspect Each Page - Look through your products. Find that sweet badge calling out for attention, like a proud first-place ribbon at a county fair.

Adventure Recap

From weaving through Shopify’s many files to sprinkling some liquid gold, adding a discount badge isn’t so daunting. Isn’t it delightful knowing that a few lines of code can bring heaps of joy? It feels like decorating a tree for the holidays—each badge a tiny ornament declaring, “Sale!”

So, there you have it. In our cozy tech adventure, we found a way to light up every product page like never before. Go on, take this guide, and run with it to make your store shine!