Add Free Item To Cart - without the use of a popup modal

View this in action Here

Step 1. Ensure that the right product is setup to have the free product added with it. Find the product form and modify the add to cart button to include this 'if statement' identifying the correct product handle.

Step 2. create a new asset within your theme, name it 'script.js', and fill it with this script. Replace the variant ID with the ID of the variant you want to add for free. Don't forget to call this script in the theme.liquid with your other javascript files, at the bottom.

Step 3. Make sure your cart is going to refresh properly if the paid product is removed. This will need to be done per theme, but ensure that you add the line 12 in this gist, and that it will loop to tell the cart not to display the product in the cart if it is the only item there:

Step 4. Now all we have to do is add the Shopify script to give a discount on this free product that was added, and here is the script to do so:

Want To Know The 15 Tools We Used To Generate Over $24 Million For Our Clients?

This past year, we have tested dozens of products to figure out which ones yield the best results.
Our toolbox contains some of the most impactful tools we found to grow a brand on Shopify.