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: c"/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

@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?

Chris

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!

Marissa

@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

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!

David 

Hello- I am having a similar issue with my Klaviyo Back in Stock button on my shopify site. Set it up per this link (this doc on styling back in stock for free Shopify themes). It works perfectly in terms of showing up on the correct products (so its showing up for every product that is OOS), but it doesnt show up automatically when i click onto a product page- I have to reload the page for it to appear (this is the case for both mobile and desktop viewing)

Any help here would be super appreciated!

-Tabitha

Hey @Tabitha.sullivan,

Glad to hear you’re most of the way there to setting up the Back in Stock functionality! 

The behavior you’re describe sounds very familiar to the ones described in the following Community threads:

The behavior of requiring the page to be reloaded prior to having the back in stock appear can oftentimes be caused by the back in stock code not registering the variant ID. This is something you’ll want to investigate with your theme developer or site developer to look into and resolve. 

I’ve also seen small instances where users were utilizing our Back in Stock Styling Code Snippets for Free Shopify Themes guide in tandem with a custom theme which may cause some minor misalignments. If you haven’t already, I would also suggest taking a look at the How to Install Back in Stock for Shopify Help center article which is a more comprehensive guide on implementing Klaviyo’s Back in Stock function. 

David

@Scott @David To Thanks for this code snippet. It gets me most of the way to how we want this BIS functionality to work on our collections pages.

Couple questions:

1. Is there any documentation about the collection triggers? I didn’t see any in the help center or the dev docs. Would love to see all the options we can use.
2. Is there anyway we can make this function like the product page BIS button? on our collection pages, we have the “Add to Cart” buttons available. I would like the BIS button to appear here when OoS. Right now it just appears when you mouses over the product card. 
3. Is there any way to add additional styling to the button? It looks like the button has inline styles added when it is injected into the page.

Hey @ddasari-jk,

To answer your questions:

1. Because triggering a back in stock event on a collection page entails a custom solution, Klaviyo does not have any formalized documentation on such a set up. 
2. In terms of mimicking the behavior found on a product page for how the back in stock button appears, I would strongly suggest working with your developer to mimic and incorporate this. However, I don’t see why this functionality wouldn’t be possible provided that the guidelines for triggering the back in stock functionality are being followed. 
3. As detailed in the Customizing Your Form & Button subsection of the How to Install Back in Stock for Shopify Help Center article, the back in stock button is highly customizable! You can edit the code however you want with your desired styles to customize the button. The style used for our back in stock functionality also isn’t using any inline styling but rather controlled by the code snippet directly. 

If you’re in need of a developer for more assistance, we highly recommend reaching to some of our amazing Klaviyo Partners! You can find one that suits your needs from our Klaviyo Partner Directory. 

David

@Scott @David Is there a way to reInit this function after the page has been loaded? Our collection pages are updated (without a refresh) if the collection is filtered or sorted. The Waitlist buttons are not appearing when the page is updated. 

I created a function to call klaviyo.init & klaviyo.enable again when the page is updated. It appears to work as I see the following in the console:

/Klaviyo / Onsite] Executing: init

/Klaviyo / Onsite] Executing: enable

But the buttons do not appear. Any ideas?