cart

The cart template is located in the templates directory of the theme:

You should include the cart object in your cart template or a section inside of the template.

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

When working with the cart template, you should familiarize yourself with the following:

• Using cart line items
• Letting customers proceed to checkout from the cart
• Providing an option to remove line items from the cart
• Updating line item quantities
• Showing discounts
• Using cart notes and attributes
• Displaying line item properties in the cart

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:

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.

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:

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.

Because discounts can apply to an entire cart or to individual line items, you should show discounts with the cart total summary and individual line item displays. To learn more about discounts and how to build discount displays, refer to Discounts.

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

To capture a cart note, include an HTML input, commonly a <textarea>, with the attributes name="note" and form="cart" in the main-cart-footer.liquid file:

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

To capture a cart attribute, include an HTML input with the attributes name="attributes[attribute-name]" and form="cart" in the main-cart-footer.liquid file:

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

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: