# Back in stock alerts

> Let customers leave their email on a sold-out variant and get an email when it is back, with Klaviyo, or with the metaobject creator and Shopify Flow for alerts kept in your store.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/apps/klaviyo-back-in-stock  
URL: https://www.smootify.io/docs/features/back-in-stock  
Updated: 2026-10-05

When a variant is sold out, a back-in-stock form lets the customer leave their email. Klaviyo keeps the request and emails the customer when the variant is in stock again. On the site, Smootify sends the email and the chosen variant to Klaviyo. The email itself comes from a Klaviyo flow.

> [!NOTE]
> You need a Klaviyo account connected to your Shopify store with Klaviyo's Shopify integration, so that Klaviyo knows your products and their stock.

## 1. Set up Klaviyo

1. Find your **public API key**, which Klaviyo also calls the site ID or company ID. It is in Klaviyo’s settings, under **API keys**. Smootify needs only this public key: never use a private key on the site.
2. Create a flow from Klaviyo’s **Back in Stock** template, and turn it on. Without a flow, Klaviyo saves the requests but nobody gets an email.

## 2. Build the form

Add a Custom element with the tag `klaviyo-back-in-stock` inside the `smootify-product` of the product page. Give it the custom attribute `data-company-id`, with your public API key as its value.

Inside it, Smootify needs:

- **a button that opens the form**: a Custom element with the tag `button` and the custom attribute `type="button"`. It must be the first element of this kind inside `klaviyo-back-in-stock`;
- **a panel**: a Custom element with the tag `dialog`, or a popover (see below);
- **a Form Block inside the panel**, with a Text field for the email: Webflow’s own Email field works as it is (its Name is `Email`, in any case), and so does a Text field whose Type is Email. Make it Required.

Without `data-company-id`, the button, the panel or the form, the element is removed. Outside a `smootify-product`, too.

```html
<klaviyo-back-in-stock data-company-id="AbC123" condition="out-of-stock">
  <button type="button">Notify me when it is back</button>
  <dialog>
    <div>
      <div class="w-form">
        <form><input name="email"><input type="submit" value="Notify me" data-wait="Please wait…"></form>
        <div class="w-form-done"><div>Thank you. We will email you.</div></div>
        <div class="w-form-fail"><div>Something went wrong.</div></div>
      </div>
    </div>
  </dialog>
</klaviyo-back-in-stock>
```

`condition="out-of-stock"` is optional: it shows the element only while the selected variant cannot be bought. The texts, the layout and the style of the panel are up to your design.

- **What is sent.** The email, and the variant selected when the customer sends the form. Only the `email` field reaches Klaviyo: other fields in the form are ignored.
- **After sending.** The form hides and its Success message shows. If Klaviyo refuses the request, the Error message shows Klaviyo’s reason.

## 3. Choose a dialog or a popover

The panel is a dialog, as above, or a popover in its place:

| Panel | Built with | Opens and closes |
|---|---|---|
| A dialog | a Custom element with the tag `dialog` | the button with `type="button"` opens it. Escape closes it, and so does a click outside the first element inside the dialog: keep everything in one Div block inside it |
| A popover | a Div block with the custom attribute `popover` set to `auto`, in place of the dialog | the same button with `type="button"` opens it. Escape and a click outside close it, and it can also have its own close button |

More about building a popover in [Popovers](https://www.smootify.io/docs/build/popovers).

## 4. Or keep the requests in your Shopify

Klaviyo is one way to send the alerts. To keep the list in your own store, with no other app holding your customers’ emails, use the [Metaobject creator](https://www.smootify.io/docs/features/metaobject-creator) and Shopify Flow: the form saves each request as an alert entry in Shopify, and a Shopify Flow workflow writes to the waiting customers when the moment comes. The same form, with another type, gives you more than back in stock:

| Alert | The form saves | Shopify Flow starts when | Then | Workflow |
|---|---|---|---|---|
| Back in stock | an alert of type `back_in_stock` for the variant, and tags the customer | the variant goes from zero to one or more in stock | it emails the customers tagged for that variant and removes the tag | [Back in stock](https://www.smootify.io/flows/back-in-stock) |
| Price drop | an alert of type `price_drop` for the variant, with its price of that moment | a daily check finds the variant cheaper | it emails the customer and marks the alert as sent | [Price drop alert](https://www.smootify.io/flows/price-drop) |
| Waitlist | an alert of type `waitlist` for a product published with no stock, and tags the customer | the product gets its first stock | it emails the customers tagged for that product and removes the tag | [Waitlist](https://www.smootify.io/flows/waitlist) |

**How back in stock works in Flow.** Two workflows share the job:

1. When an alert entry is created, the first one finds the customer with the alert’s email, creates them in Shopify if they are new, with a **Send Admin API request**, and adds a tag such as `_back-in-stock:<variant id>`.
2. When the variant is back in stock, the second one gets the customers with that tag, up to 100 per run, sends each one the email, and removes the tag so the email goes only once.

**The email.** It goes out through an app that sends emails from Flow, such as **Workflow Email**, the one the library’s file uses, or any other transactional email app with a Flow action. On the Grow, Advanced and Plus Shopify plans, Flow’s **Send HTTP request** can also call an email service such as Resend. Shopify Messaging’s **Send marketing email** is not a fit here: it reaches only customers subscribed to email marketing, and its email cannot show which product is back.

Both workflows are in the Flow library, ready to import, with the alert definition to create in Shopify: see [Back in stock](https://www.smootify.io/flows/back-in-stock). The same alert definition serves a [waitlist](https://www.smootify.io/flows/waitlist) for a product not out yet and a [price drop](https://www.smootify.io/flows/price-drop) alert. The metaobject creator needs the Server plan. The form collects an email: say on it what you will do with the address.

## Before you publish

Test on a sold-out variant: send the form, and check that the request reaches Klaviyo.

> [!STUCK]
> - **The element disappears.** `data-company-id` is empty, there is no Custom element with the tag `button` and `type="button"`, there is no dialog or popover, there is no form, or the element is outside `smootify-product`. A Webflow Button does not count: it publishes a link.
> - **The form answers "Invalid Email".** The form has no field named `email` and no Text field whose Type is Email.
> - **The dialog closes when the customer clicks the form.** The dialog holds more than one element: wrap them all in one Div block.
> - **The requests reach Klaviyo, but nobody gets an email.** The Back in Stock flow is missing or not turned on.
> - **The button shows on products in stock.** Add `condition="out-of-stock"` to the element.

## Coming from 1.x

The markup is the same. In 2.0, the panel can also be a popover instead of a dialog.