Back in stock alerts

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.

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.

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:

More about building a popover in 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 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:

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. The same alert definition serves a waitlist for a product not out yet and a 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.

Coming from 1.x

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