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.

Here is an example of the required elements for the cart form.

<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.

Additional Form Parameters

Unique Line Items

By default, all new line items that have an additional custom note attached to them, will be added as a unique line item to the cart.

This means that the customer can add the same product variation to the cart with different custom notes and each will be treated as a separate line item. These unique line items can also be individually managed in the cart and the quantity field can be changed independently from all other line items, enabling the customer to order multiple quantities of the same custom line item.

Please see Asking your customer for additional information for further information on how to add a custom note to a product.

If you require a product to be added to the cart as a unique line item, even without a custom note, you can force this behaviour by adding the parameter unique=true to the <form> tag in the product.liquid template.

<form method="post" action="/cart/add?unique=true">

Ordering Multiple Quantities

You may wish to allow a customer to order more than one item at a time when they add products to the cart.

This can be achieved simply by providing a quantity parameter within the <form> in the product.liquid template.

The parameter can be hard-coded in the <form> tag. For example,

<form method="post" action="/cart/add?quantity=2">

Alternatively, you can allow the customer to choose the quantity to order by adding an input text field, or even a select drop down or radio buttons field.

An example of a text field would be

<input type="text" name="quantity">

Similarly, a select or radio buttons field can be created within the form, providing that the name quantity is used for the field.