Skip to main content
Solved

Shopify theme back in stock button disappears


Forum|alt.badge.img
  • Contributor I
  • 1 reply

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

Best answer by Mich expert

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

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Mich expert
Problem Solver IV
Forum|alt.badge.img+11
  • Problem Solver IV
  • 64 replies
  • Answer
  • January 29, 2025

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


Forum|alt.badge.img
  • Author
  • Contributor I
  • 1 reply
  • January 29, 2025
Amos Peace wrote:

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? 


Mich expert
Problem Solver IV
Forum|alt.badge.img+11
  • Problem Solver IV
  • 64 replies
  • January 29, 2025

yes of course