Cart.liquid

This template is used to render the shopping cart page.

This is where the customer can review all the items purchased before proceeding to checkout.

You should always include a condition to check whether the shopping cart is empty or not.

For example:

{% if cart.item_count == 0 %}

To the list all the items in a cart, use the following code:

<ul>
{% for item in cart.items %}
  <li>{{ item.quantity }} x {{ item.title }}</li>
{% endfor %}
</ul>

This example would create a list of all items in the cart including the quantity of each item.

In addition, a cart should include the price of each item, and the total amount of all the purchases.

Example Cart Template

The cart.liquid template requires a <form> to be added to the template in order for the cart to be submitted to the checkout.

<script type="text/javascript">
  function remove_item(id){
    document.getElementById('updates_' + id).value = 0;
    document.getElementById('cartform').submit();
  }
</script>
<form action="/cart" method="post" id="cartform">
  <table id="cart-table" cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <th class="col1">Item</th>
        <th class="col2">Price</th>
        <th class="col3">Qty</th>
        <th class="col4"></th>
        <th class="col5">Total</th>
      </tr>
    </thead>
    <tbody>{% for item in cart.items %}{% capture item_title %}{{ item.title | escape }}{% endcapture %}
      <tr class="{% cycle 'row-a', 'row-b' %}">
        <td class="col1">
          <div class="thumbnail">
            <a href="{{ item.product.url }}" title="{{ item_title }} — {{ item.product.description | strip_html | truncate: 50 | escape }}"> {{ item.product.images.first | product_img_url: 'small' | img_tag: item_title }}</a>
          </div>
          <div class="cart-description">
            <h3><a href="{{ item.product.url }}">{{ item.title }}</a></h3>
            <p>{{ item.product.description | strip_html | truncate: 120 }}</p>
            <p><small>{{ item.note | strip_html }}</small></p>
          </div>
        </td>
        <td class="col2">{{ item.price | money }}</td>
        <td class="col3"><input name="updates[]" type="text" class="quantity" id="updates_{{ item.cart_index }}" onfocus="this.select();" value="{{ item.quantity }}" size="2"/></td>
        <td class="col4"><a href="/cart/change/{{ item.cart_index }}?quantity=0" onclick="remove_item({{item.cart_index}}); return false;" class="cart-remove-button">x</a></td>
        <td class="col5">{{ item.line_price | money }}</td>
      </tr>{% endfor %}
      <tr>
        <td colspan="5" class="subtotal"><h4>Subtotal:   {{ cart.total_price | money }}</h4></td>
      </tr>
    </tbody>
  </table>
  <div id="cart-left">
    <a href="/" class="">« Continue Shopping</a>
  </div>
  <div id="cart-right">
    <input name="update" type="submit" class="button" id="update-cart" value="UPDATE CART">
    <input name="checkout" type="submit" class="button" id="checkout-button" value="Checkout">
    {% if additional_checkout_buttons %}
      <div class="additional-checkout-buttons">
        <p>- or -</p>
        {{ content_for_additional_checkout_buttons }}
      </div>
    {% endif %}
  </div>
</form>

Variables

In cart.liquid you have access to the following variables:

• cart - The current cart.
• handle - The handle of the cart.

In addition, all global variables are available.