# Customize "Notify me" form and messages

![image](https://docs-assets.foxecom.app/xflow-app/gif-%20notify%20me%20form_eIHe4E13.gif)

<Hint type="info" title="Before you begin">
  Make sure **XFlow Helper is enabled** in the theme editor. This allows XFlow to work seamlessly with your theme.

  *Not sure how to do that? Learn more here:* [Enable XFlow on your storefront](https://docs.foxecom.com/xflow-app/getting-started/quick-start-guide/enable-xflow-on-your-storefront)
</Hint>

## Why customize your 'Notify me' widget?

A well-designed sign-up form encourages shoppers to subscribe when products are sold out — helping you capture buyer intent while maintaining brand consistency. You can customize the form’s **fields, content, messages,** and **display rules** directly inside the XFlow app.

When a product in an active campaign is sold out, the ‘Notify me’ button will show automatically on its page.&#x20;

[*Learn more about Campaigns*](https://docs.foxecom.com/xflow-app/campaigns/overview)

## Access the "Notify me" widget settings

1. From your XFlow dashboard, select **"Notify me" widget settings**.
2. In the Back-in-stock settings, switch between the following tabs to configure:

<LinkList>
  <LinkItem href="#sign-up-form">
    Sign-up form
  </LinkItem>

  <LinkItem href="#notify-me-button">
    Notify me button
  </LinkItem>
</LinkList>

![image](https://docs-assets.foxecom.app/xflow-app/XFlow%20docs%20screenshot%20\(3\)_sPKZ23a9.jpg)

### Sign-up form

![](https://docs-assets.foxecom.app/xflow-app/6b16490d-21a2-4f7b-854e-18505607daeb.png)

Under the **Sign-up form** tab, you can edit the content customers see when signing up for notifications:

#### Form fields

<Table widths="30%">
  | Setting                 | Description                                                                              |
  | ----------------------- | ---------------------------------------------------------------------------------------- |
  | **Email**               | Add an email field to the sign-up form. At least one email or phone field is required.   |
  | **First name**          | Add a first name field to collect the customer’s name.                                   |
  | **Variant selector**    | Let customers select the product variant they want to receive restock notifications for. |
  | **Add more field**      | Add more customer information fields to the sign-up form.                                |
  | **Submit button label** | Customize the text displayed on the form’s submit button.                                |
</Table>

#### Form content

<Table widths="30%">
  | Setting                        | Description                                                                                                                |
  | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
  | **Show preview product**       | Show or hide the product preview in the sign-up form.                                                                      |
  | **Heading**                    | Customize the main heading displayed on the form.                                                                          |
  | **Description**                | Add or edit the descriptive text shown below the heading.                                                                  |
  | **Footer text**                | Add supporting text at the bottom of the form, such as marketing consent, privacy policy, or terms of service information. |
  | **Already subscribed message** | Customize the message shown when a customer has already subscribed to notifications for the product.                       |
</Table>



![image](https://docs-assets.foxecom.app/xflow-app/XFlow%20docs%20screenshot%20\(23\)_UMU6qJxk.jpg)

#### Success screen

<Table widths="30%">
  | Setting                  | Description                                                                   |
  | ------------------------ | ----------------------------------------------------------------------------- |
  | **Heading**              | Customize the heading shown after a customer successfully subscribes.         |
  | **Message**              | Customize the confirmation message displayed after a successful subscription. |
  | **Show confetti effect** | Show a confetti animation after a successful subscription.                    |
</Table>



<Hint type="success">
  **Pro tips**:

  * Keep the sign-up form simple — email is usually enough.
  * Use a clear success message to confirm the subscription and explain what happens next.
</Hint>

### 'Notify me' button

![](https://docs-assets.foxecom.app/xflow-app/7ced5650-f8fe-43db-a97e-aebec76e71a1.png)

Under the **Notify Me button** tab, customize the Notify me button displayed on your product pages and product cards when items are out of stock.

#### Product page

<Table widths="30%">
  | Setting             | Description                                                                                           |
  | ------------------- | ----------------------------------------------------------------------------------------------------- |
  | **Button label**    | Customize the text displayed on the Notify me button on the product page.                             |
  | **Help text**       | Add supporting text below or near the Notify me button.                                               |
  | **Button position** | Choose how the Notify me button appears on the product page: **Inline button** or **Floating button** |
</Table>

![image](https://docs-assets.foxecom.app/xflow-app/XFlow%20docs%20screenshot%20\(6\)_31ejMrm9.jpg)

#### Product card

<Hint type="info">
  This feature is available on the **Growth plan and above**.
</Hint>

![](https://docs-assets.foxecom.app/xflow-app/f4e50fc1-66bb-4882-9db5-e165122a4ec5.png)

Shows on out-of-stock product cards in collections, homepage, search, and other listings.

<Table widths="30%">
  | Setting          | Description                                                     |
  | ---------------- | --------------------------------------------------------------- |
  | **Enabled**      | Check the option to show the Notify me button on product cards. |
  | **Button label** | Customize the text shown on product cards.                      |
</Table>

<Hint type="success">
  **Tip**: Keep the product card button label short to avoid text truncation on smaller product cards.
</Hint>

#### Product quickview

<Hint type="info">
  This feature is available on the **Growth plan and above**.
</Hint>

![](https://docs-assets.foxecom.app/xflow-app/f36e7c52-ee57-488e-a201-4ee72537cd0b.png)

<Table widths="30%">
  | Setting          | Description                                                                    |
  | ---------------- | ------------------------------------------------------------------------------ |
  | **Enabled**      | Check the option to show the Notify me button in the product quick view modal. |
  | **Button label** | Customize the button text displayed in the product quick view modal.           |
</Table>

<Hint type="info">
  This option only works if the quick view feature is enabled in your theme. If quick view is already enabled but the **Notify me** button still does not appear, [contact us for assistance](https://docs.foxecom.com/xflow-app/notify-me-widget/customize-notify-me-form-and-messages?chat=true).
</Hint>

#### Custom placement snippet

<Hint type="info">
  This feature is available on the **Growth plan and above**.
</Hint>

Use the custom placement snippet to manually render the Notify me button anywhere inside your Shopify theme.

![image](https://docs-assets.foxecom.app/xflow-app/XFlow%20docs%20screenshot%20\(29\)_TnTAR6YV.jpg)

This is useful for:

* Sticky add-to-cart sections
* Custom product templates
* Theme-specific product layouts
* Advanced storefront customizations

Copy the provided Liquid snippet and paste it inside a product context in your theme code.

*Need help adding the snippet?* [*Contact our support team*](https://docs.foxecom.com/xflow-app/notify-me-widget/customize-notify-me-form-and-messages?chat=true)

## Add "Notify me button" block manually

By default, XFlow automatically **replaces the theme’s Buy buttons** (Add to cart / Buy now) with the **Notify me button** when a product or variant is **out of stock**.

If you don’t want the **Notify me button** to appear in the default replacement position, you can use the **XFlow: Notify me button** block to place it in another location within your product page or other supported product sections.

<Hint type="info">
  For the **default product form**, we recommend using the **automatic button replacement** rather than adding the block manually to avoid duplicate Notify me buttons.
</Hint>

<div>![image](https://docs-assets.foxecom.app/xflow-app/image_78SklY3o.png) </div>

*Want to translate the **Notify me button block**? Check this guide:* [*Translate "Notify me" widget content*](https://docs.foxecom.com/xflow-app/notify-me-widget/translate-notify-me-widget-content#translate-content-for-the-xflow-notify-me-button-block-in-your-theme)

## Customize the 'Notify me' widget to match your brand

Want the **Notify me form** and **Notify me button** to better match your store’s branding?

Our support team can help customize details such as **colors, button size, spacing, fonts, shapes, and overall styling** so the widget feels more consistent with your theme.

<Button href="https://apps.shopify.com/xflow?utm_source=foxecom&utm_medium=help_center_xflow_notify_me_widget&utm_campaign=cta_button&utm_term=need_help_customizing_notify_me_widget_contact_our_support_team" variant="secondary">
  Need help customizing Notify me widget? Contact our support team →
</Button>

## Related articles

<PageLink href="https://docs.foxecom.com/xflow-app/notify-me-widget/set-up-notification-rules-for-back-in-stock-alerts">Set up notification rules for back-in-stock alerts</PageLink>

<PageLink href="https://docs.foxecom.com/xflow-app/notify-me-widget/notify-me-widget-faqs">"Notify me" widget: FAQs</PageLink>

<PageLink href="https://docs.foxecom.com/xflow-app/campaigns/create-and-launch-a-restock-campaign">Create and launch a Restock campaign</PageLink>