You can customize the look and feel of your Notify Me widget using CSS to adjust colors, fonts, and design elements to match your store’s branding.
Access the widgets CSS Customization Panel
Log in to your panel.
Go to the Back in stock tab.
Click Customize appearance.
Choose the widget you want to customize (buttons, subscription form, confirmation message).
Select the Style option.
Click on Manual CSS code – this is where you will add your CSS.
Step 1 :
Step 2 :
Step 3 :
Step 4 :
Using CSS Selectors to Style Your Widget
All parts of the Notify Me widget have specific CSS classes you can use to apply your styles.
Buttons
All Notify Me buttons (Product page, Collection page, Home page) use:
.restock-alerts-notify-button { /* Insert your styles here */ }To style buttons on specific pages, use:
Product Page:
.PRODUCT_PAGE-notify-buttonHome Page:
.LANDING_PAGES-notify-buttonCollection Page:
.COLLECTION_PAGE-notify-button
Example:
.PRODUCT_PAGE-notify-button { /* Insert your styles here */ }
Confirmation Message
To style the message shown after a customer subscribes, use:
.restock-alerts-toast { /* Insert your styles here */ }
Save Your Changes
After adding your CSS, click the Save button to apply your new styles to your Notify Me widget.
Note
Use ChatGPT or Claude to help you with CSS customization. You can also reach out to our customer care team if any additional help is required.