CSS allows you to make powerful changes to the look and feel of your website, from changing the color of content to adding new fonts and other design elements. we understand how important it is to be able to have control over everything added to your website so we have provided the ability for you control how your widget loos like. In this guide, we will provide you with the basics of using CSS to make style changes to your Notify me widget.
Log in to your panel.
Go to Back in stock tab.
From the Widgets section select Customize widget button.
Here you will see a Edit code option. here's where your code should go.
All different part of Notify me widgets have classes. so you can use their classes as selectors.
All buttons (Product page, Collection page, Home page buttons) have the class "restock-alerts-notify-button". So if you give styles to this class it will be applied to all these buttons. To apply styles to these buttons, you would use the class as follows in your CSS:
.restock-alerts-notify-button {
/* Insert your styles here */
}If you wish to make changes to only product pages or home pages each of these have specific classes too:
PRODUCT_PAGE-notify-buttonLANDING_PAGES-notify-buttonCOLLECTION_PAGE-notify-button
Remember to add a . before the class in your CSS, like this:
.PRODUCT_PAGE-notify-button {
/* Insert your styles here */
}
Click on the Save button and you're good to go.
This also goes for Subscription form and Confirmation message. you can edit CSS of these too.
You should put the CSS code with the related classes of their elements in their specific section like the images below:
Note: The class of the Message after subscription is "restock-alerts-toast"
.restock-alerts-toast {
/* Insert your styles here */
}You can use your CSS skills and do cool styles on your widget and if you wanted any help our tech support is just a message away!