@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.

Hi, stumbled upon this thread for Klaviyo back in stock button to replace the sold out button. 

I have an issue of the following scenarios:

1. Product is sold out and is a single variant - Notify me button doesnt show up
2. Product has multiple variants and all variants are sold out - notify me button doesn’t show up
3. Product has multiple variants and not all are sold out - notify me button shows up on the sold out variants

My theme is very old...from 2016 but that would mean all of this should or shouldn’t work, but it behaves inconsistently.  

This is very strange and I followed the instructions Klaviyo posted about BIS online.  Anybody have something similar and figured it out?  I’m fairly technical so just know where to look.  

Hey everyone!

I just read over this thread, and it seems like we’re having a variety of different problems with implementing Back in Stock on different themes. Thanks for sharing your experiences with this, and for the solutions provided. We just came out with an update that’s hopefully going to make implementing Back in Stock quite a bit easier on most Shopify themes (this is also available for BigCommerce).

Moving forward, you can create Back in Stock forms from within Klaviyo, just like how you design regular sign up forms. You can create one form per account, and can collect email and SMS marketing consent through this form. Once this form is published, it should automatically appear on product pages when that product goes out of stock, on most Shopify themes. Manually adding code to your store will no longer be necessary, so we also recommend following the steps in this article to remove the code snippets you added if you’d like to install Back in Stock via the new method.

Note that if your store’s set to “Continue selling when out of stock” for certain products, those product will always appear as available, so the Notifiy Me button and the form will not appear. Additionally, if you’re using the Retina theme, which comes with a built-in Notify Me button, you’ll need to disable this default button for Back in Stock via Klaviyo to work.

Actually Byrne, let me clarify.  My problem is from removing the original hard code snippets and using the BIS forms within Klaviyo, and following the instructions in the link you posted.  

​@AKC Got it! When following the instructions, were you able to successfully remove the old snippet, and the issue you’re seeing is related to when the new Back in stock form does and doesn’t show up? Can you confirm that the products that the button isn’t showing up for don’t have “Continue selling when out of stock” set?