Shopify Theme from Scratch Part 6: cart.liquid
Shopify Theme from Scratch Part 6: in this tutorial we’re going to be building the cart.liquid template,where customers can see what they have added to their basket before proceeding to check out.
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 %}
{% 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 %}
{% 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.
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.
...
Replace the “Tool bar here!” text with the following code in red:
...
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!
4 Comments
Hi,
I kind of follow your instructions through and through and still got an error,
Liquid error: Expected collection handle (String) but got NilClass.
Any idea how to fix that?
Thanks.
Where are you seeing the error? Do you have a screenshot or link you can send me?
section 2.
Closing tag for Price, reads and is highlighted as an error.
Great tutorials so far, thank you…..looking forward to the next 9 parts. :)
^^ “”