Back in Stock button types
Back in Stock supports multiple types of buttons, and you can choose the one that suits you best. Keep in mind that some buttons only work in specific themes or theme types.
Inline button
When a new store installs Back in Stock, the app tries to match the theme name and setup an "integration script" for the theme. The integration script is a JavaScript code snippet that inserts a customized EMAIL WHEN AVAILABLE button in the page that matches the color, font and other visuals aspects of the theme and in the best visual position on the page.
When Back in Stock fails to identify or when it doesn't support the theme, it enables the floating button instead of creating an "integration script".
Floating button
The floating button is positioned on the borders of the page, and can its appearance can be customized in in "Customize" menu, in "Product page button" section. It is created inside an iFrame in the page, and for that reason its appearance is not affected by the styles that the page has. Like an Inline button, the Floating button is inserted by JavaScript through the BIS Widget, but it doesn't use a custom integration script.
Custom button
It is possible to turn any existing button in the theme into a Back in Stock button. Back in Stock will detect the buttons that have the BIS_trigger ID and open the sign up popup when that element is clicked. In fact, any HTML element of the page, like an image, can be assigned to be a Back in Stock button.
Just keep in mind that unlike the Inline and Floating buttons, Back in Stock will not manage the visibility (will not show or hide) of custom buttons. For example, if a not sold out variant is selected in the page, the store owner will have to create an implementation to hide or disable the EMAIL WHEN AVAILABLE button.
Click here for more details about Custom buttons.
Custom button for Collection pages
Collection, search and other pages that display multiple products will probably have multiple EMAIL WHEN AVAILABLE buttons. For that reason is necessary to inform what product each button refers to. That information is provided by the data-product-data attribute in the button element.
Collection pages should use the BIS_trigger class instead of ID, so Back in Stock knows that it should load the information from the data-product-data attribute instead of the Shopify page.
Click here for more details about Custom buttons for Collection pages.
App Block button
Shopify announced Online Store 2.0 as that the future Shopify stores app integrations. The main technology of OS2, App Blocks, allows users to add, update and remove apps from within the Shopify Theme Editor in Shopify Admin. Back in Stock supports App Blocks and allows users to customize the colors, fonts, margins and other aspects of the button without the need to exit the Shopify Theme Editor.
It is important to select "Online Store 2.0" Theme Integration in "Customize" menu, "Theme Integration" item to keep the Back in Stock Widget updated when using App Block button. The Online Store 2.0 use Metafields instead of ScriptTags to update the Widget, which is what the App Block requires.