tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 12: Customer Accounts 1/2

Shopify Theme from Scratch Part 12: in this tutorial we’re going to be build four of the seven customer account templates: login.liquid, register.liquid, reset_password.liquid, and activate_account.liquid.


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.



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).

customer links

Figure 12.1: Two new links for customers to log in or create a customer account.

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 %}

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.

login template

Figure 12.2: login.liquid – we’ll tidy it up shortly.

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 %}

Reset Password

We will send you an email to reset your password. {% form 'recover_customer_password' %} {{ form.errors | default_errors }}
or Cancel
{% endform %}

You’ll now see the password reset form below the login form.


Figure 12.3: Another form is added to login.liquid in case customers forget their password.

2.3. Make the two forms toggle

What we’re going to do next is make it so that the password reset form is hidden by default, and make the “Forgot Password?” link makes the login form and password reset form toggle on every click. Let’s begin by adding some CSS to hide the password reset form, and at the same time tidy up the form a bit.

Open style.css, and add the following bit of CSS at the very bottom:


/**** Customer Accounts  ****/

.customer-login, .guest-login{float:left; width:465px;}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="password"], .form-row label, .form-row select{display:inline-block;}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="password"]{width:250px; border:1px solid #ccc;}
.form-row select{width:250px;}
.form-row label{width:120px;}
.form-row .btn{margin-top:10px;}

Now at the very bottom of login.liquid, add the following jQuery code.


The “Forgot your password?” link will now make it so that the two forms toggle. Click the “Forgot your password?” link, and this…


Figure 12.4: The fields are all lined up now and the password reset form is now hidden.

…will turn into this:


Figure 12.5: When you click the “Forgot your password?” link, the two forms will toggle.

Of course, hitting “Cancel” will do the opposite :)

2.4. Add a success message for the password reset form

Next we’re going to add this small bit of text below that indicates that the password reset form has been successfully submitted. This is done by using the form.posted_successfully Liquid variable and using its value to show the success message.

We’ll begin by adding a little paragraph for the success message. It will be hidden by default, thanks to the CSS that we added in 2.3 (.recover-password,.reset-success{display:none;}). Add the code in red below:



Next, within the password reset form, add the following code in red:


Reset Password

We will send you an email to reset your password. {% form 'recover_customer_password' %} {{ form.errors | default_errors }} {% if form.posted_successfully? %} {% assign reset_success = true %} {% endif %} ...

Here we’re creating a variable called “reset_success” and setting it to true if the password reset form was sent successfully. We’re then going to use the same variable within the jQuery snippet that was added in Step 2.3 to unhide the success message.

Within the jQuery snippet that we added earlier, add the code in red below:

Now, when you submit the password reset form, you will get a nice little confirmation message:

password reset confirmation

Figure 12.6: Confirmation message after a success password reset form submission.

2.5. Add the guest login form

The last thing we’re going to do is add the Guest Login form. This form is only output when you go to check out from the cart page.

Inside login.liquid, add the code below:


    {% endform %}
{% if shop.checkout.guest_login %} {% endif %}

On your storefront, go ahead and add a product to the cart and click the “check out” button on the cart page. You will be taken to the login page again, but this time you’ll see an option to check out as a guest.

continue as guest

Figure 12.7: Before a customer checks out, the customer should be given the option to log in or check out as a guest.

That was a doozie of a template huh? No worries, the other three are much simpler.

3. Set up register.liquid

Open register.liquid and delete the contents that are currently in it. Replace it with the following code:

{% layout settings.customer_layout %}

Create Account

{% form 'create_customer' %} {{ form.errors | default_errors }}
{% endform %}

Notice that in the markup of this template, we’re using a lot of the same classes from the login.liquid template, such as “form-row”. This makes it so that the forms in these templates will look consistent with each other.

To view this template, click on the “Create an Account” link that we created in Step 1. You should now see a neatly-styled register page (Figure 12.8).


Figure 12.8: Customers can create customer accounts on their own via register.liquid.

4. Set up reset_password.liquid

Open reset_password.liquid and remove whatever’s in there now. Replace its contents with the following code:

{% layout settings.customer_layout %}

Reset Account Password

Please enter a new password for {{ email }} {% form 'reset_customer_password' %} {{ form.errors | default_errors }}
{% endform %}

To view this template, you must send out a “reset password” email through the admin first. Go to the Customers page in your admin, and select the customer account that you created in Part 11. Click the “Reset password” button in the top-right corner, and hit Submit.


Figure 12.9: You can send a password reset email through the “Reset password” button in the Customer’s admin page.

An email will then be sent to the email assigned to your test customer account. Within it you’ll find a link to reset the password. Click that link and you’ll be taken to the reset_password.liquid page.

password reset email

Figure 12.10: The reset_password.liquid can be viewed by clicking the link in the password reset email.

Customers can change their passwords through this template :)


5. Set up activate_account.liquid

Open activate_account.liquid. Replace its contents with the code below:

{% layout settings.customer_layout %}

Activate Account

Please enter a password for your account. {% form 'activate_customer_password' %} {{ form.errors | default_errors }}
{% endform %}

Viewing this template requires an extra step as well. What you’ll have to do first is add a new customer to your shop by clicking the green “Add customer” button in the top right of the Customers page in the admin.

add customer

Figure 12.11: The “Add Customer” button will register a new customer in the Customers page of the admin, but this new customer will not have his/her own customer account yet.

Go ahead and fill this form out to create another customer for your shop. The difference between this new customer and the customer you created in Part 11 is that this new one does not yet have a customer account for viewing past orders and changing addresses. In other words, the customer is registered in the “Customers” page in the admin, but does not yet have his/her own customer account for logging in through the login.liquid template.

send account

Figure 12.12: Clicking the “Send account invite” button will open a lightbox containing an activation URL.

Copy the URL that is inside the pop-up, and paste it into the URL bar of your browser. Hit enter to go to that URL.

account url

You will now see the contents of the activate_account.liquid template that we just set up. Again, since we’re using the same CSS classes, the look-and-feel of this template is consistent with the others.

active account template

Take a breather!

That’s all for today! Pat yourself on the back for slaying four templates all at once (^0^)/. Just three more customer account templates to go!

← Back to table of contents


Post a comment