The cart page is where a list of all the products that a customer has added to the cart is displayed. Usually the products are displayed in a tabular format.

Let’s get started!

1. Check to see if there’s anything in the cart

The first thing we’ll do is write an if-statement to see if there are any items in the cart. To do this we’re going to access the ‘cart’ object, and check its item_count property.

Open cart.liquid, and replace its contents with the code below.

Your Cart

{% if cart.item_count > 0 %}

{% else %}

You don't have any items in your cart!

{% endif %}

2. Add the markup for the cart table

Let’s start off by adding in the headings in the table. Insert the code in red below:

Your Cart

{% if cart.item_count > 0 %}

  

  
  

    

      

        
 
        
Product Title
        
Price
        
Quantity
        
Total
        
 
        
      
    
  

  {% else %}

  You don't have any items in your cart!

  {% endif %}

Next, we’re going to do a for loop through the line_items array to output the products that have been added to the cart.

What is line_items?

In a nutshell, a line_item is an item that has been added to your cart, or purchased by a customer. The line_item object can be used in places such as the cart template, email order notifications, the Thank You page (Additional Content & Scripts), as well as in apps such as PixelPrinter. You can see the variables of the line_item object here. What’s nice about line_item is that it’s aware of what variant of the product was added to cart.

Here, we’re going to do a for loop through the line_item objects and output them in rows.

Your Cart


{% if cart.item_count > 0 %}

  


  
        {% for item in cart.items %}    
        
        {% endfor %}
      

    

      

        
 
        
Product Title
        
Price
        
Quantity
        
Total
        
 
      
    

    

          

            

                
                
              
            
          
          

            

              {{ item.title }}
            
          
          
{{ item.price | money }}
          

            
          
          
{{ item.line_price | money }}
          

            Remove
          
        
    
     


{% else %}

You don't have any items in your cart!

{% endif %}

Let’s go ahead and add the buttons for updating the cart and proceeding to checkout. Notice that we’re using the ‘btn’ class that we made in Part 5 to make the buttons look consistent. Also note that the buttons are within the opening <form> and closing </form> tags. If you’re ever working on a theme’s cart template and your checkout buttons aren’t working for some reason, you should always check to see if the buttons are within the <form> tags.

      
    

    

      
Subtotal: {{ cart.total_price | money }}
      
      or
          
      {% if additional_checkout_buttons %}
      

        {{ content_for_additional_checkout_buttons }}
      
      {% endif %}    
    

At this point, if you’ve added a product to your cart, your cart template should look like this:

3. Pretty it up with CSS

Open style.css, and insert the following at the bottom:

/**** cart.liquid ****/

.cart-table{width: 100%;}
.cart-table thead{border-bottom:1px solid #ccc;}
.cart-table th{text-align: left; padding:20px;}
.cart-table td{padding:30px 10px 0 10px; }
.item-thumb{border:1px solid #ccc; padding:20px; width: 100px; height:100px;}
.item-qty{width:90px;}
.cart-options{text-align: right;}
.cart-info{padding:7px 25px 0 0;}

Your cart page should now look like this:

4. Add a link to the cart page in the toolbar

Open theme.liquid.

  

    

      Tool bar here!
    
  
...

Replace the “Tool bar here!” text with the following code in red:

 

    

          

            Cart: {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} ({{ cart.total_price | money }})
          
    
  
...

In the code above, we’re using the cart object to output the number of products the customer has in the cart, as well as the total price of the cart.

Your toolbar should now look like this:

That’s all for now!

← Back to table of contents