Color and Styles

The signup form appears when a customer clicks the ‘Email when available’ button. It appears in a dialog on your store product page.

Note: If you’re using a custom theme integration you may have a form that is embedded in the product page. If that’s the case the settings here won’t apply as the form inherits your theme styles. Contact support if you’re not sure.

Labels and messages

Back in Stock allows you to customize the labels and message used in the form. You can use this to localize the form into any language, or just add your own voice to the signup process.

To edit the labels used in the form visit  Campaigns, Popup form.

  • Form Labels: these are the labels used for each field in the form.
  • Confirmation messages: these are shown to the customer after submitting the form. They include the success message (show after successfully create a notification) and error messages used if the notification can’t be created. For example, if an invalid message is used the ‘Email address is invalid’ message will be shown. 

Hit Save form settings to apply your changes.

Colors and Styles

You can edit the color and style of your popup form to match the presentation of your store.

Click Campaigns, Sign up form to use the editor, and click the Colors and styles tab.

The changes you make to the colors appear in the preview panel next to the color options. Hit Save form settings to apply your changes.

Click  Campaigns, Sign up form to use the editor, and click the Colors and styles tab.

The changes you make to the colors appear in the preview panel next to the color options. Hit Save form settings to apply your changes.

Custom styles (CSS)

For more advanced layout you can add CSS to the Custom styles field to be rendered with the form.

For example, to change the submit button to have perfectly square corners:

.btn { border-radius: 0; }

Any CSS included in Custom styles is  applied only to the Back in Stock form and won't conflict with your theme.

Form preview

As you edit the form your changes will be displayed in the preview panel next to your settings. 

The success message, along with one error message, is shown as well. These won’t appear initially in the live form but are included here so you can preview how your chosen colors will appear.

Further customization

Learn more about:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.