Unlock More Sales: How to Add Dynamic Discount Badges to Your Shopify Horizon Theme

Unlock More Sales: How to Add Dynamic Discount Badges to Your Shopify Horizon Theme

Hey fellow store owners! Ever wonder how to make your sales pop, especially when you’ve got products with different sizes or options, each with its own unique price point? It’s a common challenge, and honestly, a fantastic way to grab customer attention and highlight those sweet deals. We recently saw a great discussion unfold in the Shopify Community that tackled this very thing for the popular Horizon theme. It was all about adding those eye-catching "SAVE X%" or "X% OFF" badges that dynamically update with each variant a customer selects.

The Core Problem: Dynamic Pricing Badges for Variants

Our friend SurfBark kicked off the thread, explaining they needed a dynamic sale badge on their product pages. The tricky part? Their product had four different sizes, and each size had a different price. Standard snippets weren't cutting it, and the badge needed to reflect the actual discount for the selected variant, not just a static number. This is a crucial detail, as a badge showing ‘SAVE $10’ when the selected small size only saves $5 can be confusing and misleading for customers.

Community Insights & The First Steps

The community quickly jumped in. v.marychenka, always a helpful presence, highlighted a key insight: when a variant changes, the Horizon theme’s component only replaces what’s inside its priceContainer. This means if your badge isn't placed correctly within that reactive zone, it won't update. They shared an initial code snippet that aimed to address this, suggesting placement in snippets/price.liquid.

Refining the Look: SurfBark's Follow-up

SurfBark tested v.marychenka’s initial code, and while it worked functionally, there was a visual snag. The badge container was a bit too wide, not quite the sleek, compact ‘pill badge’ look they were going for. This is where the discussion got even more practical – functionality is great, but aesthetics matter just as much for conversion!

This is a perfect example of how community discussions evolve from ‘how to make it work’ to ‘how to make it work perfectly for my brand’.

The Full Solution: Calculation, Display, and Styling

Thankfully, the Shopplaza team stepped in with a fantastic, comprehensive solution that directly addressed SurfBark’s needs, providing code tested against Horizon’s price.liquid snippet. This approach ensures the badge not only calculates correctly for variants but also looks sharp. Here’s how you can implement it:

Before You Start: Important Prep!

Before you dive into any code edits, please, please, duplicate your theme! A theme update can overwrite custom changes, and Shopify Support won't debug code from forums. Always work on a copy first. You can do this by going to your Shopify admin, then Online Store > Themes, finding your current theme, clicking Actions > Duplicate.

Step 1: Add the Savings Calculation to snippets/price.liquid

The first step is to calculate the ‘saved’ amount and percentage. This needs to happen early in the snippets/price.liquid file, specifically within the {%- liquid ... -%} block at the top. Why so early? Because at this point, price and compare_at_price are still raw integer cents, making the math accurate before they get formatted into money strings.

assign show_compare_price = false
if compare_at_price > price
  assign show_compare_price = true
endif

assign saved_amount = 0
assign saved_percent = 0
if show_compare_price
  assign saved_amount = compare_at_price | minus: price
  assign saved_percent = saved_amount | times: 100 | divided_by: compare_at_price
endif

Look for the assign show_compare_price = true line (or similar logic) and insert this code directly after it.

Step 2: Display Your Dynamic Badge

Next, we’ll display the badge. This code goes into the “Standard pricing display” section of snippets/price.liquid. It's crucial to place it inside the existing show_compare_price block, right after the inner show_sale_price_first if/else statement. This ensures it's part of the reactive custom element, meaning it automatically recalculates and updates whenever a variant is selected – no extra JavaScript needed!

{% comment %} Standard pricing display: render only the active branch (regular or sale) {% endcomment %}
{% if show_compare_price %}
  {% if show_sale_price_first %}
    
      {{ 'content.price_sale' | t }} 
      {{ price | default: ' ' }}
    
    
      {{ 'content.price_regular' | t }} 
      {{- compare_at_price -}}
    
  {% else %}
    
      {{ 'content.price_regular' | t }} 
      {{- compare_at_price -}}
    
    
      {{ 'content.price_sale' | t }} 
      {{ price | default: ' ' }}
    
  {% endif %}
  
    Save {{ saved_percent }}%
  
{% else %}
  {{ price | default: ' ' }}
{% endif %}

You'll be inserting the ... line just before the {% else %} that closes the main show_compare_price block.

Step 3: Style Your Badge (The "Pill" Look!)

Finally, to get that compact, pill-shaped badge SurfBark was looking for, you’ll add some CSS. This styling also ensures your sale price is prominent and the regular price is clearly struck through. You'll typically add this to your theme's main CSS file, often assets/base.css or assets/theme.css (the exact file might vary slightly based on your Horizon theme version). Just scroll to the bottom and add these styles:

[ref="priceContainer"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

[ref="priceContainer"] .price-item__group.price {
  color: #e8590c;
  font-weight: 700;
  font-size: 18px;
}

[ref="priceContainer"] .price-item--regular.compare-at-price {
  color: #6b6b6b;
  text-decoration: line-through;
  font-weight: 400;
  font-size: 15px;
}

.badge--savings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e8590c;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

And here’s a peek at the fantastic result you can achieve:

This discussion truly shows the power of the Shopify community. What started as a specific need for dynamic pricing badges on the Horizon theme evolved into a robust, tested solution that looks great and functions perfectly across product variants. Implementing these kinds of small but impactful customizations can significantly improve your customer's shopping experience and highlight the value you're offering. Remember, making your products stand out with clear, dynamic sale indicators is a fantastic way to boost conversions. If you're just starting your journey on this incredible platform, or looking to refine your existing store, diving into these kinds of tweaks is where the real magic happens for your Shopify store. Keep experimenting, keep learning, and don't hesitate to lean on the community for those 'aha!' moments!