Theme Integrations
With Back in Stock we support different types of buttons for your product pages when a product is out of stock. When your customer clicks the button, it opens a form for them to submit their contact information and receive a notification when the products inventory is restocked. This article explains each type of button you can use and how to customize it.
The buttons that we currently support are:
Theme integration
Back in Stock comes with a large number of premade button integrations; these generate an in-line button on your product page instead of the 'Floating' button at the side/bottom of the page;
Setup
Log in to your Back in Stock dashboard and select 'Customize' from the main menu.
Then select 'Theme Integration' from the drop-down menu.
On this page will be a drop-down that has a list of all the currently premade theme integrations;
Click on the integration that matches your theme and then click the button labelled 'Publish Integration'.
Check one of the out-of-stock product pages on your store. The Back in Stock 'email when available' button will appear in the product page. (Generally below the 'Sold out' button!)
If anything looks amiss or you want to change the styling just get in touch with us on [email protected]
Don't see your theme?
Just get in touch with us on [email protected] - we create new theme integrations on request.
Floating button
Setup
Then press on 'Product Page button' on the drop down menu.
Here the floating button can be activated/deactivated, as well as multiple customisation options.
The floating button is positioned on the borders of the page. 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.
App Block Button
Back in Stock also supports Online Store 2.0 themes. OS2 themes allow users to customize visual elements and extensions in the new Shopify Theme Editor. You can change the color, font size, margins and many other attributes of the Back in Stock button directly in the theme editor without leaving the Shopify Admin. A page preview will update immediately after changes are made.
Setup
When Back in Stock is installed in a store, it detects if the theme is OS2 compatible and automatically set the corresponding theme integration.
You can check the current theme integration in 'Customize' menu, then the 'Theme integration' drop down.
If it is not selected, then select the 'Online Store 2.0' integration from the drop down.
Once this is enabled you can add and modify the Back in Stock button on your store through the Shopify Editor;
Once it has been added, it can be customized like shown above.
The customizations that can be done for this button are limited within this menu. If our intervention is required for this button's display, we could remove that button from our end and add our custom button, which would reflect your desired customizations
On page form
Back in Stock supports integrating with; Mobilia, Responsive, and Retina themes from Out of the Sandbox.
Setup
This guide will explain how the integration works and walk you through installing it for your store.
Supported versions
Your store will need to have one of the following themes installed for this feature to work.
- Mobilia v2.0 (or later)
- Responsive v3.2 (or later)
- Retina (any version)
- Parallax (any version)
How to edit labels in the integrated form?
If you're using the theme integration for Retina, Mobilia, Responsive, or Parallax it's very easy to customize the labels in the form.
The form is part of your store theme. You can edit the form labels in this form using the theme language settings:
1. From Shopify admin go to Themes.
2. Choose 'Edit language' from the dropdown action menu.
3. Choose the Products tab and scroll down to the Notify Form section.
4. Change text as required and hit Save.
FAQ:
Can I configure the buttons caption?
Yes, whether you are using a Theme integration or the Floating button, the caption can be configured from the 'Customize' button on the main menu, then 'Product Page button' on the drop-down. The Button caption option on this page will change it for both button types.
Does Back in Stock configure my theme or theme files?
No, the app adds only a back-in-stock-theme-helper.liquid file to your theme's files, in order to communicate the inventory and variant information over to the app.
https://help.backinstock.org/article/2169-product-data-theme-snippet
I have included a custom button but I want to customize it - can you help?
Given that our support team and developers don't have access to your liquid files; we don't have authority to fix or make any changes to a custom button's code embedded in your liquid/store's files.
Other button related questions? See our Product button FAQ.
I have installed Back in Stock to my store, but cannot see anything on the product page, what do I do?
If Back in Stock did not automatically detect your theme on installation and there does not appear to be anything showing up, send us an email on [email protected].
I have a theme for my store, will Back in Stock work with it?
Back in Stock comes with an integration for most of the popular themes on Shopify, but if we do not have an integration for your installed theme, just send us an email on [email protected].
We can create a new integration to work with your theme or adapt an existing one.
Back in Stock does not look good on our product pages, what can we do?
If you are using our Widget/Floating button, customizations can be made from our dashboard here: https://app.backinstock.org/widget/edit
If you are using a Theme Integration just send us an email and we will have a look and help you out. [email protected]