Hi @forman,
Thank you for sharing your question with the Klaviyo Community.
First, can you confirm if “Notify me when available” is displaying for other items or if the issue is limited to this particular product page? If you notice that “Notify me when available” is displaying for other items, check to see if you have “exclude on tags” on this specific product page. The presence of this tag would preclude the ability to display an out of stock item for this particular page.
Also, Klaviyo will not show the back in stock button for items where you have selected the option "Allow customers to purchase this product when it's out of stock." Including display_on_policy_continue: true in your code, will ensure that the back in stock button is displayed regardless. If you have this option selected, shoppers will see both a "Add to Cart" and a "Notify Me When Back in Stock" button. Please note that this function is only compatible with Shopify stores created before December 5th, 2017.
I would also check the Add to Cart button. The Add to Cart form needs to be present on the product page in order for the Klaviyo Out of Stock code to work. Some themes may remove these by default when there is no stock. To check if this is there, you can use the following snippet inside of the javascript console:
document.querySelector('formoaction="/cart/add"]')
If it returns null, that means there is no form. And you would need to add a form element like:
<form action="/cart/add"...></form>
Also, we currently only support free Shopify themes. You can see the basic free themes that we support listed here: https://help.klaviyo.com/hc/en-us/articles/360001894192.
If you are using a custom Shopify theme and are still having difficulty after following the above steps, you can completely forego Klaviyo's back-in-stock feature by building your own email collection form and then making a request to Klaviyo's back-in-stock client-side endpoint. All you need to do is capture an email address and then use the variant and product IDs. This will record a Subscribed to Back in Stock event exactly as our existing feature would work. Here's an example request template:
$.ajax({
type: "POST",
url: "https://a.klaviyo.com/onsite/components/back-in-stock/subscribe",
data: {
a: "ACCOUNT_ID",
email: "EMAIL",
variant: VARIANT_ID,
product: PRODUCT_ID, // Product must be present in Klaviyo catalog to record event.
platform: "shopify",
subscribe_for_newsletter: false, // Optional with "g". Defaults to false if omitted.
g: "LIST_ID", // Optional with "subscribe_for_newsletter".
},
success: function(response){
console.log(response)
}
})
This does require building a custom solution, but also provides total control over the user experience. You can also reference our API guide for more information:
https://help.klaviyo.com/hc/en-us/articles/360006565332-Back-in-Stock-for-Mobile-App-Developers.
Thanks and have a great day.