Created: 2012-03-23 16:08
Updated: 2019-01-24 17:37


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

well documented on Shopify Forums:

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!)

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more