Adding back-in-stock to Shopify collection page

In order to add back-in-stock to Shopify collection page, you need to use custom triggers and modify theme code. Below we will guide you through the setup.

Install Back In Stock

First, ensure that you've already install back-in-stock to your Shopify store.

Adding Snippet

Locate collection product file from Shopify:

• product-grid-item.liquid
• product-card.liquid
• product-card-grid.liquid

Keep in mind that collection product file can have many different names but the ones above are the most common ones.

Search for an element with this code: </a>

If you see multiple instances, try to identify the one that represents product link. The gist is that we'll be placing back-in-stock trigger right after product link.

Paste the following snippet after that element.

<!-- BackInStock Custom Trigger -->
{% if product.available != 1 and product.available != true %}
<div class="ov-bis-notify" style="margin-top: 5px; margin-bottom: 15px;">
  <a href="#" 
     class="ov-bis-trigger" 
     data-shopify-product="{{ product | json | escape }}" 
     style="font-size: 13px; color: #6d7390;"
  >
   Notify me when available
  </a>
</div>
{% endif %}
<!-- BackInStock Custom Trigger -->

What this snippet does is that it will display a back-in-stock trigger link if collection product is not available. Keep point to note is that we're using data attribute to pass Shopify product data: data-shopify-product="{{ product | json | escape }}" 

Need help installing?

If you need additional help to install, you can contact us.