There are various ways to trigger back-in-stock for your store.

 

Built-In Triggers

Below are 4 different built-in triggers for back-in-stock. 

 

1) Floating Button 

screenshot-onvoard-back-in-stock-demo.myshopify.com-2020.11.17-12_46_59.png

Floating button allows you to show a fixed positioned floating button onto product page. In most cases, you would positioned it in bottom left, bottom center, or bottom right of page.

 

2) Inline Button

screenshot-onvoard-2020.11.17-14_22_11.pngInline Button allows you to show an inline button to trigger back-in-stock modal. It is normally placed after add cart button. 

 

3) Inline Text 

screenshot-2020.11.17-12_43_00.png

Inline Text allows you to show an inline text link that can be used to trigger back-in-stock modal. It is normally placed after add cart button.

 

 

4) Inline Form

screenshot-onvoard-2020.11.17-13_12_18.png

Inline Form allows you to prompt users to get restock notifications when an out-of-stock product variant is selected. Inline form will only be shown if an out-of-stock variant is selected. This trigger could yield better capture rates since it requires less steps and fields as compared to back-in-stock modal.

 

 

Custom Trigger

screenshot-onvoard-back-in-stock-demo.myshopify.com-2020.09.28-19_54_22.png

Custom trigger is the way to go if you want full control over trigger element. To use custom trigger, simply add ov-bis-trigger class to your trigger element. For example,

<a href="#" class="ov-bis-trigger">Notify me when available</a>

Back-in-stock modal will be shown when element is clicked.

Using Custom Trigger on pages other than product page

For pages other than product page, like collection page, you need to pass product data since OnVoard won't be able to automatically detect product to use for back-in-stock modal.

If you are using Shopify, you can pass Shopify product data via data-shopify-product element attribute.

<a href="#" 
class="ov-bis-trigger"
data-shopify-product="{{ product | json | escape }}">
Notify me when available
</a>

If you are using EasyStore, you can pass EasyStore product data via data-easystore-product element attribute.

<a href="#" 
class="ov-bis-trigger"
data-easystore-product="{{ product | json | escape }}">
Notify me when available
</a>