Follow these instructions:

1. Create an element with class “js-pushowl--subscribe”
You can turn any element into a Subscribe button by adding  class="js-pushowl--subscribe". PushOwl will attach click listeners to all the elements having this class. Clicking on the element will allow visitors to subscribe to your online store.

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 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. Add the Element to your theme.
You can place this element anywhere in your store. Depending upon your requirements, insert the new Element at an appropriate place in your theme files. PushOwl will add the appropriate functionality to it after initializing.

Configuration:

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

  • data-pushowl-pre-display

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

  • data-pushowl-pre-visibility

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

  • data-pushowl-post-display

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

  • data-pushowl-post-visibility

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

  • data-pushowl-post-subscription-message

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

Example:

<button class="js-pushowl--subscribe" data-pushowl-post-subscription-message="You are subscribed !" data-pushowl-pre-display=”inline-block” style=”display:none”>Get Notified</button>

Alternatively, you can get in touch with Storetasker, our partner, who will customize and create widgets according to your needs.

Did this answer your question?