Today we’re going to set up four of the seven customer account templates. You may be thinking “whoa whoa, four templates in one tutorial!? You’re crazy!!”. Don’t sweat! A lot of these templates are really simple and we can re-use a lot of the same CSS classes across templates.

Let’s dew this!

1. Add customer links to the header

The first thing we want to do is add a couple of links in our theme’s header bar so that customers can log in to their customer account or create a customer account. Remember, anything that we want to appear on every page of our theme should go inside theme.liquid.

Open theme.liquid and add in the following code.

...

  

    

      

        {% if customer %}
        Logged in as {{ customer.first_name }} · {{ 'Log out' | customer_logout_link }}
        {% else %}
        {{ 'Log in' | customer_login_link }}
        {% if shop.customer_accounts_optional %}
        or {{ 'Create an account' | customer_register_link }}
        {% endif %}
        {% endif %}
      
      

        

          
          
        
          
      
     
       
...

Now let’s add a bit of CSS to line up the links nicer. Open style.css, and up in the “theme.liquid” section, add the following line in red:

...

/**** theme.liquid ****/

.container{width: 960px; margin: 0 auto;}
.header-toolbar{background:#000; color: #fff; font-size:12px; padding:10px 0;}
.customer-links{padding:7px 0;}

...

You should now see two link in the top left corner of your theme for logging in and creating an account (Figure 12.1).

2. Set up login.liquid

2.1. Add the login form

Open the login.liquid template. Delete the contents that are currently in it and add the following code:

{% layout settings.customer_layout %}



  
  

    
Customer Login
   
        
    {% form 'customer_login' %}
    {{ form.errors | default_errors }}
    

      

        Email Address
        
      
      

        Password
        
      
      

        Forgot your password?
      
      

        
      
    
    {% endform %}
  
  
 

The “{% layout settings.customer_layout %}” line is inserted at the top of every customer account template. It tells the template which layout to use: either “default” or “theme” (recall in Part 11 how the Theme Settings give you the option to choose a layout for the customer account pages: either Shopify’s default layout or the theme’s layout).

You should now see a form with two fields: Email Address and Password, as well as a link for password resetting.

2.2. Add the password reset form

The login page also includes a form in case a customer forgets his/her password. Let’s go ahead and add the code for that. Still inside login.liquid, insert the code in red at the very bottom:

...

    {% endform %}