Shopify Inline Cart
This is a git repository for the files and way to setup an inline cart in Shopify. If you have any questions, send me an email at [email protected]
well documented on Shopify Forums: http://forums.shopify.com/categories/2/posts/67681
1. An add to cart button:
This is pretty standard (style it however you want):
2. inline-cart.liquid
put the file inline-cart.liquid in your snippets folder.
This will be called from your theme.liquid file like this: {% include 'inline-cart' %}
The cart-top and cart-bottom divs allow for the space between top and bottom of cart. Style to your hearts content.
3. cart_tab.html
Because the cart updates information all over the place, you need some way of telling it where to find those things to update. I have a little cart tab that shows the count and also has a checkout button. add the snippet in the file cart_tab.html into theme.liquid
On my product page, I also have a message that pops up when you add an item to the cart, asking if you want to see the cart or checkout.
This is made possibly by a placeholder div that gets content written into it!
<div id="add-to-cart-msg"></div>
4. inlineCart.js
Add jquery.inlineCart.js to your assets folder, for me called like this in theme.liquid:
{{ 'monolitho.js' | asset_url | script_tag }}
5 . jquery.hideIinlineCart.js
This does the fancy hide/show stuff for the inline cart. (note that you need jquery for this!)