Unlocking Dynamic Sale Badges on Shopify's Horizon Theme: A Developer's Guide

Unlocking Dynamic Sale Badges on Shopify's Horizon Theme: A Developer's Guide

Hey fellow store owners!

One of the most effective ways to grab a customer's attention and highlight value on your product pages is a clear, eye-catching sale badge. But if you're running the sleek new Horizon theme on Shopify, you might have noticed it's not always straightforward to get those badges working dynamically, especially when you have products with multiple variants, each with its own pricing. That's exactly what our friend SurfBark ran into in a recent community discussion, asking for help to display a "SAVE $5" or "15% OFF" badge that updates with variant selection.

This challenge is super common. You want a badge that not only looks great but also intelligently reflects the correct discount, whether it's a percentage or a dollar amount, as customers switch between sizes or styles. And crucially, it needs to be a compact, modern "pill" badge, not something that stretches awkwardly across your layout.

The Shopify community, a vibrant hub for solutions, really came through with some fantastic, detailed solutions that we want to break down for you. The key, as several experts like v.marychenka and Shopplaza's Titan pointed out, lies in modifying the snippets/price.liquid file. This is where the magic happens for handling price displays, and it's the perfect spot to inject our dynamic discount logic.

Why Dynamic Badges Are a Must-Have (and a Bit Tricky)

Imagine a customer browsing your store. They see a product, click on it, and then select a different size or color. If your sale badge is static, showing a discount based on the default variant, it instantly becomes misleading if the new variant has a different price or no discount at all. This can lead to frustration, abandoned carts, and ultimately, lost sales. The Horizon theme, with its reactive custom element, is designed to update pricing dynamically, so our badge needs to play along.

A dynamically updating badge ensures:

• Accuracy: Customers always see the correct discount for the selected variant.
• Trust: Builds confidence in your pricing and promotions.
• Conversion: Clearly highlights savings, encouraging purchases.
• Seamless UX: Integrates smoothly with the theme's existing dynamic elements.

Here's a look at what SurfBark was aiming for, and what we're going to achieve:

Step-by-Step Implementation: Adding Your Dynamic Sale Badge

Before you begin, always remember to duplicate your theme. This creates a safe backup, allowing you to revert any changes if something goes wrong. Shopify Support will also not debug custom code, so having a clean backup is crucial.

1. Add the Savings Calculation

Navigate to snippets/price.liquid in your Shopify admin (Online Store > Themes > Actions > Edit code). Look for the {%- liquid ... -%} block at the top, specifically after the show_compare_price logic. This is where we'll calculate the discount percentage.

Add the following Liquid code:

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

Explanation: This code block is critical because it runs *before* price and compare_at_price are formatted into money strings. At this point, they are still raw integer cents, allowing for accurate mathematical calculations of the `saved_amount` and `saved_percent`.

2. Display the Badge

Still in snippets/price.liquid, locate the "Standard pricing display" section. You'll want to add the badge right after the inner show_sale_price_first if/else block, but still within the main show_compare_price block. This ensures the badge only appears when there's an actual comparison price (i.e., a sale).

Insert this HTML and Liquid:

{% 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 %}

Why this works: The Horizon theme uses a reactive custom element, , which re-renders this entire block whenever a variant is selected. By placing our badge directly within this block, it automatically recalculates and updates per size/variant without needing any extra JavaScript.

3. Style It

Now for the visual magic! To achieve that compact, modern "pill" badge look, you'll need to add some CSS. In your theme editor, find your main CSS file (often named base.css, theme.css, or similar, usually in the assets folder). Add the following styles:

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

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

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

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

Feel free to adjust the colors (#e8590c for sale/badge, #6b6b6b for regular price, #ffffff for badge text) and font sizes to match your brand's aesthetic. The border-radius: 999px; is what gives it that perfect pill shape.

Beyond the Badge: Optimizing Your Shopify Store

Implementing dynamic sale badges is just one way to enhance your store's user experience and drive conversions. For merchants looking to start their e-commerce journey or migrate an existing store, choosing the right platform is paramount. Starting a Shopify store provides a robust, scalable, and developer-friendly environment where customizations like these can truly shine.

At Shopping Cart Mover, we specialize in seamless migrations to Shopify, ensuring your products, customer data, and order history are transferred accurately, allowing you to focus on growing your business and implementing powerful features like these dynamic badges.

Conclusion

Adding a dynamic sale percentage badge to your Shopify Horizon theme is a powerful way to communicate value and improve the shopping experience. By carefully modifying your snippets/price.liquid file and applying custom CSS, you can create an engaging, accurate, and visually appealing discount indicator that responds intelligently to variant selections. This small customization can lead to significant improvements in customer engagement and conversion rates.

If you're considering a migration to Shopify or need expert assistance with complex theme customizations, don't hesitate to reach out to the team at Shopping Cart Mover. We're here to help you unlock your store's full potential!