Skip to main content
  • EN
Solved

Back in Stock Button Not Working

Hello,

Is there anyone out there that might be able to help me out with this issue?

Problem: When selecting a product that is sold out - #1 the notify me when back in stock button is not showing up. #2 But, when the product page is refreshed it does show up - #3 however it will show up even for products that are in stock (right under the add to cart button)

I attached a few screen shots of the code and what the buttons looks like. 1,2,3

If someone has experienced this and can help me out it would be super helpful. Thanks in advance!

 

12 replies

K
Rank
Userlevel 2
Badge +9

@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

T
Rank
Badge +2

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.

 

K
Rank
Userlevel 2
Badge +9

@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
Rank
Badge +1

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.

N
Rank
Badge +1

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

K
Rank
Userlevel 2
Badge +9

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

N
Rank
Badge +1

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

K
Rank
Badge +1

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

K
Rank
Userlevel 2
Badge +9

@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

S
Rank
Badge +1

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

T
Rank
Badge +2

@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

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. 

H
Rank
Badge +1

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

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

Reply


Most helpful members this week

Terms & ConditionsCookie settings