Back In Stock Button & Popup on Shopify Collection Pages

  • 8 April 2021
  • 6 replies


Hello! Is it possible to get the Back in Stock button to trigger on a Shopify collection page in addition to the product page? I’ve played around with it a little bit with no luck – I’m guessing a function within onsite.js would need to be modified, but wondering if anyone has experience with doing this before attempting anything.





Best answer by Scott 8 April 2021, 16:47

View original

6 replies

Userlevel 1

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.

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">

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.





@Scott Thank you very much for the quick response and solution – it’s working perfectly now!


I do have a follow-up question: This might be due to the theme we have, but the “Notify Me” button only initializes if the product variant that is out of stock is selected when the page first loads – i.e. if an in-stock variant is the first one viewed, the “Notify Me” button won’t appear when clicking to an out-of-stock variant. Is it possible to have the button initialize when selecting an out-of-stock variant without having to reload the page?



Userlevel 2
Badge +1

Hi @chrisnichols 


I would definitely suggest reaching out to Shopify as this sounds like it could be related to your theme. To start the trouble shooting process, I’m including this doc on styling back in stock for free Shopify themes. I’m not sure if you’re using a free theme, but this could help! I would also review the trigger settings to ensure these are set up correctly. That doc also includes this troubleshooting guide


I hope this helps!



@marissanunez Thank you for the response – I have previously looked over the links you provided and I wasn’t able to find anything that would solve the issue. I believe it is related to my theme as well, so I may need to reach out to a developer for further customization.


I have followed this step but it is not showing on collection page

Userlevel 6
Badge +4

Hey @anjali3rde,

The suggested solution provided by @Scott, are general guidelines that may require further customization to the codes to function appropriately on your own site. Since this requires custom work on your site, we would recommend reaching out to the theme developer of your Shopify site, a developer you are familiar with, or one of the many Klaviyo Partners who are well versed in Klaviyo.

Thanks for being a part of the Klaviyo Community! Have a great day!