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.
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.
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:
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).
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).
You should now have the following in your theme’s Template Editor:
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.
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.
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!