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.

Initialize App in Theme

Customize your current theme and locate App Intialize for Back In Stock app from app embeds section. Then turn it on. This will load back-in-stock scripts needed for collection pages.

Edit Theme File

Edit Shopify theme file and locate collection product file:

• 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.