@TOMWOLFE may we ask what Shopify theme you are using?  While it is difficult to solve this without opening the product page directly and interacting with it,  could you perhaps share what you see in the javascript console:

1.  upon first opening a product page
2.  when you switch to a variant that is out of stock
3.  when you switch to a variant that is available

Klaviyo will be printing the variant ids.  Please indicate if they reflect the ID of the variant selected.

Could it be that the Back in Stock widgets are always one step behind the real situation?

If so we might have a solution that may require adding additional Javascript to your theme

Thanks for the reply!

The variant selected doesn't change from what it was set to on page load, here it's 37597785981081 - which is the variant that is sold out, if you change it in the dropdown while looking at the log here in the console, it doesn't change, so that's why it's not updating the button.

@TOMWOLFE thanks for the reply.  So you are saying that the page only displays “Selected Variant” once when the page is loaded and that it doesnt print anything new when you keep changing variants?

So after page loads, change to a different variant and then to another different variant, no new output from Klaviyo?

This would be an indication that the Backbone JS application is not recognizing the variant changes  

I have a similar issue, however my URL does change when a variant is clicked.  The klaviyo back in stock signup popups up pre-selected to the default variant but does not update when the variant is changed even though the URL changes also.

Product Page URL: https://bleusalt.com/products/the-turtleneck (or look for an item in which a color/size combo is out of stock.

@klaviyojad is there a solution to get Klaviyo to trigger when variants are changed?

@Nicholas you are asking a generic question.  This functionality works for basic shopify themes.  You would need to work with a Klaviyo Product Expert to investigate product pages for your store to make any determination.  For that you would need to file a support ticket.

I am just asking if there is a solution to the problem asked in this thread?

Hello,

I’m also having this issue – I’ve published the changes to be live but for some reason the BIS button only works in incognito browsers and not my regular browser. My client says its not showing up for her either. I’ve followed the exact instructions laid out in the guides so I’m not sure what else to do. I’m using the Maker theme on Shopify

Here’s a link to one of my products that is out of stock: https://thelafacialist.com/products/furtuna-skin-rinascita-delle-olive-replenishing-balm

Here’s a screenshot of the code in the theme.liquid – am I needed additional code in another section?

PLZ HELP

Thank you,

KB

@kbromz could you please work with support as outlined here ?

For the protection of our customers we do not allow exposing of customer related details like product page links.

As for your example I could not reproduce what you were seeing and I was using the Chrome browser

@TOMWOLFE @Nicholas @kbromz 

I think I had the same issue, with the Turbo theme from Out of the Sandbox. The button does not automatically show/hide when you switch variants or colors on products, requiring a hard refresh of the page. Another thing I noticed is with multiple out-of-stock products, the modal includes a dropdown for all the products, I don't think there is an easy way to auto select the variant, but I don’t think we can change this behavior without help from Klaviyo.

To show hide products when you switch variants, you’ll need to make changes to assets / sections.js.liquid. look for the following lines of code:

$('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').find('span').text($('.add_to_cart', $product).data('label'));
$('.shopify-payment-button', $product).show();

$('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').find('span').text(message);
$('.shopify-payment-button', $product).hide();

And add the following to show / hide the Klaviyo modal trigger button, with the “klaviyo-bis-trigger” class:

$('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').find('span').text($('.add_to_cart', $product).data('label'));
$('.klaviyo-bis-trigger').hide();
$('.shopify-payment-button', $product).show();

$('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').find('span').text(message);
$('.klaviyo-bis-trigger').show();
$('.shopify-payment-button', $product).hide();

I hope this helps everyone.

Just in case someone else has the issue with not seeing the “Notify Me  When Available” button in Chrome Browser and are using the DuckDuckGo plugin.

I had the same issue in Chrome Browser where the “Notify Me When Available” button was only seen in Incognito mode. Turns out to be an issue with DuckDuckGo plugin with site privacy enabled. Once I turned off site privacy to my store in DuckDuckGo setting, the button appeared and is working. 

$('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').find('span').text($('.add_to_cart', $product).data('label'));
$('.shopify-payment-button', $product).show();

$('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').find('span').text(message);
$('.shopify-payment-button', $product).hide();

$('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').find('span').text($('.add_to_cart', $product).data('label'));
$('.klaviyo-bis-trigger').hide();
$('.shopify-payment-button', $product).show();

$('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').find('span').text(message);
$('.klaviyo-bis-trigger').show();
$('.shopify-payment-button', $product).hide();

This seems to have worked perfectly in my Turbo Theme. Thanks so much Scott, life saver!

Hi, I'm experiencing the same issue while using the Prestige theme on Shopify. Is there a solution available for my theme as well?

It seems that the back-in-stock button problem is back.

We have the same problem on Focal, also from Maestroo (same software house of Prestige theme) the Klaviyo Javascript it no longer works since the last update.

The cause is this:

• Shopify on 15 of sempeter has updated/changed the way it handles product variants;
• Latest theme update from Maestroo (Impact, Focal, Prestige themes) adapts to this Shopify change; 
• Klaviyo's javascript no longer works fine. It only works if a product is 100% sold out but there are some variants available and some are not, in this case the script is not loading when a sold out variant is selected).

Contacting Klaviyo support they say the problem is with the theme. Contacting Maestroo support they say the problem is Klaviyo's script. In fact, testing the script on the Dawn theme (latest version) works fine but the problems seems “in the middle”.

I tried asking Maestrooo if they fix to the problem, since so many of their customers are also Klaviyo customers. 

I hope they will get back to me. If you have any updates, let's keep in touch.

Hi, did you get an update on this topic? we are using focal theme too and experience the same problem.