Please note this post has not been updated and may contain broken links or outdated information.

Last time, we looked at placing an ajax’ed Add to Cart button everywhere. The next place we want to ajax-up will be the Cart page. When the user updates the cart from that page, we will want to do it without a page load. The base theme I am modifying for this is the free Solo theme. The walkthrough should be enough to help you apply to any theme with little changes. This builds off the work done in the previous piece, so if you haven’t done that yet, you might want to.


  • Get a copy of my modified jQuery Shopify API. Upload to your assets folder.
  • Get a copy of my ajaxify-shop.js. Upload to your assets folder. If you did the previous tut on ajax add to cart, you will need to go and fetch a new copy.

There is really only one template to edit.


We need to put some hooks, so we can update info on the page. At the bottom of cart.liquid you will see

{% else %}
Your shopping cart is empty.
Continue shopping...
{% endif %}

Change it to

{% endif %}
0 %}display: none;{% endif %}
Your shopping cart is empty.
Continue shopping...

This has the effect of putting the “Your cart empty…” message on the page, and hiding it from view if there’s any items in your cart. Doing this, the element remains on the page, so we can hide the form and reveal the message if someone removes all the items from their cart on this page. You can change the tag to something else (div, span, etc…) and have more complex html inside. The important part: preserve the id=”empty” on the container for this message, and the inline style to hide the element. Find
Total: {{ cart.total_price | money }} And add a class=”cart-total-price” to the span, Total: {{ cart.total_price | money }} Any element you add class=”cart-total-price” will be updated with the cart total $ whenever the cart changes. Keep reading – there’s a Bonus Round for more on this at the end. Now we need to put some hooks so we know what to change in the form itself. Now, the default Cart form here uses tables for layout, but you could easily change it all to any sort of markup you want, and just apply these classes. Find START PRODUCT {{ forloop.index }} And add the class cart-line-item to the row.

This will be useful to know what row to remove entirely if the items are set to 0. Then find {{ item.line_price | money }}. This is where the subtotal for the items in this row resides. We will add a unique class to the element holding the price – this is how we will know which prices to update when changes are made. So add class=”cart_line_item_price_{{ }}” to the strong tag, so the line should now look like this: {{ item.line_price | money }} And thats it. You should be good.

Bonus Round

The script is now rigged up to update any element with the class of cart-total-price. So let’s go add it to the nav bar, up near where the number of items is listed. Open layout/theme.liquid, find the div id=”gocart”,
and add {{ cart.total_price }} You should end up with something like this inside #gocart:

{{ cart.item_count }} {{ cart.item_count | pluralize: “Item”, “Items” }} {{ cart.total_price }}

You can place that span anywhere you want really. And that’s pretty much that. As usual, you can view the entire theme in action or up on github.

Vous en voulez plus? Rejoignez notre infolettre.

Nous aimons partagé nos conseils à propos du web, nos idées et nos projets.


Vous pouvez vous désinscrire en tout temps. Contactez-nous pour plus de détails.