Skip to main content

Hi,

 

I have implemented the Klaviyo Back in Stock snippet on multiple Shopify themes using the guide.

 

There's a bug when changing variants - the button disappears because JavaScript replaces parts of the page differently than in Shopify’s Dawn theme.

 

One solution is to reload the page after switching variants, however that’s not the best user experience. 

 

Most themes have events you can listen to, so if I could use something like `klaviyo.refresh()`, that would be great. I tried to put initialization code in a function and rerun it, but that did not work.

 

Does the script provide a way to rerun the Back in Stock initialization?

 

I hope you have some ideas.

 

Thank you!

 

Wiebe

Hi ​@Wiebe ,

Yes, the Klaviyo Back in Stock (BIS) script does not have a built-in klaviyo.refresh() function, but you can manually reinitialize it when a variant changes.

Try adding this script to your theme:

 

javascript

CopyEdit

document.addEventListener('variant:change', () => { if (window._klaviyo) { _klaviyo.init(); // Reinitialize Klaviyo BIS } });

If your theme doesn’t use variant:change, you can use a MutationObserver instead:

 

javascript

CopyEdit

const observer = new MutationObserver(() => { setTimeout(() => { if (window._klaviyo) { _klaviyo.init(); } }, 500); }); observer.observe(document.body, { childList: true, subtree: true });

This will ensure that the Back in Stock button updates without requiring a full page reload.

Let me know if you need further assistance! or i should help you out

Best regards,
Michael

Hello ​@Wiebe,

Yes, Klaviyo’s Back in Stock (BIS) script does not provide a built-in klaviyo.refresh() function, but you can manually reinitialize it when the variant changes.

You can fix the disappearing Klaviyo Back in Stock button by reinitializing Klaviyo when a variant changes.

Add this script to your theme:

document.addEventListener('variant:change', () => {    if (window._klaviyo) {        _klaviyo.init(); // Reinitialize Klaviyo BIS    }});

If your theme doesn’t use variant:change, use this instead:

 

const observer = new MutationObserver(() => {
    setTimeout(() => {
        if (window._klaviyo) {
            _klaviyo.init();
        }
    }, 500);
});

observer.observe(document.body, { childList: true, subtree: true });
 

This ensures the button updates without a page reload. 

 

I hope you can find this helful.

 

Best Regards,



Ah, `init()` it is. It does not work for me though. Could I send you my website link? 

yes of course

Reply


Terms & Conditions

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy |
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.