How do you stop the default action/event listener for the "Buy It Now" button?

9 0 1

This might be more of a JS question than a shopify question. I am asking this here because most of you probably run into a similar problem in the past and I did not have much luck on stackoverflow.

I need to show a modal and collect additional information when the customer is buying an item. I did this without a problem for the "Add to Cart" button by adding an event listener.

The problem is that there is already an event listener for the "Buy It Now" button. That event listener forwards the page to somewhere else before my modal can collect information.

When the user clicks the "Buy It Now" button, following happens:

  1. User sees my modal popup.
  2. The page is forwarded to somewhere else before the user can enter information to my modal.

How can I stop 2 above form happening until I am done with my modal?

Thanks in advance.


How are you currently doing it for the add to cart button?

Just a reminder that the Buy Now button is dynamically generated by Shopify, so the html element does not exist on page load.


We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) and maybe write a good review.
Send me a message if you want a free data analysis consultation.