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.

  1. Log in to your panel.

  2. Go to Widgets section.

  3. 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 a 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.

If you wish to make changes to only product pages or home pages each of these have specific classes too:

  • PRODUCT_PAGE-notify-button

  • LANDING_PAGES-notify-button

  • COLLECTION_PAGE-notify-button

Don't forget to Add the . before the classes. for example:

Click on the Save button and you're good to go.

This also goes for Subscription form and Message after subscription. 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"

You can use your CSS skills and do cool styles on your widget and if you wanted any help our tech support is here for you. just drop a line!

Did this answer your question?