How to Add a Dynamic Email Waiting List for Out-of-Stock Products on Shopify

Hi,

I wonder how I can add an email field when my product is out of stock on Shopify.

I want this field to say, “Notify me when this product becomes available.”

Then, I want to build a flow that says, “Hey, your {{product_name}} is back in stock!”

In the email, I want to include all the details of the product my customer is waiting for.

Currently, when I'm out of stock, I have this:

 

But I want a new field above this button where my customers can add their email addresses.

This field should appear on my site whenever a product is out of stock.

Then it’s dynamic, so if I have two products out of stock, Klaviyo needs to know that it’s two different people waiting for two different products to create a dynamic email that refers to each customer’s waiting list.

 

Thans for your help klaviyo communauty !

I followed this tuto https://www.youtube.com/watch?v=NW-L_N8bPto&t=350s&ab_channel=YounesYahya

Which comes from this aricle: https://help.klaviyo.com/hc/en-us/articles/360001895651

I don't have this file in my theme, I only have "theme.js.liquid", "js-variables.liquid" and "sections.js.liquid".

In these 3 files in my code I can't find a structure equivalent to yours. For example, I can't find : 

"!this.current" or "class variantselects" etc... 

So no deduction, it's getting complicated to know where to add the code in the site's JS.

So the button is displayed but when I click on it nothing happens.

My second problem is that the button displays when my stock is at 0. Perfect. However, when it's at "-30" or "-x" (a negative value) in the case of pre-orders, for example. The button is still not displayed.

I think because I use pre-orders. The product is never "unavailable". You know how I can say to the code "look at the stock, if stock 0 or negative value then display the button".