Mastering Sale Badges on Shopify Horizon & Tinker Themes: An OS 2.0 Customization Guide

Hey store owners!

As a Shopify migration expert at Shopping Cart Mover, I've seen countless businesses make the smart move to Shopify, and increasingly, to its cutting-edge OS 2.0 themes like Horizon and Tinker. These themes offer unparalleled flexibility and performance, but sometimes, the transition isn't entirely seamless, especially when it comes to replicating beloved customizations from older themes like Dawn.

A common hurdle, perfectly illustrated by a recent query from @shimul508 in the Shopify Community, involves the elusive sale badge. Shimul wanted their dynamic sale badge – the one proudly announcing "20% OFF" or "Save ৳251" – to appear on product pages in their new Horizon theme. While it worked flawlessly on Dawn and even on collection pages in Horizon, the product page remained stubbornly blank. This isn't just a minor aesthetic issue; prominent sale badges are crucial for driving conversions and highlighting value. Let's dive into why this happens and, more importantly, how to fix it.

The OS 2.0 Theme Shift: Why Your Old Code Doesn't Fit

The primary reason Shimul's old solution for the product page wasn't working is a fundamental architectural shift in Shopify's OS 2.0 themes. Older themes, like Dawn (often referred to as OS 1.0 themes), relied heavily on a more traditional file structure with many `snippets` that were directly included into larger layout files. You might remember finding price-related logic in a file like snippets/price.liquid.

In contrast, OS 2.0 themes are built around a modular system of Sections and Blocks. This architecture empowers merchants with incredible drag-and-drop customization capabilities directly within the Theme Customizer. However, it also means that the old file paths and the way Liquid objects are rendered have changed significantly. Many core components, especially on the product page, are now encapsulated within `sections` files (e.g., sections/main-product.liquid) which then utilize `blocks` to render specific elements like the product title, price, or description.

Shimul correctly observed that the sale badge worked on the collection page. This is likely because the collection card (often handled by `snippets/card-product.liquid` or a similar structure) might still be using a more direct Liquid inclusion, or its rendering logic is simpler and less encapsulated than the complex product page. The product page, being a central conversion point, has been re-engineered for greater flexibility, hence the difficulty in locating the exact spot for the old `snippets/price.liquid` logic.

Locating the Price Rendering Logic in Horizon & Tinker Themes

The challenge with OS 2.0 themes is not that the functionality is gone, but that its location and implementation have evolved. Here's how to approach finding the right place to insert your custom sale badge code:

Step-by-Step: Finding and Customizing Your Sale Badge

Before making any changes, always duplicate your theme. This creates a backup, allowing you to revert if anything goes wrong.

1. Access Your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your Horizon or Tinker theme, click Actions > Edit code.
2. Identify the Main Product Section:
   • In the theme code editor, navigate to the sections/ folder.
   • The primary file for the product page content is usually main-product.liquid. This file orchestrates all the blocks that make up your product page.
3. Locate Price Rendering Logic:
   • Open main-product.liquid.
   • Search within this file for keywords like price, product.price, compare_at_price, or on_sale.
   • You're looking for the Liquid code that renders the product's price. In OS 2.0 themes, this is often handled by a specific {% render 'price' with product %} snippet or a block that includes price logic.
   • If you find a price snippet being rendered, open snippets/price.liquid (if it exists) or the relevant block file (e.g., in blocks/) that contains the price display. The goal is to find where {{ product.price | money }} or similar is output.

4. Insert Your Custom Sale Badge Code:

   Once you've located the price rendering area, you can insert your desired Liquid code. The key is to place it adjacent to or as a replacement for any default "On Sale" text. Here are the proven code snippets:

   Option 1: Display Discount Percentage (% OFF)

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

   Option 2: Display Saved Amount

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

   Pro Tip: Wrap your badge in a with unique classes (like product__badge--sale) to easily style it with CSS later, matching your theme's aesthetics.

5. Save and Test Thoroughly:

   • Save your changes.
   • Visit your product pages on the live store (or theme preview).
   • Test products that are on sale and products that are not on sale to ensure the badge appears correctly only when applicable.
   • Check on different devices (desktop, mobile) to ensure responsiveness.

The reason Shimul's collection page code worked (`card_product`) and the product page code (`product`) is similar, is because the underlying Liquid objects (`card_product` and `product`) share similar properties like `compare_at_price` and `price`. The challenge was purely in finding the correct file location in the new OS 2.0 theme structure.

The code dynamically checks if `compare_at_price` is greater than `price`. If it is, it calculates either the percentage difference or the absolute saved amount and displays it. This ensures your badge only appears when a product is genuinely on sale.

Best Practices for OS 2.0 Customizations

• Leverage Theme Settings First: Always check if your theme offers a built-in option for sale badges in the Theme Customizer before diving into code.
• Understand Block Structure: For more complex customizations, consider creating custom blocks or even custom sections that can be managed directly from the theme editor, making updates easier.
• Document Your Changes: Keep a record of all code modifications, including the file name, line number, and the purpose of the change. This is invaluable for debugging and future theme updates.
• Test After Theme Updates: Shopify themes receive updates. Always re-test your customizations after applying a theme update to ensure they haven't been overwritten or broken.

Dynamic sale badges are powerful conversion tools. They create urgency, highlight value, and can significantly impact a customer's purchasing decision. By understanding the architectural nuances of Shopify's OS 2.0 themes, you can confidently implement these crucial elements and ensure your store is always performing at its best.

If you're facing complex migrations or need assistance with advanced Shopify theme development, don't hesitate to reach out to the experts at Shopping Cart Mover. We're here to ensure your e-commerce journey is smooth and successful.