How to customize the Notify Me button and signup popup
You customize the restock alert button of EZ Preorder & Back In Stock in your Shopify theme editor, in the settings of the EZ PreOrder - Notify Me block. The block has 16 settings: ten for the button (text, colors, border, font and desktop layout) and six for the signup popup (title, colors and submit button). By default the button reads Notify me when available in black text on a white background with a 1 px black border. These settings style the Notify Me button that collects back in stock alerts.
Available on: Free, Core, Growth, Professional and Scale plans.
Where to find it: Shopify admin → Online Store → Themes → Customize → a product template → EZ PreOrder - Notify Me block.
Before you start
The EZ PreOrder - Notify Me block must already be on your product template. If it is not, follow How to set up restock alerts first. Each product template has its own copy of the block, with its own settings.
How to customize the Notify Me button
- In Shopify admin, go to Online Store → Themes → Customize.
- In the template menu at the top of the editor, choose Products, then the template your restock products use (for example Default product).
- In the left sidebar, click the EZ PreOrder - Notify Me block. The popup opens in the preview so you can see your changes.
- Change the settings under Button Settings and Popup Settings.
- Click Save.
In the theme editor the button is always visible, with a note under it that reads "This is a preview of the "Notify Me" button". The note never shows on your live store, and the button shows there only on sold-out variants of products on your restock list.
Button settings
The Button Settings group of the EZ PreOrder - Notify Me block controls the button shoppers click.
| Setting | What it does | Default |
|---|---|---|
| Button Text | The text on the button. | Notify me when available |
| Button Background Color | The button's fill color. | #ffffff (white) |
| Button Text Color | The button's text color. | #000000 (black) |
| Button Border Color | The color of the button's outline. | #000000 (black) |
| Button Border Width | The outline thickness, from 0 to 5 px in 0.5 px steps. Set 0 for no outline. | 1 px |
| Button Border Radius | Corner rounding, from 0 to 50 px in 2 px steps. | 0 px (square corners) |
| Button Font Size | Text size, from 12 to 24 px. | 16 px |
| Button Font Weight | Text weight, from 100 (thin) to 900 (heavy) in steps of 100. | 400 (regular) |
| Button Alignment (Desktop) | Left, Center or Right. Applies on screens 750 px wide and wider. | Center |
| Button Max Width (Desktop) | The widest the button gets, from 200 to 600 px in 20 px steps. Applies on screens 750 px wide and wider. | 480 px |
The Notify Me button uses your theme's font. On screens narrower than 750 px it fills the full width available, whatever the alignment and max width settings say. When a shopper hovers over it, it fades slightly and its outline gets 1 px thicker.
Popup settings
The Popup Settings group of the EZ PreOrder - Notify Me block controls the signup window that opens when a shopper clicks the button.
| Setting | What it does | Default |
|---|---|---|
| Popup Title | The heading at the top of the popup. | Notify me when available |
| Popup Background Color | The popup's background. | #ffffff (white) |
| Popup Text Color | The color of the title, field labels, typed text and close (×) button. | #000000 (black) |
| Submit Button Color | The fill color of the submit button. Also used for the outline of the field the shopper is typing in. | #000000 (black) |
| Submit Button Text Color | The submit button's text color. | #ffffff (white) |
| Submit Button Text | The text on the submit button. | Submit |
What the signup popup shows
The signup popup of the Notify Me button always has the same layout:
- The Popup Title.
- A grey box with the product name, followed by the variant name when the product has variants (for example "Linen shirt - Large").
- A Name field and an Email field. Both are required, and the email must look like a valid address.
- The submit button.
Shoppers close the popup with the × button or by clicking outside it. After a successful signup the popup shows a green confirmation and closes itself after 2 seconds.
Text you cannot change
Some text in the Notify Me popup is fixed and cannot be changed from the block settings.
| Text | Language |
|---|---|
| Field labels Name and Email | Follows your storefront language: English, French, Spanish, German or Italian. Other languages show English. |
| Field placeholders "Enter your name" and "Enter your email" | Follows your storefront language, as for the labels. |
| "Submitting..." on the submit button while the signup is sent | English only. |
| "Thank you! We'll notify you when this product is available." | English only. |
| "Please fill in all fields" and "Please enter a valid email address" | English only. |
| "Something went wrong. Please try again." | English only. |
The Button Text, Popup Title and Submit Button Text you enter are shown exactly as written. EZ Preorder does not translate them.
Limitations
- The Notify Me button's padding, the popup's size and the field styles are fixed. For changes the settings do not cover, add custom CSS for the
.ez-notify-me-buttonclass in your theme. - The popup collects a name and an email only. You cannot add fields such as a phone number or a marketing consent checkbox.
- The button's visibility is automatic: it shows only on sold-out variants. There is no setting to show it on in-stock products.
- Settings are per product template. If your restock products use several templates, style the block in each one.
Frequently asked questions
How do I change the Notify me when available text?
Open the EZ PreOrder - Notify Me block in the theme editor and change Button Text. To change the popup heading too, change Popup Title. Click Save in the theme editor.
Can I translate the Notify Me button into other languages?
The field labels and placeholders switch automatically between English, French, Spanish, German and Italian. EZ Preorder does not translate the Button Text, Popup Title and Submit Button Text settings; it shows them as you wrote them. The confirmation and error messages in the popup are in English only.
Why does the button fill the whole width on my phone?
On screens narrower than 750 px, the Notify Me button always spans the full width available. Button Alignment (Desktop) and Button Max Width (Desktop) apply only on wider screens.
Why is the button visible in the theme editor but not on my store?
The theme editor always shows the block so you can style it. On the live store it shows only for sold-out variants of products on your restock list. See The Notify Me button is not showing.
Can I change the restock alert email from the theme editor?
No. The block only styles the button and popup. The email is edited in EZ Preorder under Restock Alerts → Email → Customize Email, on Core and above. See How to customize the restock alert email.
Related articles
- How to set up restock alerts: add the block and products to the restock list.
- What are restock alerts and how do they work?: how signups and alerts work.
- The Notify Me button is not showing: fixes for a missing or wrong button.
- How to customize the restock alert email: change what shoppers receive.
- Theme compatibility: theme presets and supported themes.