Back In Stock Button & Popup on Shopify Collection Pages

Hi @chrisnichols 

While Klaviyo’s BIS feature was not optimized for collections pages, it is possible with some customization to your theme. Please note, the feature is also only guaranteed to work for the default, free Shopify themes so if you’re using a custom theme it may require further development work to get this working.

To enable the feature on collections pages you’ll need to update the snippet in your theme.liquid file. Make sure you include any partial paths to collection pages where you want Klaviyo’s onsite code to add the trigger/button.

klaviyo.init({     
      account: "{ACCOUINT_ID}",
      platform: "shopify",
      collection_urls: ["/collections/"]   
 });

Additionally, you can update the trigger settings to style the collection BIS button separately from that on a product page.

trigger: {    
  collection_page_class: 'btn',    
  collection_page_text_align: 'center',    
  collection_page_width: '200px',    
  collection_page_text: 'Notify Me When Available',    
  collection_page_padding: 'inherit',    
}

Finally, you’ll need to add an element to each item in the product grid on your collection page. Some common theme file locations are: product-grid-item.liquid, product-card-grid.liquid. Klaviyo’s BIS functionality will use this element to inject the “Notify Me” button on out-of-stock items.

<div class='klaviyo-product-container' id='klaviyo-data-handle-{{ product.handle }}' data-klaviyo-handle='{{ product.handle }}'>
  <div class="klaviyo-button-container">
  </div>
</div>

You’ll want to conditionally add this element to each item in the product grid depending on whether it’s available. This can be done a number of ways and is theme dependent but the most common is to utilize the product.available property.

If set up properly the collection page “Notify Me” button will appear as you mouse over an out-of-stock product item. And when clicked the modal will appear as expected. Unfortunately, this functionality does require quite a bit of customization depending on your theme but it can be done. Hopefully this will point you in the right direction.

Best,

Scott