Hi!

I’m working in a custom Shopify theme which uses Alpine JS & Tailwind. I know that the Back In Stock integration is not officially supported, but i’m feeling i’m almost there and was wondering if anyone could shed some light on why there’s no Klaviyo button appearing for out of stock products.

I tried to simplify my code to show how the logic is working. I of course added the theme.liquid default script by Klaviyo. My product template has this:

<form class="w-full space-y-10" method="post" action="/cart/add">
// variant selector //
{% if product.available %}
<div x-data="{qty: 1, price: {{ product.price }}{% if compare_at_price %}, compare_at_price: {{ product.compare_at_price }}{%endif%}}" class="grid 3xl:grid-cols-2 gap-10">
     <div class="grid grid-cols-3 gap-6">
         //qty selector//          
         <div>
             <button type="submit" class="btn product-form__cart-submit btn--secondary-accent h-16 px-12 {{ bgColor }} {{ hoverContrast }} transition text-white rounded-full font-futura-bold text-center text-xl md:text-2xl uppercase">{{ 'products.product.add_to_cart' | t }}</button>
         </div>
     </div>
     <input type="hidden" name="id" value="{{ product.variants.first.id }}">
     <input type="hidden" name="return_to" value="back" />
{% else %}
<div class="w-full font-futura-bold text-xl lg:text-3xl">{{ 'products.product.out_of_stock' | t }}</div>
<button type="submit" name="add" aria-disabled="true" disabled class="btn">{{ 'products.product.out_of_stock' | t }}</button>
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<input type="hidden" name="return_to" value="back" />
</form>

I guess it’s important to note that we don’t use a regular variant selectbox but a transformed one which consists of divs, not input fields. The correct variants + id’s are being loaded though.

Is there anything missing in the code above?