The cart template renders the cart page, which provides an overview of the contents of a customer’s cart. The overview is typically shown in a table format with a row for each line item.

The cart object

You can access the Liquid cart object to display the cart details.

Understand line items

A line_item is a single line in a shopping cart that records which variant of a product was added, and the associated quantity. For example, if a customer adds both a size medium and size large of the same t-shirt to their cart, then each t-shirt has its own line item.

The cart template should include a table where each line item has a row:

Proceed to checkout

To let customers proceed to checkout from the cart, you need to output the cart line items inside a <form> element. The form element needs to have attributes of action="{{ routes.cart_url }}" and method="post".

The form element also needs to include an <input> with attributes of type="submit" and name="checkout". This input triggers proceeding to checkout.

Remove line items from the cart

You should give customers the option to remove a line item from their cart. You can do this by including an <a> element with each line item, whose href attribute references the url_to_remove attribute of the line_item object:

Update line item quantities

You should give customers the option to update line item quantities in their cart. You can do this by including an <input> element with each line item that has the attributes of name="updates[]" and value="":

To actually trigger an update when a quantity input is changed, you can include an <input> with an attribute of type="submit" in the cart <form>:

Submitting the form with this input will reload the page with updated quantities.

Cart notes and attributes

You can give customers the option to include additional information with their order through cart notes and attributes.

Cart notes

To capture a cart note, include an HTML input, commonly a <textarea>, with an attribute of name="note" within the cart <form>:

This value is accessible through the note attribute of the cart object.

Cart attributes

To capture a cart attribute, include an HTML input with an attribute of name="attributes[attribute-name]" within the cart <form>:

Any values are accessible through the attributes attribute of the cart object.

Line item properties

When items are added to the cart, they can have line item properties included with them. You can display these properties on the cart page by looping through each property: