Adding Just Added Badge to Horizon

[Littleonesprelo]

Hi,

I’m trying to add a new badge to my horizon theme, i want it to display a ‘JUST ADDED’ badge to new products which are tagge with just_added. However, I have tried to do this, following another thread regading the same issue of wanting to add another badge on Horizon and it hasnt worked for me, i’m not sure what i’m doing wrong. I’ve popped my original badge theme section from Snippets > product-card-badges.Liquid

Is there anything I am missing please? Thank you.

<div

class=“product-badges product-badges–{{ settings.badge_position }}”

style="

–badge-border-radius: {{ settings.badge_corner_radius }}px;

–badge-font-family: var(–font-{{ settings.badge_font_family }}–family); --badge-font-weight: var(–font-{{ settings.badge_font_family }}–weight); --badge-text-transform: {{ settings.badge_text_transform }};

"

>

{%- if product.available == false or product.compare_at_price > product.price and product.available -%}

<div

class="

product-badges__badge product-badges__badge–rectangle

{% if product.available == false %} color-{{ settings.badge_sold_out_color_scheme }}{% elsif product.compare_at_price > product.price %} color-{{ settings.badge_sale_color_scheme }}{% endif %}

"

>

{%- if product.available == false -%}

{{ ‘content.product_badge_sold_out’ | t }}

{%- elsif product.compare_at_price > product.price -%}

{{ ‘content.product_badge_sale’ | t }}

{%- endif -%}

{%- endif -%}

</div>

[tim_1]

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

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Littleonesprelo]

Wow, that is so much easier than editing code! that worked straight away! Thank you so much for your reply, I run a small business around caring for my children and little things like this help so much and I really appreciate your help. Thanks so much!

[kllmngrs]

Hi @tim_1,
Works well!
If you want to add more badge next to eachother, how so?

[tim_1]

Yes, you can output several badges, but do not overdo it – on a narrower screens product card gets smaller and badges, especially longer ones will cover too much.
Also, native theme badges may potentially conflict with these,

Technically code can be like:

{% if closest.product.tags contains "just_added" or closest.product.tags contains "other_tag"%}
  <div
    class="product-badges product-badges--top-left"
    style="--badge-border-radius: 100px;"
  >

    {% if closest.product.tags contains "just_added" %}
      <span
        class="just-added product-badges__badge product-badges__badge--rectangle
        color-scheme-4"
      >
        Just added
      </span>
    {% endif %}

    {% if closest.product.tags contains "other_tag" %}
      <span
        class="just-added product-badges__badge product-badges__badge--rectangle
        color-scheme-4"
      >
        Other label
      </span>
    {% endif %}

  </div>
{% endif %}

And then add this into “Custom CSS” of the "Theme settings:

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[lev123]

Is there a way to stack them vertically? Also, is there a way for it to automatically put in whatever product tags I update it to?

[tim_1]

They will be stacked vertically without the CSS code.
As for the second question – you need to have a list of tags to trigger this and for each tag you have to have a label.
If all your tags are used for this and you can output tags themselves, then yes, but I do not think it’s the best idea.
I’d rather recommend a “List of single line text” type metafield to use for this rather than tags.

[Jop_24]

Hi, @tim_1
Is it possible to use Collection as reference instead of a Tag? I want to display a best seller tag in the main product photo using this method. No theme code edits.

[tim_1]

Should be possible with similar code.
Something like this – using handles:

{% assign collection_handles = closest.product.collections | map: "handle" %}
{% if collection_handles contains "best-sellers" %}
  <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 %}

[Jop_24]

I can’t seem to make it work. The product is already under the Best Sellers collection. I created a Custom Liquid section and placed it above the Product Information (since I can’t add blocks under that section). I pasted the code in the Custom Liquid area, but no badge shows up on the product photo. Did I miss something?

[tim_1]

Yes, that code was for product card in collection grid, using theme blocks .
That’s why the notation like closest.product
If you’re using section on the product page, then you should amend code like this:

{% assign collection_handles = product.collections | map: "handle" %}
{% if collection_handles contains "best-sellers" %}
  <div . . .

However, also keep in mind that if your theme is different, the classes used there may not match the ones used in solution above, so you may end up with just unstyled text.

[Jop_24]

I changed it to product.collections but still not working Im using Horizon theme ver 3.0.0

[tim_1]

Well, let’s debug!

{% assign collection_handles = product.collections | map: "handle" %}
Collection_handles: {{ collection_handles | json }}
...

[Jop_24]

Not sure If I understand the code edits right but here’s what happened.

[tim_1]

Yes, this is exactly what I wanted – these are the handles of collections this product belongs to.
So none of them is “best-sellers”, condition is false, no badge.
If you want to check against one of those, you need to modify the
{% if collection_handles contains "XXX" %} line.

[Jop_24]

Weird that “Best Sellers” isn’t showing up. I double-checked, and the product is definitely under that collection.

I tried using “frontpage” for now just to test if it would work, but it only displayed a blank rectangle on the edge of the photo.

[tim_1]

Couple of comments:

1. Make sure what your collection handle is. Collection may have been created as Frontpage" and then renamed to “Best sellers”, but the handle stays the same “frontpage”
2. You can add “Custom liquid” block to “Details section”, it’s just not shown initially – either click “Show all” at the bottom or start typing "Custom " and it will popup.
3. If it’s a custom liquid block, both codes will produce the same result on product page:

{% assign collection_handles = closest.product.collections | map: "handle" %}
{% assign collection_handles = product.collections | map: "handle" %}

4. Finally – check the color scheme 4 – maybe it’s white text on transparent?

Say, in my test store this code in “Custom liquid” block:

{% assign collection_handles = closest.product.collections | map: "handle" %}
{% if collection_handles contains "all" %}
  <div
    class="product-badges"
    style="--badge-border-radius: 100px; margin: -1rem 0 1rem;"
  >
    <span
      class="just-added product-badges__badge product-badges__badge--rectangle
      color-scheme-4"
    >
      Just added
    </span>
  </div>
{% endif %}

produces this result:

[Jop_24]

1. Handle might have stayed the same. Will be using “frontpage”
2. I added “Custom Liquid” block under “Details Section” and the code provided and also the previous codes worked. However, it will only display blank rectangle when I use the same code and place the “Custom Liquid” outside the “Product Information” block to display the badge on top of the product photo.
3. Confirmed, same results
4. Scheme 4 is not white and transparent. I tried changing the scheme to a known, more dark colors, but the badge on the product photo stays blank.