Adding Custom Product Badge to Crave Theme

Store Design
, ,

Topic summary

A user is attempting to add a custom “PREORDER” badge to products in the Crave theme, similar to the existing “SALE” badge. The badge appears in the HTML but doesn’t display visually on the product collection page.

Initial troubleshooting:

  • Code snippet shared shows conditional logic for displaying badges based on product tags
  • Generic tutorial links provided but didn’t address the specific issue

Solution identified:

  • The code logic was correct, but implementation had issues
  • Key requirements confirmed: Products must be tagged with “PREORDER”
  • Different themes use different object variables (card_product vs product vs product_item)
  • A code modification around line 49 was needed (referenced via screenshot)

Resolution:
The issue was resolved after implementing the suggested code changes. The specific missing code element wasn’t initially noticed by the original poster.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to add a custom badge to display “PREORDER” same as “SALE” and see it coming through in the HTML, but it’s not actually displaying. Any ideas on what I’m missing? Thanks!

Page is here: https://shanacleveland.com/collections/music

Code I’m using:

<div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- elsif card_product.tags contains 'PREORDER' -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.preorder' | t -}}
            </span>
          {%- endif -%}
        </div>
2

@Sean_Rhorer

Please check the following URL for help!

https://www.launchtip.com/how-to-display-product-tags-on-shopify/

https://www.joeyoungblood.com/shopify-tips/how-to-add-custom-badges-to-your-shopify-products/

Thanks!

3

Appreciate the reply, but this doesn’t specifically address my use case.

4

Hello @Sean_Rhorer

The code you are using is absolutely correct, the thing is are placing the code on the correct place and the object being used in this code is same as your code in the theme file.

Like first you have to give the “PREORDER” add tag to the products https://prnt.sc/ouYv_f4WN6FH and also check if the object to get the product is same as the code card_product or is it product or product_item different themes use different variables https://prnt.sc/iIDs46_HZGVx

5

Hi @Sean_Rhorer ,

You need to change more code here, it will display fine:

Screenshot.png
Screenshot.png1576×772 59.3 KB

line 94 → 100

6

That got it for me. Not sure why I hadn’t seen that part already.

Thanks!

1 Like
7

Hi @Sean_Rhorer ,

Did you solve it?

If you have any further questions, you can contact me.
Happy to help you.