Custom Price Drop Button

Customize a button for your price drop subscriptions

Rojen avatar
Written by Rojen
Updated over a week ago

Instead of the flyout widget, you can add a custom button for your price drop subscriptions.

Here’s how you can make it happen:

1. Add an element with class “js-pushowl--pd"
PushOwl will attach click listeners to all the elements having class="js-pushowl--pd". Clicking on the element will allow visitors to subscribe to Price Drop events for your 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. 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.

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 type="button" class="js-pushowl--pd" 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 (Andrew Durot is a PushOwl specialist you can select as your preferred expert).

Did this answer your question?