{% include 'variables' %}

A Javascript library to power your Shopify theme's cart.

Download Cart.js v{{ version }}

What is Cart.js?

Cart.js is a very small open source Javascript library that makes the addition of powerful Ajax cart functionality to your Shopify theme a breeze.

It's designed to be simple to use, while providing some really powerful and nifty features, like:

  • Simple, consistent API for cart manipulation;
  • Data API for markup-only use without needing to write a line of Javascript;
  • DOM Binding to dynamically render HTML templates as your cart changes.

You don't need to worry about ensuring your Ajax requests are synchronous, binding event listeners, or updating the DOM.

Loading... You have items in your cart for a total of . 
<p>
    You have
    <strong data-cart-render="item_count"></strong>
    items in your cart for a total of
    <strong data-cart-render="total_price_money_with_currency"></strong>.

    <img src="loader.gif" class="cart-visible-loading" />
</p>

<button data-cart-add="716934999" data-cart-quantity="1">Add Hat</button>
<button data-cart-add="716986707" data-cart-quantity="2">Add 2 Coats</button>
<button data-cart-clear>Clear</button>
Show markup for this example

Can it do more?

Yes! There's a whole lot more to Cart.js, from converting your existing product forms to Ajax with a single attribute to fully dynamic HTML template support.

And if you ever want to write your own Javascript directly, you can hook in to our custom events and API.

You can start learning about Cart.js with the guide, or check out the full reference.

ItemPriceQtyLine Price
  • {property.name}: {property.value}
 -  + ×
You don't have any items in your cart.

<!-- Add to cart form, using Data API -->
<form data-cart-submit="data-cart-submit">
    <label>Select a Product</label>
    <select name="id">
        <option value="716986707">Coat</option>
        <option value="716934999">Hat</option>
    </select>

    <label>Choose a Quantity</label>
    <select name="quantity">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <label>Add a Custom Label <small>Optional</small></label>
    <input type="text" name="properties[Custom Label]" />

    <button type="submit">Add to Cart</button>
</form>

<!-- Cart table, rendered using DOM Binding  -->
<table data-cart-view="data-cart-view">
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th colspan="2">Qty</th>
            <th>Line Price</th>
        </tr>
    </thead>
    <tbody>
        <tr rv-each-item="cart.items">
            <td>
                <strong rv-text="item.title"></strong>
                <ul rv-hide="item.propertyArray | empty">
                    <li rv-each-property="item.propertyArray < properties">
                        <small class="text-muted">{property.name}: {property.value}</small>
                    </li>
                </ul>
            </td>
            <td rv-html="item.price | money Currency.currentCurrency"></td>
            <td>
                <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | minus 1">-</a>
                <span rv-text="item.quantity"></span>
                <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | plus 1">+</a>
            </td>
            <td>
                <a href="#" rv-data-cart-remove="index | plus 1">&times;</a>
            </td>
            <td rv-html="item.line_price | money Currency.currentCurrency"></td>
        </tr>
        <tr rv-show="cart.item_count | lt 1">
            <td colspan="5">You don't have any items in your cart.</td>
        </tr>
    </tbody>
    <tfoot rv-show="cart.item_count | gt 0">
        <tr>
            <td colspan="4" rv-html="cart.total_weight | weight_with_unit"></td>
            <td rv-html="cart.total_price | money Currency.currentCurrency"></td>
        </tr>
    </tfoot>
</table>

<img src="loader.gif" width="16" height="11" class="cart-visible-loading"/>
Show markup for this example

Further Questions

Is it stable?

Cart.js is one of the most widely used front end Shopify libraries. It's being used in production by a vast number of Shopify stores, including our own clients.

While it doesn't receive frequent updates, it is generally maintained and we do make the effort to respond to bug reports and feature requests in a timely manner.

If you're interested in using Cart.js, we'll be happy to answer any questions you have or help you get up and running.

Who's using it?

Aside from our own clients (some of whom are running very sizable Shopify stores), a number of other sites are using Cart.js in the wild. Check out the Built with Cart.js page for a list (don't forget to add your own site once you've built something using the library).

What's the browser support like?

Pretty good! Because the core Cart.js libraries use jQuery for Ajax requests and DOM manipulation, the only limiting factor is the version of jQuery you decide to use. This means that themes using a 1.x version of jQuery with Cart.js will be able to support IE6+, Chrome, Firefox, Safari 5.1+ and up.

If you're using the DOM binding functionality, there are some potential issues with older browser that don't support the ES5 Javascript standard (in practice, this means Internet Explorer 8 and below). See Browser Support in the Guide for more detail.

I have a bug report / feature request.

Please add it to the issues tracker on GitHub.

Can I contribute?

Absolutely! Just head to the GitHub page, fork the repository and manage development through issues and pull requests.

If you're keen to help but don't know where to start, contact me on Twitter.