The cart.liquid template provides an overview of the items in the visitor's cart. The overview is typically shown in an HTML table, with each line item displayed in a row.

Ex cart

Template considerations

Understanding line items

A line_item is a single line in the shopping cart. The cart.liquid template should display a table with a row for each line item that the customer has added to their cart.

{% for line in cart.items %}
    <!-- line_item info here -->
{% endfor %}

Line items record which variant of a product was added to the cart, and there will be a separate line item for each different variant that was added. For example, if a customer adds t-shirt with size medium to the cart, and adds another t-shirt with size large, there will be two line items: one for the medium t-shirt and one for the large t-shirt.

Going to checkout

The line items must be output within a <form> with the action attribute set to /cart and the method attribute set to post. To go to the checkout page with the items that are in the cart, include an HTML <input> of type submit with the name attribute set to checkout.

<form action="/cart" method="post">
    {% for line in cart.items %}
        <!-- line_item info here -->
    {% endfor %}
    <input type="submit" name="checkout" value="Checkout" />

Removing line items from the cart

To give the visitor an option to remove a line item from the cart, include an anchor tag inside the for loop for cart.items with the following query strings:

{% for line in cart.items %}
    <a href="/cart/change?line={{ forloop.index }}&quantity=0">Remove</a>
{% endfor %}

Updating the quantities of line items

It's good to give your customers the option to change the quantities of line items in their cart. To do this, include an <input> with the attribute name="updates[]". Its value should be set to {{ line.quantity }} to show how many items the visitor has in their cart:

<input type="text" name="updates[]" size="4" id="updates_{{ }}" value="{{ item.quantity }}" />

Finally, include an <input> of type submit inside the cart <form>. Submitting the form will reload the page with the updated line item quantities.

<input type="submit" value="Update quantities">

Cart notes and cart attributes

You can give visitors the option to add more information to an order through the cart page through cart notes and attributes. Cart notes and attributes are like line item properties, but the information is captured on the cart template instead of the product template.

To add a cart note field, include a <textarea> with the attribute name="note".

<textarea name="note"></textarea>

To add fields for cart attributes, include a form element with the attribute name="attributes[some-value]". For example, to save a cart attribute named "Favorite color", you could write the following:

  <label>Please let us know your favorite color</label>
  <input type="text" name="attributes[Favorite color]" value="{{ cart.attributes['Favorite color'] }}" />

Line item properties

On the product.liquid template, customers can enter additional information (like monogramming or uploaded images) to an item with line item properties. If you want to display the line item property that was entered on the product.liquid template in your cart.liquid template, you can loop through the properties attribute of the line_item object:

{% for p in %}
    {% unless p.last == blank %}
        {{ p.first }}:
        {% if p.last contains '/uploads/' %}
            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
        {% else %}
            {{ p.last }}
        {% endif %}
    {% endunless %}
{% endfor %}

Every variant with a different line item property is considered unique, even if they are the same variant.

Want to discuss this page?

Visit the Shopify Community