Adding Just Added Badge to Horizon

Store Design
,

Topic summary

A Shopify store owner using the Horizon theme wants to display a “JUST ADDED” badge on products tagged with just_added. Initially attempted to edit the theme code directly in product-card-badges.liquid without success.

Solution for Product Cards:

  • Add a “Custom liquid” block under “Media” in the Customizer (no theme code editing required)
  • Use Liquid code checking if product tags contain just_added
  • This approach is update-safe and worked immediately for the original poster

Additional Capabilities:

  • Multiple badges can be displayed side-by-side using conditional logic for different tags
  • CSS can be added to control badge layout (horizontal with flexbox, or vertical stacking)
  • Collections can be used as triggers instead of tags by checking collection handles

Ongoing Issue:
One user is trying to display a badge on the product page photo (not product cards) based on collection membership. The code works when placed inside the “Details Section” but only shows a blank rectangle when positioned to overlay the product photo. Debugging revealed the collection handle may differ from the collection name, and color scheme settings might affect visibility. The issue remains unresolved for the product photo overlay placement.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
2

You do not need to edit theme code and this will help with future theme updates.

With Horizon family of themes you can configure your product cards in Customizer – just add a “Custom liquid” block right under “Media” and paste this code:

{% if closest.product.tags contains "just_added" %}
  <div
    class="product-badges product-badges--top-left"
    style="--badge-border-radius: 100px;"
  >
    <span
      class="just-added product-badges__badge product-badges__badge--rectangle
      color-scheme-4"
    >
      Just added
    </span>
  </div>
{% endif %}

Screenshot 2025-08-18 at 12.18.04 AM
Screenshot 2025-08-18 at 12.18.04 AM864×425 70.2 KB

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
2 Likes
How To Show Discount/Sale Badge On Shopify (Percentage)