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.
Thanks,
Chris
Hi
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
+2
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
+6
Hi
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
+2
+2
I have followed this step but it is not showing on collection page
+60
Hey
The suggested solution provided by
Thanks for being a part of the Klaviyo Community! Have a great day!
David
+1
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
+60
Hey
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
+1
Couple questions:
+60
Hey
To answer your questions:
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
+1
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?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
