How to add new product badges

If you are after adding new product badges similar to the Shopify default "Sale" and "Sold out", we've added the "New" and "Pre order" badges in theme version 1.1.8. 

For older theme versions or if you need to add different product badges:

  1. Go to the theme editor (read this article for more info)
  2. Choose  /snippets/product_badges.liquid and replace the contents of the file with the following:

    {% unless product.available %}
      <div class="product-badge sold"><span>{{ 'product.sold_out' | t }}</span></div>
    {% else %}
      {% if product.compare_at_price > product.price %}
        <div class="product-badge sale"><span>{{ 'product.on_sale' | t }}</span></div>
      {% elsif product.tags contains 'preorder' %}
        <div class="product-badge preorder"><span>Pre Order</span></div>
      {% elsif product.tags contains 'new' %}
        <div class="product-badge new"><span>New</span></div>
      {% endif %}
    {% endunless %}
  3. Change the new words after your own desire and then save the file.
  4. From this point, if you tag a product "new" or "preorder" (screenshot), you will see this badge in the grid.

In case you need more product badges you can simply add new conditions in the code  (make sure to insert the code before the {% endif %} ):

{% elsif product.tags contains 'more options' %}
   <div class="product-badge more options"><span>More options</span></div>

Please see this screenshot if it might help. 


  1. "Sold out" badges will appear automatically if a product has the inventory at 0.
  2. "Sale" will appear automatically when using the "compare at price" option for a product page (please make sure that the old price has a higher value).
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.