Mega Cart Drop Down

This technique was first used on the VaVaVoo Store. 

Make sure Ajax is enabled 

Customize Theme > Cart > Ajax Cart Selected

Locate and open jquery.ajax-cart.min.js

Add Drop down cart modifications between {% if settings.ajax-cart %} drop down cart code goes here {% endif %}

Inside jquery.ajax-cart.min.js on line 147 after the .prepend you can enter any html code you like in order to style your cart if the items in the cart = 0. Likewise on line 153 after the .prepend if the cart contains items, this code will run, so this is where you can style the layout of the products in your cart. For example you would include all the code you need to style the image, title, price etc inside the cart dropdown.  

Near the bottom of the jquery.ajax-cart.min.js sits the following code: This has to do with updating the cart without refreshing the page and having things done.  On line 193 if cart items = 0, execute the code after the .prepend On line 202 if there are items left in the cart upon updating it, execute that code. On line 197 the $(‘HTML’).remove(); removes those elements from the DOM without refreshing the page.