i've tried embedding the bit of code on my site that allows klayvio to automate the back in stock functionality. super helpful -- if i could get it to work.
right now what's happening is this:
let's say a size 38 in a style is sold out. the "notify me" text will not show up unless the size 36 is clicked. it seems the trigger is only working when the neighboring size is selected. i've run through the liquids and i just simply don't know enough to determine what the issue is.
anyone have any ideas? here's a link to my theme preview that shows the issues and a gif that klayvio sent me that appears to solve the problem. but HOW.
Ya it looks like the display: none rule is being added incorrectly.
I would double check the liquid loop, analyze the code to understand the logic and see if you can identify why it's adding where it shouldn't be. I've seen similar code blocks, the logic from an overview standpoint is that you cycle through your variants and if variant.available is true then you'll add that CSS display: none so the out of stock notification does not show.
It can be challenge just reading the code, so what I typically do is duplicate the theme and then experiment on the new theme to try and get it to work. (always do code edits on a duplicate theme so you can play around without risking editing the live site).
An alternative idea, I use Klaviyo too (awesome email app!) but for out of stock I use an app called Now Back in Stock. It's an embedded widget you put on the product page and when out of stock it replaces the add to cart button with a form. Then when inventory is back in stock, an email (or text message) goes out to all users that signed up.