Follow these instructions to implement custom back in stock buttons which can be shown when a variant is out of stock.

  • Add a button with class="js-pushowl--bis" PushOwl will add a click listener on any UI element which would allow your users to subscribe to out of stock variants
  • Make this button hidden by putting CSS attribute display:none .
  •  Optionally, add another attributedata-pushowl-post-subscription-message="Subscribed" to the element if you want the text of the button to change after subscription.

Example back in stock button 

<button class="js-pushowl--bis" data-pushowl-post-subscription-message="Subscribed">Get Notified</button>

Feel free to add any CSS to the element to make optimised for your theme.

How to show button only if the selected variant is out of stock:

You can use liquid syntax to show it only if the variant is out of stock by enclosing the button with the syntax:

{% unless product.selected_or_first_available_variant.available %}
    <button class="js-pushowl--bis" data-pushowl-post-subscription-message="Subscribed">Get Notified</button>
{% endunless %}

For any bespoke back in stock widgets, we have partnered with Storetasker to help PushOwl customers.  

Did this answer your question?