Creating a Coming Soon Badge in Shopify

I didn’t want anything fancy, And I didn’t want to pay a monthly fee for something that I am going to use once or twice. So this is some quick code that will be displayed on the collections page.

So get into your product-grid-item.liquid file and where it says:

{% if sold_out and settings.collections_show_sold_out_circle %}
     <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}

We are going to make it look like this: 

{% if sold_out and settings.collections_show_sold_out_circle %}
      {% if product.tags contains 'coming soon' %}
      <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">Coming Soon</span>
        </span>
      {% else %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      {% endif %}

This new added if statement will check wether the item is sold out and if it has the “coming soon” tag. So you won’t people to be able to order the said product and then it will show up as coming soon on the category page as shown above. For whatever product you want this to show up as, you tag the product with “coming soon” 


Posted

in

by

Tags: