> ## 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.

# Customize appearance

> Style the floating Notify me button, word and style the sign-up form, and where each is edited.

**Appearance** has three editors. Each **Customize** button opens one full screen; changes are
saved with the save bar at the top.

| Editor | What it controls |
| - | - |
| **Notify me button** | The floating button on the edge of product pages. |
| **Sign-up form** | The form shoppers fill in — wording, colours, channels and custom fields. |
| **Notifications** | The messages shoppers receive. See [Message templates](https://codebeans-cb-notifylyst.mintlify.site/app/guides/message-templates.md). |

![The Appearance page with three rows — Notify me button, Sign-up form and Notifications — each with a Customize button.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-16-appearance.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=1b917800286f8dd1482efd9446a76ccc)

> [!NOTE]
>
> The **Notifylyst Restock Button** block that sits in your product page is styled in the Shopify
> theme editor, in the block's own settings — not here. See
> [Storefront widget](https://codebeans-cb-notifylyst.mintlify.site/app/setup/storefront-widget.md).

## Notify me button

The floating button: a tab fixed to the left or right edge of product pages, shown only while the
selected variant is sold out. A live preview sits next to the settings.

![The Notify me button editor with the floating button settings on the left and a product page preview showing the vertical NOTIFY ME WHEN AVAILABLE tab.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-17-button-editor.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=ef3569d16be156de27b2f2ad20a33925)

| Setting | Default | Allowed |
| - | - | - |
| **Enable floating button** | Off | On / off |
| **Button caption** | NOTIFY ME WHEN AVAILABLE | 1–60 characters |
| **Font size** | 16 | 10–32 |
| **Text orientation** | Vertical | Vertical / Horizontal |
| **Button position** | Left | Left / Right |
| **Vertical offset (top %)** | 50 | 0–100 |
| **Background color** / **Text color** / **Border color** | `#000000` / `#FFFFFF` / `#000000` | Hex colours |
| **Border radius** | 3 | 0–50 |
| **Border size** | 1 | 0–10 |

A value outside the allowed range shows its error next to the field (for example **Font size must
be between 10 and 32.**) and nothing is saved. Button styling depends on your plan (**Button
Customization**).

## Sign-up form

Three tabs, plus a language menu if your store has more than one language. The live preview on the
right shows the form as a shopper sees it, including the error and success messages.

![The Sign-up form editor on the Labels tab, with the live form preview showing the headline, variant picker, channel tabs, quantity field and Notify me button.](https://mintcdn.com/codebeans-cb-notifylyst/helB_Y1ZQRw5r3Uo/images/app-18-form-builder.png?fit=max\&auto=format\&n=helB_Y1ZQRw5r3Uo\&q=85\&s=0fb246b14135f9364cd75bd31fc0caa8)

> [tab] Labels
>
> Every piece of text on the form, per language:
>
> * **Headline** (NOTIFY ME WHEN AVAILABLE) and **Body copy** (We'll notify you when available.)
> * the tab names for **Email**, **SMS**, **Web push** and **WhatsApp**, and their field placeholders
> * the button text (**Notify me**) and the footer (We don't share your information with others.)
> * the messages: invalid email, already registered, and the confirmation (**Your notification has
>   been registered.**)
> * **Enable quantity required field** — on by default; off hides **Quantity required** and every
>   sign-up asks for 1 unit.

> [tab] Styles
>
> Colours, fonts and the layout of the form — with or without the product image column — and the
> **Notify me** button's colours.

> [tab] Settings
>
> | Setting | What it does |
> | - | - |
> | **Default channel** | Which channel tab is open first. |
> | **Show product image in widget** | Shows the product image beside the form. Hidden on phones. |
> | **Hide duplicated variants with the same SKU** | Lists variants that share a SKU once in the variant picker. |

Which channel tabs appear isn't set here: the form shows a tab for each channel that is on in
**Settings → Channels**. The variant picker only ever lists sold-out variants.

**Custom fields** — extra questions such as size, colour or a date they need it by — are in the
same editor: [Sign-up form fields](https://codebeans-cb-notifylyst.mintlify.site/app/guides/sign-up-form-fields.md).

> [!NOTE]
>
> **Switching language with unsaved changes** asks **Save changes before switching language?** Each
> language is saved separately. Editing other languages depends on your plan
> (**Multi-Language**).

### Limits

The whole form, in every language, must fit in 120,000 bytes — Shopify's limit for the data the
storefront reads. Past it, nothing is saved: **Nothing was saved: the form is X KB, over Shopify's
117 KB limit…** If Shopify can't store it, you see **Could not save to Shopify. Nothing was
stored…** — try again.

> [card] [Sign-up form fields](https://codebeans-cb-notifylyst.mintlify.site/app/guides/sign-up-form-fields.md)
>
> Next: ask shoppers extra questions.

> [card] [Message templates](https://codebeans-cb-notifylyst.mintlify.site/app/guides/message-templates.md)
>
> The third editor: what shoppers receive.


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