Back in stock signup

Copy-paste a theme-editor section for product page - Shows an email capture only when the variant is sold out - submits through Shopify's own customer form so the shopper lands in your customer list tagged with the product. Zero app needed.

Product pageTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Sold out - notify me

Leave your email and we'll ping you the moment it's back.

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.
6Add to your product template - it hides itself while the product is in stock.
7Signups appear as customers tagged 'stock-alert:{product-handle}' in admin - email them when you restock (or export to your mail tool).

stock-alert.liquid

1{%- unless product.selected_or_first_available_variant.available -%}2<div class="gpl-alert">3  <p class="gpl-alert__heading">{{ section.settings.heading | default: 'Sold out - notify me' }}</p>4  {%- if section.settings.sub != blank -%}<p class="gpl-alert__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}5  {%- form 'customer', class: 'gpl-alert__form' -%}6    <input type="hidden" name="contact[tags]" value="stock-alert,{{ product.handle }}">7    {%- if form.posted_successfully? -%}8      <p class="gpl-alert__done">Done - we'll email you as soon as it's back.</p>9    {%- else -%}10      <input type="email" name="contact[email]" class="gpl-alert__input" placeholder="you@email.com" required>11      <button type="submit" class="gpl-alert__btn">{{ section.settings.button | default: 'Notify me' }}</button>12    {%- endif -%}13  {%- endform -%}14</div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

6Add to your product template - it hides itself while the product is in stock.

7Signups appear as customers tagged 'stock-alert:{product-handle}' in admin - email them when you restock (or export to your mail tool).

stock-alert.liquid

1{%- unless product.selected_or_first_available_variant.available -%}2<div class="gpl-alert">3  <p class="gpl-alert__heading">{{ section.settings.heading | default: 'Sold out - notify me' }}</p>4  {%- if section.settings.sub != blank -%}<p class="gpl-alert__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}5  {%- form 'customer', class: 'gpl-alert__form' -%}6    <input type="hidden" name="contact[tags]" value="stock-alert,{{ product.handle }}">7    {%- if form.posted_successfully? -%}8      <p class="gpl-alert__done">Done - we'll email you as soon as it's back.</p>9    {%- else -%}10      <input type="email" name="contact[email]" class="gpl-alert__input" placeholder="you@email.com" required>11      <button type="submit" class="gpl-alert__btn">{{ section.settings.button | default: 'Notify me' }}</button>12    {%- endif -%}13  {%- endform -%}14</div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access