cart

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.

Anchor to LocationLocation

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

Anchor to ContentContent

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

Anchor to The cart objectThe cart object

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

Anchor to UsageUsage

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

Anchor to Cart line itemsCart 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:

Anchor to Proceed to checkoutProceed 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.

Anchor to Remove line items from the cartRemove 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:

Anchor to Update line item quantitiesUpdate 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="{{ line_item.quantity}}":

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.

Anchor to Show cart and line item discountsShow cart and line item discounts

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.

Anchor to Support cart notes and attributesSupport cart notes and attributes

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

Anchor to Cart notesCart notes

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.

Anchor to Cart attributesCart attributes

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.

Anchor to Display line item propertiesDisplay 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: