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.
Click Campaigns, Signup 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.
Can I hide the variant dropdown
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 Campaigns, 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.
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:
- customizing the product page page button
- editing the customer email template
- building your own theme integration with the JavaScript API
FAQ
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 Campaigns, 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.
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.
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 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 Campaigns, 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.