You can also get subscribers to opt into your alerts with custom buttons. They look something like this:

Follow these steps to create custom buttons for your Back in Stock Alerts:

1. Add an element with class “js-pushowl--bis”
PushOwl will attach click listeners to all the elements having class="js-pushowl--bis". Clicking on the element will allow visitors to subscribe to Back In Stock events for out of stock products.

2. Hide the element initially.
Since Push Notifications are not supported on some platform like iOS, older browsers and incognito windows, it is recommended that you initially hide this element. You can choose to do so either by adding "display:none" or “visibility:hidden” as CSS properties for the element. PushOwl will automatically make the element visible on compatible browsers & devices. This  behavior can be further configured as per your requirements through the data attributes as described in the Configuration section below.

3. Add an optional Post Subscription message
You can choose to add a data-pushowl-post-subscription-message attribute. PushOwl will replace the text of the element with the specified message after the visitor has successfully subscribed. 

4. Style your Element
Style the button by adding the desired CSS styles to make it optimized for your theme.

5. Show the element only when the variant is out of stock
You would usually want to show the Back In Stock button when the product is out of stock. For this purpose, you can use Shopify’s liquid syntax to display the button only when the selected variant is available.

6. Add the Element to your theme
You can place this element anywhere in your product page. Depending upon your requirements, insert the new Element at an appropriate place in your Product Template file. This is usually the ‘product.template.liquid’ file, but may vary, depending on your theme. PushOwl will add the appropriate functionality to the element after initializing.

You can further configure the behavior of the button using the following data attributes:

Value of the ‘display’ CSS property of the element that will be assigned before the visitor has subscribed.

Value of the ‘visibility’ CSS property of the element that will be assigned before the visitor has subscribed.

Value of the ‘display’ CSS property of the element that will be assigned after the visitor has subscribed.

Value of the ‘visibility’ CSS property of the element that will be assigned after the visitor has subscribed.

Message that will be set as the text of the element after the user has subscribed

Example:

Alternatively, you can get in touch with Storetasker, our partner, who will customize and create widgets according to your needs (Andrew Durot is a PushOwl specialist you can select as your preferred expert).