Building Your Cart Template

1. The Cart Template and the Global cart Object

Just as a specific product page is rendered by templates/product.liquid, the shopping cart page, accessible at your-store.com/cart, is rendered by templates/cart.liquid (or templates/cart.json in modern themes).

The most important tool for this template is the global cart object. This Liquid object is available on every page of your theme, but its primary purpose is to provide all the necessary information to build the cart page. It contains everything from the list of items to the total price.

2. Building the Cart's Structure

To build a functional cart, we need two main things:

1. A form that can submit information to Shopify's backend.
2. A loop to display each product the customer has added.

The Cart Form

From your experience with HTML, you know that forms are used to send data to a server. In Shopify, we don't use a standard <form> tag for the cart. Instead, we use a special Liquid tag: {% form 'cart', cart %}.

This tag does two things for us:

• It generates the correct <form> HTML with the right action and method attributes to communicate with Shopify's cart endpoint.
• It links our form to the global cart object, which is required for it to function.

Displaying Line Items

Inside our form, we need to display each item. The cart object has a property called items which is an array of all the line items in the cart. A line item represents a specific product variant and its quantity.

We can loop through this array using a standard Liquid for loop: {% for item in cart.items %}. Inside this loop, we have access to all the details of each line item.

Let's watch a video that puts all of this together in a practical demonstration.

As you saw in the video, the basic structure for displaying cart items is:

{% comment %} If the cart is empty, show a message. {% endcomment %}
{% if cart.empty? %}
  <h1>Your cart is empty</h1>
  <a href="{{ routes.all_products_collection_url }}">Continue shopping</a>
{% else %}
  <h1>Your Cart</h1>
  
  {% form 'cart', cart %}
    {% comment %} Loop through each line item in the cart. {% endcomment %}
    {% for item in cart.items %}
      <div>
        <img src="{{ item.image | image_url: width: 150 }}" alt="{{ item.image.alt | escape }}">
        
        <h2>{{ item.product.title }}</h2>
        <p>{{ item.variant.title }}</p>
        <p>Price: {{ item.price | money }}</p>
        <p>Total: {{ item.final_line_price | money }}</p>
        
        {% comment %} We'll add quantity and remove controls here. {% endcomment %}
      </div>
    {% endfor %}

    <hr>
    
    <h3>Subtotal: {{ cart.total_price | money }}</h3>
    
    {% comment %} We'll add form submission buttons here. {% endcomment %}
  {% endform %}
{% endif %}

3. Making the Cart Interactive

A static list of products isn't enough. Customers need to be able to modify their cart and proceed to checkout. This functionality is achieved with standard HTML inputs that have special name attributes Shopify recognizes.

Updating Quantities

To allow users to change the quantity of an item, we add an <input> field for each line item.

• The input: <input type="number" name="updates[]" value="{{ item.quantity }}">
• The trigger: <input type="submit" name="update" value="Update Cart">

When the "Update Cart" button is clicked, the form is submitted. Shopify's backend sees the name="updates[]" array and updates the quantities for each line item accordingly before reloading the page.

Removing Items

Removing an item is even simpler. The line item object (item) has a special property called url_to_remove that generates a unique URL. We just need to create a link:

• The link: <a href="{{ item.url_to_remove }}">Remove</a>

Clicking this link will instantly remove the item and reload the cart page.

Proceeding to Checkout

Finally, the most important button. To create a checkout button, we add a submit button with name="checkout":

• The button: <input type="submit" name="checkout" value="Checkout">

When this is clicked, Shopify takes the current state of the cart and redirects the user to the secure checkout process.

The Shopify documentation provides clear, concise examples for each of these actions.

Conclusion

Congratulations! You have now built one of the most essential pages of any e-commerce site. By understanding the cart object and its associated form tags, you can create a fully functional and user-friendly cart experience.

Here are your key takeaways:

• The templates/cart.liquid file renders the /cart page.
• The global cart object is the single source of truth for all cart data in Liquid.
• All cart interactions must happen within a {% form 'cart', cart %} block.
• You loop through cart.items to display each line item. Key properties include item.product.title, item.final_line_price, and item.quantity.
• Functionality is enabled through specific name attributes:
  • name="updates[]" for quantity inputs.
  • name="update" for the update button.
  • name="checkout" for the checkout button.
• item.url_to_remove provides a simple link to delete an item from the cart.

In the last two lessons, you wrote HTML for a product card on the collection page and for a line item on the cart page. You may have noticed that they are very similar. Copying and pasting this code isn't ideal, as it violates the "Don't Repeat Yourself" (DRY) principle of software development.

In our next lesson, we will address this directly by learning how to create reusable UI components like product cards using snippets. This will allow us to define our product card markup once and include it anywhere we need it, making our theme more efficient and easier to maintain.