tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 13: Customer Accounts 2/2

Shopify Theme from Scratch Part 13: in this tutorial we’re going to be build the last three customer account templates: account.liquid, order.liquid, and addresses.liquid.


Today we’re going to finish the last set of customer account templates. We’ve got three more templates to go: account.liquid, order.liquid, and addresses.liquid.


1. Run some orders

The first thing we’re going to do is run some test orders through a customer account so that we can see a list of orders on our account.liquid and order.liquid templates.

Log in to the customer account that you created in Part 11. Add some products to the cart, proceed to check out, and complete the order. Repeat this process a few times until you have about 2-3 test orders.


Figure 13.1: Run some test orders until you have 2-3 orders for the customer

2. Set up account.liquid

The account.liquid template is where the customer can see an overview of his/her account. This includes information such as his/her primary address and recent orders.

The first thing we’ll do is split up the code into two columns. Open account.liquid, remove its contents, and insert the code below.

{% layout settings.customer_layout %}

Account Details and Order History

Let’s add the customer’s information in the left sidebar using the variables of the Customer object. We’re going to output the customer’s name, email, and default address.


The user’s account details is now shown in the left sidebar.

user account info

Figure 13.2: The customer information is output in the left-hand column

Now let’s add a table to output the customer’s past orders. We’re going to do a for loop through the “orders” array that is part of the Customer object. We can then use each order in the array to output any order details from the Order object.



Finally we’ll add some CSS to make things prettier. Open style.css, and insert the following CSS code at the bottom:

.account-user{ margin-right:60px; width:172px; font-size:14px;}
.account-user p{margin:0;}
.account-table{width: 728px;}
.account-table table{width:100%; text-align:left;}
.account-table td{padding-top:15px;}
.account-table tbody, .last-row td, .account-user .status{padding-bottom:15px;}
.account-table tfoot{text-align:right; border-top:1px solid #ccc;}
.cart-headers{border-bottom:1px solid #ccc;}

Your account page is now complete!

account page final

3. Set up order.liquid

The order.liquid template is where the details of a single order are displayed. To see this template, click on one of the order links from account.liquid.

We’re going to split up the template into two columns, like we did with account.liquid in Step 2. We can do this by re-using the same markup. Open order.liquid and replace its contents with the following:

{% layout settings.customer_layout %}

Order {{ order.name }}

We’re going to output the order details in the left-hand column. Again we’re going to use the Order object to do this. Paste the code in red below:

You will now see some order details in the left column.


Figure 13.3: Outputting the order details in the left-hand column

Next we’ll output the products that the customer ordered on the right-hand side. We’ll do this by using the Line Item object, the same one that’s used on the cart page and email templates.

Add the code in red below:


Let’s add a bit of CSS to line things up. Open style.css, and insert the code in red at the very bottom of the file:

.account-table tbody, .last-row td, .account-user .status{padding-bottom:15px;}
.account-table tfoot{text-align:right; border-top:1px solid #ccc;}
.cart-headers{border-bottom:1px solid #ccc;}

.return{border-top:1px solid #ccc; padding-top:15px;}

Your order.liquid template is now complete!


4. Set up addresses.liquid

The addresses.liquid template is where the customer can view and modify all of the addresses he/she has entered, as well as add new ones. To access the addresses.liquid template, click the “View Addresses” link in account.liquid.

4.1. Make sure your theme.liquid file contains “shopify_common.js”

In earlier versions of Part 1: theme.liquid, I had forgotten to include “shopify_common.js” in Step 2 as one of the required scripts. If you’re an earlier follower to this series, you may not have “shopify_common.js” in your theme.liquid file. Please take a second to go back to theme.liquid and ensure “shopify_common.js” is being loaded. Sorry for the confusion! Continuing on…

4.2. Set up the Add Address form

We’ll start off by adding a form that customers can use to add new addresses. This form will be hidden by default and we’re going to make a button toggle it on and off.

Open addresses.liquid and replace its contents with the following code:

{% layout settings.customer_layout %}

Manage Account Address

Now, you should see a button that, when clicked, presents a nice form for entering a new address.

add new address

Figure 13.4: The add address form in address.liquid

4.3. Add some Javascript for outputting regions

You’ll notice that when you select a country, you’re not presented with any options for a province/state/region. What we need to do is add some Javascript for enabling this. At the bottom of addresses.liquid, add the following script in red:


Now when you select a country, some Javascript will kick in to show an additional dropdown for selecting regions for the selected country.


Figure 13.5: when you select a Country, a dropdown containing regions of that country is displayed.

4.4. Output all of the customer’s addresses

Next we’re going to loop through the addresses array that is part of the Customer object to output each address that the customer has added. For each address, we’re going to output a link for editing and removing the address, as well as a hidden form used for editing the address.

Right below the add address form, add the code in red below:

    {% endform %}

{% paginate customer.addresses by 10 %} {% for address in customer.addresses %}

{{ address.street }} {% if address == customer.default_address %}(Default Address){% endif %}

{{ "Edit" | edit_customer_address_link: address.id }} or {{ "Delete" | delete_customer_address_link: address.id }}

{{ address.first_name }} {{address.last_name }} {{ address.company }} {{ address.street }} {{ address.city }} {% if address.province_code %}, {{ address.province_code }}{% endif %} {{ address.country }} {{ address.zip }} {{ address.phone }}
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}

← Return to account page