> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-cb-notifylyst.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Storefront widget

> Switch on the app embed, then choose how shoppers reach the form: a button in your product page, a floating tab, or both.

Notifylyst ships as a **theme app extension**. Nothing touches your theme until you switch it on
yourself, and switching it off removes it cleanly — there is no leftover code to hunt down.

## What the extension adds

| Name | Type | What it does | Needed? |
| - | - | - | - |
| **Notifylyst Restock Widget** | App embed | Loads the sign-up form and the floating button on every page. | **Yes.** Without it no button works — not even the block below. |
| **Notifylyst Restock Button** | App block, product template | A **Notify me when available** button where you place it, shown when a variant is sold out. | Optional — or use the floating button. |
| **Notifylyst Subscriber** | App block, any template | A table where logged-in customers see and cancel their own sign-ups. | Optional. |

> [!WARNING]
>
> **The app embed is the one you can't skip.** If it is off, the Restock Button block stays on the
> page but does nothing when clicked. Home's **Live on your store** card shows whether the embed is
> on in your live theme.

## 1. Switch on the app embed

1. **Online Store → Themes → Customize** on your live theme (or use the first step of the setup
   guide on Home, which opens it for you).
2. Open **App embeds** in the left sidebar.
3. Switch on **Notifylyst Restock Widget**.
4. **Save.**

![The Shopify theme editor's App embeds panel with Notifylyst Restock Widget switched on.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-03-theme-block.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=b2afcf21c19ca2a02b3039eb67ae2f9c)

## 2. Choose how shoppers reach the form

> [tab] Button in the product page
>
> 1. In the theme editor, switch the preview to a **product** template — ideally a sold-out product,
>    so you see the result straight away.
> 2. **Add block** in the product information section, and pick **Notifylyst Restock Button**
>    under **Apps**.
> 3. Drag it under the **Add to cart** button.
> 4. **Save.**
>
> The block has its own settings in the theme editor: the label (**Notify me when available**),
> colours and hover colours, border radius, font size and weight, padding, margin and full width.
>
> ![The theme editor's block picker opened from Add block in the product information section, on the Apps tab, listing Notifylyst Restock Button and Notifylyst Subscriber.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-06-add-block.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=52115065fee6b6671088225ee7ee888a)

> [tab] Floating button
>
> A tab fixed to the left or right edge of the screen on product pages. It is **off** until you turn
> it on — from Home's setup guide (**Turn on floating button**) or under
> **Appearance → Notify me button → Enable floating button**.
>
> Its caption, colours, position and size are set in the app, not in the theme editor:
> [Customize appearance](https://codebeans-cb-notifylyst.mintlify.site/app/guides/customize-appearance.md#notify-me-button).
>
> ![A sold-out product page with the floating NOTIFY ME WHEN AVAILABLE tab on the right edge of the screen, next to the inline Notify me when available button.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-33-floating-button-live.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=fd5052bbd764f08dda9ad5b0ccdfab9a)

Both buttons appear only while the **selected** variant is sold out, and hide again when the
shopper picks one in stock. A variant set to keep selling when out of stock counts as available,
so it never shows a button.

## 3. Check it on the storefront

Open a sold-out product as a shopper and pick the sold-out variant. You should see the button.
Click it and the sign-up form opens.

![A product page with a sold-out variant selected and the Notify me when available button below the Sold out button.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-07-button-live.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=97e0745145a06a1ba43d31d96dc67b3d)

Sign yourself up. The entry appears in **Analytics → Sign-ups** within moments — the fastest
end-to-end proof that the installation works.

## The subscriber list

Add the **Notifylyst Subscriber** block to a page logged-in customers visit (for example a
customer account or a "My alerts" page). It shows them a table of their own sign-ups — product,
variant, channel, date and status — with search, filters and an **Unsubscribe** button. Guests see
nothing. The block's settings choose the title (**NotifyMe List for This Product** by default), the
columns, colours, rows per page and date format.

## Buttons on collection pages and custom themes

A theme developer can open the form from any element — a collection card, a quick-view — by giving
it the class `cb-notifylyst-trigger` and the product's data in `data-product-data`:

```liquid theme={"system"}
<button class="cb-notifylyst-trigger" data-product-data="{{ product | json | escape }}">
  Notify me when available
</button>
```

It does nothing for a product that has no sold-out variant. The app embed must be on.

## If the button does not appear

| Check | What to do |
| - | - |
| Is the app embed on in the **live** theme? | Home → **Live on your store** shows it. Embeds are per theme. |
| Is the selected variant actually sold out? | An in-stock variant, or one set to continue selling, shows nothing — that's correct. |
| Did you save the theme? | The theme editor keeps unsaved changes in your preview only. |
| Is the store paused? | If your store's alerts are paused by support, the widget doesn't load at all. |
| Does the template support app blocks? | Some older themes don't. Use the floating button instead, or contact support with your theme name. |

> [!NOTE]
>
> **Web push needs your live domain.** The browser's permission prompt only works over HTTPS on the
> real storefront, not inside the theme editor preview. On an iPhone, shoppers must add your store to
> their Home Screen before push can be used.

> [card] [Notification channels](https://codebeans-cb-notifylyst.mintlify.site/app/setup/notification-channels.md)
>
> Next: choose how shoppers hear that their product is back.

> [card] [Customize appearance](https://codebeans-cb-notifylyst.mintlify.site/app/guides/customize-appearance.md)
>
> Make the button and form look like your store.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.