Klaviyo's Back In Stock Flow is highly favored among Shopify stores. However, the support provided by Klaviyo is limited to free Shopify themes only. This means that if any functionality issues arise, as I encountered, resolving them becomes a challenge.
The problem surfaced after updating the Pipeline theme to its latest version, which introduced changes to the product form structure. Klaviyo's JavaScript failed to detect when a user switched between variants on the product page, resulting in incorrect display and hiding of the back in stock button.
Although both Pipeline and Klaviyo's support teams were cooperative, it became evident that resolving this issue wasn't within their scope. This was disappointing because ideally, I prefer not to modify or customise a theme's core logic, especially concerning third-party integrations like Klaviyo. This is because such modifications complicate theme updates, and third-party integrations can alter their setup at any time, potentially breaking customisations.
Given the significance of Klaviyo's functionality, we needed to make it work. Consequently, I meticulously documented the customisations made to ensure informed updates in the future.
The fix varies depending on the theme, and there are undoubtedly multiple approaches to achieve it. However, I hope this explanation aids some individuals or guides them in the right direction.
Initially, rather than relying on Klaviyo's automatic placement of the back in stock button, I had to manually add the button HTML:
product-buttons.liquid
<a id="klaviyo-bis-trigger" class="btn klaviyo-bis-trigger {% if product.selected_or_first_available_variant.inventory_management == nil %}inventory-not-tracked{% endif %}" style="display:none;" href="#">Notify Me When Available</a>
I added an id so I could easily target the button in the JavaSript
theme.dev.js
if (addToCartText?.length) {
addToCartText.forEach((element) => {
if (variant) {
if (variant.available) {
element.innerHTML = addText;
document.getElementById('klaviyo-bis-trigger').style.display = 'none';
} else {
element.innerHTML = theme.strings.soldOut;
document.getElementById('klaviyo-bis-trigger').style.display = 'flex';
}
} else {
element.innerHTML = theme.strings.unavailable;
}
});
}
I found a bug whereby Klaivyo's JavaScript was displaying the back in stock button where the inventory for a product wasn't being tracked. I needed to use some CSS to resolve this and so this is why you see the conditional class in the button trigger above which allowed me to hide the button with CSS:
#klaviyo-bis-trigger.inventory-not-tracked {
display:none !important;
}
If you have the same issue either in Pipeline or a different theme then get in touch if you'd like me to resolve it for you.