tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 11: Customer Accounts – the Setup

Shopify Theme from Scratch Part 11: in this tutorial we’re going to be taking preliminary steps to prepare for the rebuilding of the customer accounts templates.


part11_banner

The last set of templates we need to work on are the customer accounts templates. The customer accounts templates consist of seven .liquid files that allow returning customers to create an account, view their previous orders, set their default addresses, and more.

Shopify provides default customer account templates, but we’re going to rebuild each template from scratch so that they look consistent with the rest of our themes (you’ll see later in this Part that the default customer account templates look nothing like our current theme).

But, before we move on to these new templates, we need to take some preliminary steps. Let’s gitter done!

1. Enable customer accounts in Settings

The first thing we need to do is enable the Customer Accounts feature in our shop. To do this, log in to your shop’s admin and navigate to Settings > Checkout and scroll down to the “Customer Accounts” section.

Select the “Accounts are optional” option and click the “Save changes” button. Your shop now has the Customer Accounts feature enabled.

enable customer accounts

Figure 11.1: Enabling customer accounts in the admin

2. Create a customer account

The next thing we need to do is create a mock customer account so that we can preview and test out the customer account templates in the next Parts.

Using the URL bar in your browser, navigate to your-store-name.myshopify.com/account/register. You will see the following:

default_register_form

Figure 11.2: the default Shopify register.liquid template

As I mentioned earlier in the intro, Shopify actually provides all of the customer templates for you, but they’re no good if they don’t look like the rest of your theme, right? In the next Parts we’re going to rebuilt these templates to make them look like the rest of our theme. For now though, we’re going to use Shopify’s default template to create a mock account.

Go ahead and use the register form in Figure 11.2 to create a customer account. Once complete, you should see your new customer account in the “Customers” section of your admin (Figure 11.3).

test account

Figure 11.3: The customer account you created will appear in the Customers page of the admin

3. Add all the Customer Account templates

Next we’re going to add the customer account templates to our Template Editor so that we can edit them. Navigate to your Template Editor, and click the “Add a new template” button in the sidebar. Add all seven of the available customer account templates (Figure 11.4).

customer account templates list

Figure 11.4: Adding the seven customer account templates

You should now have the following in your theme’s Template Editor:

  • customers/account.liquid
  • customers/activate_account.liquid
  • customers/addresses.liquid
  • customers/login.liquid
  • customers/order.liquid
  • customers/register.liquid
  • customers/reset_password.liquid

4. Enable the “theme” customer layout

Finally, we’re going to tell our theme to use our own customer account templates. This is done through a field in the Theme Settings titled “Customer Area Layout”.

Navigate to the Theme Settings, and under Additional Layouts > Customer Area Layout, select “theme” (Figure 11.5). Hit save.

theme setting

Figure 11.5: Telling the theme to load the theme’s customer account templates

Now that we’ve selected the “theme” option, our theme will use the templates that we added in Step 3 from now on. You’ll see this if you go back to the register page (your-store-name.myshopify.com/account/register) that we visited in Step 2. Instead of the default Shopify template that we saw earlier (Figure 11.2), the theme will now load the customers/account.liquid template we added earlier.

register_after

Figure 11.6: your theme now uses the customer account templates in your Template Editor!

Your customer account templates will look a little jumbled now because we haven’t applied our own markup and CSS yet, but we’ll take care of that in the next Parts :)

That’s all for now!

← Back to table of contents

6 Comments

  • Ray
    Ray on July 4th, 2015

    Hello,

    First of all, this is such a great tutorial..

    I have question regarding on “Customer Area Layout”, I can’t find this..

    Thanks.

  • Luke
    Luke on July 23rd, 2015

    What do you mean by Theme settings and how do you navigate towards it?

  • Jonny
    Jonny on August 4th, 2015

    I cant find the above either!

  • Mike
    Mike on November 2nd, 2015

    Ray, Luke, Jonny:
    Step 4 of the tutorial appears to be deprecated in the current version of Shopify. It stumped me at first too.

    To get Shopify to use our own templates for the customer account pages, remove the first line {% layout settings.customer_layout %} from each customer template (theme_root/templates/customers/*.liquid)

  • Eloise
    Eloise on November 5th, 2015

    Thank you very much for these articles. They’ve been very helpful!

    For anyone looking for the Customer Area Layout and cannot find it, I think it’s part of an old version of Shopify. I think the current version uses the themes templates automatically.

    In your customer templates there is this code at the top – {% layout settings.customer_layout %} Remove this and you will get the same result as Figure 11.6.

    Hope that helps anyone who runs into this in the future

  • Josef Habr
    Josef Habr on February 16th, 2016

    Hi, I wonder where I find that {% layout settings.customer_layout %} ? Is it now gone? It is strange that the system lets me create a new account.xxx.liquid so easily but I really don’t see a way to use it… Perhaps only via an app somehow?

Post a comment