Navigating Sale Badges on Shopify's Horizon & Tinker Themes: A Migration Guide
Hey store owners!
Lately, I've noticed a recurring theme in the Shopify Community, especially from those of you bravely migrating to the shiny new OS 2.0 themes like Horizon and Tinker. It's awesome to embrace the latest and greatest, but sometimes, those little customizations we loved so much on older themes, like Dawn, don't quite translate directly. That's exactly what our friend @shimul508 ran into recently, and it's a common hurdle.
Shimul was trying to get their beloved sale badge – you know, the one that shouts "20% OFF" or "Save ৳251" – to show up on product pages in their new Horizon theme. It worked perfectly on Dawn, even on their collection pages in Horizon, but the product page was stubbornly blank. This is where the community, including helpful folks like @topnewyork and @devcoders, often starts by asking for a store URL. And while that's always a good first step for debugging, sometimes the core issue is a deeper structural change in the theme itself. Let's dive into why this happens and how we can fix it.
The OS 2.0 Theme Shift: Why Your Old Code Doesn't Fit
The biggest reason Shimul's old solution for the product page wasn't working is because Shopify's OS 2.0 themes (like Horizon and Tinker) have a fundamentally different architecture compared to older themes like Dawn. Remember how on Dawn, you'd often find price-related logic in a file like snippets/price.liquid?
Well, in OS 2.0 themes, snippets are still around, but many core components, especially on the product page, are now built using "sections" and "blocks." This modular approach gives us incredible flexibility through the Theme Customizer, but it means the old file paths and logic might not exist anymore. Shimul correctly pointed out, "I cannot find snippets/price.liquid in Horizon — the file structure is completely different from Dawn." And they're spot on!
Finding Your Price Badge Home in Horizon/Tinker
So, if snippets/price.liquid is gone, where do we put our custom sale badge logic for the product page?
The product page content is typically controlled by a section file, most commonly sections/main-product.liquid. Within this main section, different parts of the product information – like the title, description, and crucially, the price – are often rendered as "blocks." These blocks can be moved around and configured directly in the Theme Customizer.
To find the exact spot for your sale badge, you'll need to:
- Access Your Theme Code: Go to your Shopify admin, navigate to Online Store > Themes. Find your Horizon or Tinker theme, click Actions > Edit code.
- Locate the Main Product Section: In the theme editor, look under the
Sectionsfolder and openmain-product.liquid. This is usually the primary file for the product page layout. - Search for Price-Related Logic: Inside
main-product.liquid, or any files it includes, search for phrases likeproduct.price,product.compare_at_price, or even the translation key'products.product.on_sale'. The goal is to find where the current price and compare-at-price are displayed. - Identify the Price Block (if applicable): Often, the price will be rendered by a dedicated block within
main-product.liquid. You might see something like{% render 'price' with product %}or a block definition like{%- when 'price' -%}. If it's a block, you might need to dig into a file likeblocks/product-price.liquidor a similar name, or modify the logic directly within themain-product.liquidwhere the price block is defined.
Shimul mentioned they had success with the collection page badge using the old snippets/card-product.liquid approach. This makes sense because collection cards often have a more consistent structure across themes. The product page, however, is where OS 2.0 themes really show off their block architecture.
Implementing Your Dynamic Sale Badge
Once you've pinpointed the exact location where the product's price is displayed (likely within main-product.liquid or a block it renders), you can insert the custom Liquid logic Shimul shared. Remember to always make a duplicate of your theme before making any code changes!
Option 1: Displaying Discount Percentage
You'll want to find the line where the price is rendered and look for the existing 'on sale' text. If you find something like {{- 'products.product.on_sale' | t -}}, you can replace it with this:
{%- if product.compare_at_price > product.price -%}
{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round }}% OFF
{%- endif -%}
I've added a wrapper here. You might need to adjust the class names (badge, badge--sale) to match your theme's existing styling for sale badges, or add custom CSS in assets/base.css or assets/theme.css to style it the way you want.
Option 2: Displaying Saved Amount
Alternatively, if you prefer to show the actual amount saved, you can use this code:
{%- if product.compare_at_price > product.price -%}
{%- assign save_amount = product.compare_at_price | minus: product.price -%}
Save {{ save_amount | money_without_trailing_zeros }}
{%- endif -%}
Again, adjust the class as needed for styling. The money_without_trailing_zeros filter is super handy for keeping your currency display clean!
The key here is understanding that while the file names and locations have shifted, the underlying Liquid logic for calculating discounts remains the same. It's all about placing that logic in the correct new home within the OS 2.0 theme structure. Remember, always test your changes thoroughly after saving!
Keeping Your Theme Future-Proof (Sort Of)
Shimul also asked about a recommended way to do this "without breaking theme updates." This is the million-dollar question for any custom code. The truth is, any direct modification to your theme's Liquid files carries a risk when you update the theme to a newer version. Shopify theme updates often overwrite core files, which means your custom code could be lost or cause conflicts.
The best practice for truly future-proof customizations is to build them into Theme App Extensions. However, for a relatively small Liquid change like this, many store owners opt for direct theme modifications and simply keep meticulous records. If you do update your theme, you'll need to re-apply these changes carefully. For more complex needs, or if you're uncomfortable with code, a Shopify Expert or a dedicated app might be a better route. But for a quick fix like this, knowing where to drop your Liquid code is incredibly empowering! 
Hopefully, this breakdown helps clarify the differences in theme structure and empowers you to get those eye-catching sale badges back on your product pages. Happy customizing!