How to add new product badges

By default, the theme includes 4 product badges: sold out, sale, new and preorder. 

To add any other product badge text, please open  /snippets/product_badges.liquid file and add a new condition in the code -  screenshot:

{% elsif product.tags contains 'more options' %}
   <div class="product-badge right new text-size--smaller"><span>more options</span></div>

Note: please make sure to insert the code before the {% endif %}.

Then just add your tag for the product where you need the new badge. Both the tag and the text you are using in the code needs to match perfectly. 

For vintage themes:

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. 

Note: 

  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.