How to Use the "Notify Me Button" Snippet

This guide walks you through adding the Notify Me When Available (back-in-stock) form to your Shopify theme using the back-in-stock  snippet. Use this snippet if your theme or app setup does not support app blocks.

Step 1 — Open Your Theme Code Editor

• In your Shopify admin, go to Online Store → Themes.
• Find your active theme and click ⋯ (Actions) → Edit code.

Step 2 — Add the Snippet File

In the left sidebar, open the Snippets folder and create a back-in-stock.liquid  file. This file contains the full back-in-stock component — markup, CSS, and JavaScript are all included inline, so there are no extra asset files to upload. Copy the snippet code from this article and paste it into the file. Press Save.

Step 3 — Add the Snippet to a Section

Find the section where you want the notify button to appear. The most common location is the product page:

• Product page — sections/main-product.liquid    

Inside that file, find the right place (typically near the Add to Cart button) and insert a render  tag. The snippet only renders for variants that are out of stock, so it stays hidden while the product is available.

Basic example — product page

{% render 'back-in-stock', product: product %}

The only required property is product . Every text and option uses a default value, so the snippet works out of the box.

Full example — with overrides

{% render 'back-in-stock',
  product: product,
  show_variant_selector: true,
  prefill_customer_email: true,
  disable_already_subscribed: false,
%}

Tip: The snippet reads the current variant from the theme's product form automatically. If your theme uses a standard variant selector, no extra setup is needed.

Step 4 — Available Properties

All properties except product  are optional. If you omit one, its default value is used automatically. Text defaults are read from your theme's locale files (see Step 5).

Product

Button

Modal

Success Messages

Error Messages

Step 5 — Add Translations

The snippet uses Shopify's translation system. The default text for each property is read from your theme's locale files, so you need to add the translation strings there.

Where to find locale files

In the code editor, open the Locales folder. You will see files like en.default.json , fr.json , etc.

What to add

Open your default locale file (usually en.default.json ) and find or create a back_in_stock  section. Add the following keys inside it:

"back_in_stock": {
  "settings": {
    "button_text": { "default": "Notify me when available" },
    "already_subscribed_text": { "default": "You are subscribed on this product" },
    "modal_title": { "default": "Notify me when available" },
    "modal_subtitle": { "default": "Get notified when product back in stock." },
    "email_placeholder": { "default": "Your Email" },
    "modal_description": { "default": "Your info stays private and will never be shared with anyone." },
    "subscribe_button_text": { "default": "Notify me when available" },
    "thank_you": { "default": "Thank you!" },
    "button_text_signed": { "default": "You're signed up! We'll notify you." },
    "we_will_notify": { "default": "We will notify you when the product is available." },
    "error_email_text": { "default": "Your e-mail address is wrong." },
    "error_text": { "default": "Something went wrong, please try again later." }
  }
}

Important: If a back_in_stock  key already exists in the file, add only the missing keys inside its settings  block — do not create a duplicate back_in_stock  key.

Translation key reference

Adding translations for other languages

Repeat the same process for each language file in the Locales folder (e.g. fr.json , de.json ), translating the values into the appropriate language while keeping the keys identical.

Common Use Cases

Product page — default setup

{% render 'back-in-stock', product: product %}

Product page — no variant selector, no email prefill

{% render 'back-in-stock',
  product: product,
  show_variant_selector: false,
  prefill_customer_email: false
%}

Product page — block re-subscribing, custom button text

{% render 'back-in-stock',
  product: product,
  disable_already_subscribed: true,
  button_text: 'Email me when back in stock'
%}

Troubleshooting

Button does not appear

• The notify button only shows when the selected variant is out of stock. Confirm the variant is unavailable.

Text shows raw keys like back_in_stock.settings.button_text.default

• The translation keys are missing from your locale file. Follow Step 5 to add them to en.default.json   .

HTML tags like <p> show up as visible text

• The locale values should be plain text, not HTML. Make sure the values in en.default.json  do not contain <p>  or other tags.

Variant does not update when switching options

• The snippet auto-detects variant changes from the product form. If your theme uses a non-standard variant selector, contact support.

Email is entered but nothing happens after submitting

• The snippet relies on the app's subscription service being loaded on the page. If the form shows the generic error message, make sure the R+ Back In Stock app is installed and active.

• Dev: Overview
• Dev: JavaScript API
• Dev: Troubleshooting
• Flow Integration

Do you need help?

If you have any questions or run into issues, please contact us — we're happy to help.