How to override add to cart action with custom function?

119 6 22

Hi all,

I have done some a bit of research and am hoping someone more experienced on this front can provide some guidance - I am hoping to eventually build an app (for multiple stores across multiple themes) that overrides the store's Add to Cart button with my own custom function (using a script tag?). Essentially, I'd like to send an AJAX request to my server to create a new product variant in that moment, and then return that variant ID and add it to the cart instead of the product variant on that page. 

I have found threads on how to use an XHR interceptor to listen for the add to cart action and got that working, but am not sure how to actually override the default. For my basic development store I've started testing with, it's on Debut as the theme. 

Any help would would be appreciated, thanks!

Shopify Expert
1195 106 290

This is an accepted solution.

I usually use javascript and set an event listener on the add to cart button, then preventDefault() on click then execute the code you want to run.

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).