Back-in-stock notifications

When the selected variant is sold out, an outlined panel offers to write when it’s back. It’s the Back in stock block, and it has no settings — all copy comes from the locale file.

Caution

Signal collects the sign-ups. It does not send the emails. Shopify has no built-in restock notification, so sending is a flow you set up — see Sending the notification below. On a drop-driven store where nothing is restocked, the list is often more useful as a demand signal for the next run than as a restock trigger.

What the shopper sees

• The panel is hidden when the variant is available and revealed when it isn’t — live, as they change size.
• Heading: “Tell me when it lands”. Help text: “This size is gone. Leave your email and we’ll write the moment it’s back.”
• One email field and a Notify me button.
• On success the form is replaced by “You’re on the list for this size.”

The default copy is written for a theme where a size selling out is normal and a restock isn’t guaranteed. Rewrite it in locales/en.default.json if you do restock — promising to write “the moment it’s back” is a promise worth keeping.

Where submissions go

Sign-ups post through Shopify’s own customer form and arrive as customers tagged back-in-stock, with a note recording what was wanted:

Back in stock: Tactical Shell — Coal / M (variant 40123456789)

The note is rewritten by script as the shopper changes variant, so it records the size they actually wanted rather than the one that happened to load first.

Find them in admin under Customers, filtered by the back-in-stock tag. The note is on the customer record.

Note

Because this uses the customer form, a sign-up creates or updates a customer record. That’s what makes it reachable from Shopify Flow and from email tools — but it also means the shopper is now a customer in your store, so treat the list under the same consent rules as your newsletter.

Submitting in place

Shopify’s customer form posts to /contact and redirects there, which takes the shopper off the product page and loses the success message with it. Signal submits by fetch instead, so both are kept: the shopper stays where they were and sees the confirmation in place.

Three details in that handler worth knowing:

• Validation runs first. An invalid address triggers the browser’s own reportValidity() rather than a round trip.
• The button shows progress. It’s disabled and relabelled Sending… while the request is in flight.
• A bot challenge falls back to the native submit. Shopify can answer a scripted POST with a 403 or 429 challenge. Rather than leaving the shopper stuck, the handler detaches itself and lets the form submit normally, which carries the full browser context and can be verified. The shopper ends up on /contact — not ideal, but they’re on the list.

Anything else that fails shows “That didn’t send. Try again in a moment.” and re-enables the button.

Sending the notification

1. Shopify Flow (free on Shopify plans and above) is the simplest route. Build a workflow on the Inventory quantity changed trigger: when the variant’s quantity rises above zero, send an email to customers tagged back-in-stock whose note mentions that variant.

2. An email tool — Shopify Email, Klaviyo, Omnisend — can segment on the back-in-stock tag and send a campaign manually. For a drop store this is often the right answer: you’re announcing a new run, not a restock, and you want to write that email yourself.

3. A dedicated restock app handles per-variant matching automatically and is worth it if restocks are frequent and the catalogue is large. If you install one, switch the Back in stock block off so there aren’t two forms.

Why it sits outside the product form

The block contains its own <form>. HTML does not allow nested forms — the browser silently discards the inner one — so this block cannot live inside the Buy buttons form. Keep it as a sibling in the buy column.

The success message is also rendered outside its own form on purpose: a successful sign-up hides the form, and the confirmation has to outlive it.

Accessibility

• The confirmation is role="status", so it’s announced when it appears.
• The email field has a visually hidden label as well as a placeholder.
• autocomplete="email" so the browser can fill it.
• The whole panel is toggled with the hidden attribute, so when the variant is available it’s absent from the accessibility tree rather than merely invisible.

Locale keys

Under products: notify_title, notify_help, notify_email, notify_submit, notify_sending, notify_success, notify_error.