Popup Form, Custom Styles

Colors and Styles

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

From the Back in Stock dashboard go to Customize(1) -> Signup Form(2), on the Signup Form page you can select Styles(3)

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.

Or for example to hide the variant dropdown;

select#variants { display: none; }

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:

FAQ

How do I remove the 'powered by Back in Stock' link?

The 'powered by Back in Stock' line appears for stores using the Back in Stock Free plan. It is hidden automatically after upgrading to a paid plan.

To upgrade visit Settings, Billing and select a plan.

Can I add custom fields to the signup form?

We only capture the following fields with the Back in Stock request:

email address/phone number
quantity required (if enabled)
mailing list opt-in preference (if enabled)

If you have a suggestion for another field to be supported please let us know the and how you would use it!

How can I hide the variant dropdown in the registration form for single variant products?

You can hide the dropdown for single variant products by adding some custom CSS to your Signup form settings at https://app.backinstock.org/widget/edit

In Custom Styles enter the following:

select.single_variant_product { display: none; }

And hit Save form settings.

Is the Back in Stock popup form responsive on mobile devices?

Yes, the popup form has been designed to work well across different screen sizes.

Can I hide the dropdown in the popup form?

Yes, the easiest way to do this is to add some CSS to your signup form settings:

1. In your Back in Stock account choose Customize -> Signup form from the top menu

2. Choose the Color and Styles tab.

3. Add the following to the Custom Styles field:

select#variants { display: none; }

4. Hit Save form settings.

That will hide the dropdown in the popup form.