You can edit the button colors and button text colors from within the app, but for styling the other elements of the form, you need to use CSS.
Where do I add the code?
The elements on the Back in Stock notification request form have CSS selectors that you can customize.
Some themes have a pre-existing stylesheet you can add your CSS to (e.g., custom.css), but this is not always the case. If your theme doesn't, we recommend adding your CSS code within style tags added to the end of your product-template.liquid, product-form.liquid, or equivalent theme file:
<style>
{your CSS styling code}
</style>
Alternatively, you can add the style tags and CSS code to the <head> section of your theme.liquid file.
The CSS Selectors
Here's the full list of available CSS selectors for the back in stock form:
Selector | Description |
#esc-oos-form | The container of the whole form. |
#esc-out-of-stock-inputs | The container of the email and SMS inputs. |
.esc-out-of-stock-title | The title of the form. |
.esc-out-of-stock-subtitle | The subtitle of the form that appears under the title. |
.esc-sms-container | The container of the SMS input elements. |
.esc-sms-select-country-title | The container of the SMS country select dropdown menu. |
.esc-sms-input | The SMS input field. |
.esc-btn | The buttons on the form. This can be customised with CSS code from the Settings page in the app. |
.esc-notification.esc-sms-notification | The text when a customer types in their phone address. |
.esc-email-container | The container of the email input. |
.esc-notification.esc-email-notification | The text when a customer types in their email address. |
.esc-error | The text of the error message when a notification sign-up fails. |
.esc-success | The text of the message when a notification sign-up succeeds. |
<style>
.esc-out-of-stock-title {
color: green;
}
</style>
Would create something like this:
