Back in stock

A Klaviyo back-in-stock signup form for the selected variant.

A “notify me” form that subscribes the shopper to a Klaviyo back-in-stock alert for the variant they have selected. Needs: the engine with tracking enabled, and Klaviyo’s onsite script on the page (the form reads your company id from it).

On your storefront

The form ships in the pixels module, so the store needs track-events. Place it inside <storesynk-product>, typically shown only when the variant is sold out.

<storesynk-store domain="your-store.myshopify.com" token="your-public-storefront-token" track-events>
  <storesynk-product handle="example-product">
    <add-to-cart text-out-of-stock="Sold out"><button type="button">Add to cart</button></add-to-cart>

    <klaviyo-back-in-stock>
      <input type="email" required placeholder="[email protected]" aria-label="Email address" />
      <button type="submit">Notify me when available</button>
      <span class="ok">You're on the list!</span>
    </klaviyo-back-in-stock>
  </storesynk-product>
</storesynk-store>

klaviyo-back-in-stock { display: none; }
storesynk-product:has(add-to-cart[ss-out-of-stock]) klaviyo-back-in-stock { display: flex; gap: 8px; }
klaviyo-back-in-stock .ok { display: none; }
klaviyo-back-in-stock[ss-active] .ok { display: block; }
klaviyo-back-in-stock[ss-loading] button { opacity: .5; }

The component does not name the email field. Give the input an aria-label or a <label>.
It reads the selected variant from the product above it, so it follows the option pickers.

States

Attribute	Meaning
`ss-loading`	submitting
`ss-active`	signup succeeded
`ss-empty`	signup failed