CSS Styling

Each of the elements of 'Now Back in Stock has a CSS selector. These can be used to apply your own bespoke styling. These can be added at the top of your product.liquid file or in your own style sheet, e.g:

<style>

.esc-out-of-stock-title {

    color: green;
}

</style>

Will create a title something like this:

The following CSS classes and id's can be used to add customised styling to the Now Back in Stock popup.

For example

#esc-oos-form

This is the container of the whole popup.

#esc-out-of-stock-inputs

This is container of the email and SMS inputs

.esc-out-of-stock-title

This is the title of the Now Back in Stock popup

.esc-out-of-stock-subtitle

This subtitle appears under the Now Back in Stock title

.esc-sms-container

This is the container of the SMS input elements.

.esc-sms-select-country-title

This is the container of the SMS country select dropdown.

.esc-sms-input

This is the SMS input field

.esc-btn

This is the class given to the Now Back in Stock buttons

.esc-notification.esc-sms-notification

This is the class of text when the SMS notification an alert is set up.

.esc-email-container

This is the container of the email input.

.esc-notification.esc-email-notification

This is the class of text when the email notification an alert is set up.

.esc-error

This class is used for error messages when customers fail to add an alert successfully.

.esc-success

This class is used for messages when customers an alert successfully.