Customer Auth Templates Overview

Customer accounts let shoppers track orders, save addresses, and enjoy a personalized experience. Shopify provides a complete template system for authentication and account management.

Customer Account Templates

Shopify uses specific templates in the templates/customers/ directory:

Template	Purpose
`login.liquid`	Customer login page
`register.liquid`	New account registration
`account.liquid`	Account dashboard/overview
`order.liquid`	Individual order details
`addresses.liquid`	Manage saved addresses
`reset_password.liquid`	Password reset form
`activate_account.liquid`	Account activation (invite flow)

The Customer Object

When a customer is logged in, the customer object is available globally:

{%- if customer -%}
  {# Customer is logged in #}
  <p>Welcome back, {{ customer.first_name }}!</p>
  <p>Email: {{ customer.email }}</p>
  <p>Total orders: {{ customer.orders_count }}</p>
  <a href="{{ routes.account_logout_url }}">Log out</a>
{%- else -%}
  {# Customer is not logged in #}
  <a href="{{ routes.account_login_url }}">Log in</a>
  <a href="{{ routes.account_register_url }}">Create account</a>
{%- endif -%}

Customer Object Properties

{{ customer.id }}              {# Unique customer ID #}
{{ customer.email }}           {# Email address #}
{{ customer.first_name }}      {# First name #}
{{ customer.last_name }}       {# Last name #}
{{ customer.name }}            {# Full name #}
{{ customer.phone }}           {# Phone number #}

{# Order information #}
{{ customer.orders_count }}    {# Total number of orders #}
{{ customer.total_spent }}     {# Total amount spent #}
{{ customer.orders }}          {# Array of orders #}

{# Addresses #}
{{ customer.default_address }} {# Default shipping address #}
{{ customer.addresses }}       {# Array of saved addresses #}
{{ customer.addresses_count }} {# Number of addresses #}

{# Tags and metadata #}
{{ customer.tags }}            {# Customer tags for segmentation #}
{{ customer.accepts_marketing }} {# Marketing opt-in status #}

Route Objects for Account Pages

Shopify provides route helpers for all account-related URLs:

{{ routes.account_url }}           {# /account #}
{{ routes.account_login_url }}     {# /account/login #}
{{ routes.account_logout_url }}    {# /account/logout #}
{{ routes.account_register_url }}  {# /account/register #}
{{ routes.account_addresses_url }} {# /account/addresses #}
{{ routes.account_recover_url }}   {# /account/recover #}

Template Structure

Customer templates live in a special subfolder:

templates/
└── customers/
    ├── login.liquid
    ├── register.liquid
    ├── account.liquid
    ├── order.liquid
    ├── addresses.liquid
    ├── reset_password.liquid
    └── activate_account.liquid

JSON Templates for Customer Pages

You can use JSON templates for Online Store 2.0 customization:

{# templates/customers/login.json #}
{
  "sections": {
    "main": {
      "type": "customer-login",
      "settings": {}
    }
  },
  "order": ["main"]
}

Then create corresponding sections:

{# sections/customer-login.liquid #}

<div class="customer-login section-{{ section.id }}">
  <div class="container container--narrow">
    <h1>{{ section.settings.heading | default: 'Login' }}</h1>

    {%- form 'customer_login' -%}
      {# Form content #}
    {%- endform -%}
  </div>
</div>

{% schema %}
{
  "name": "Customer Login",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Login"
    }
  ]
}
{% endschema %}

Protected Routes

Account pages (except login/register) are automatically protected. If a visitor tries to access /account without logging in, Shopify redirects them to the login page.

{# This only renders for logged-in customers #}
{# templates/customers/account.liquid #}

<h1>Welcome, {{ customer.first_name }}</h1>
<p>Email: {{ customer.email }}</p>

Header Account Links

Add account links to your header:

{# snippets/header-account.liquid #}

<div class="header__account">
  {%- if customer -%}
    <a href="{{ routes.account_url }}" class="header__account-link">
      <span class="visually-hidden">Account</span>
      {% render 'icon-account' %}
    </a>
  {%- else -%}
    <a href="{{ routes.account_login_url }}" class="header__account-link">
      <span class="visually-hidden">Log in</span>
      {% render 'icon-account' %}
    </a>
  {%- endif -%}
</div>

Enabling Customer Accounts

Customer accounts must be enabled in Shopify Admin:

Go to Settings → Customer accounts
Choose account type:
- Disabled: No customer accounts
- Optional: Customers can checkout as guest or create account
- Required: Customers must create account to checkout

Account States

Handle different customer states in your theme:

{%- if customer -%}
  {# Logged in customer #}

  {%- if customer.orders_count > 0 -%}
    {# Returning customer with order history #}
    <p>View your {{ customer.orders_count }} orders</p>
  {%- else -%}
    {# New customer, no orders yet #}
    <p>You haven't placed any orders yet.</p>
  {%- endif -%}

{%- else -%}
  {# Guest visitor #}
  <p>Log in or create an account to track orders.</p>
{%- endif -%}

Customer Tags

Use customer tags for personalization:

{%- if customer -%}
  {%- if customer.tags contains 'VIP' -%}
    <p class="badge badge--vip">VIP Customer</p>
  {%- endif -%}

  {%- if customer.tags contains 'wholesale' -%}
    <p>Wholesale pricing applied</p>
  {%- endif -%}
{%- endif -%}

Basic Account Styles

.customer-section {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md);
}

.customer-section__heading {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.customer-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.customer-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.customer-form__field label {
  font-size: 0.875rem;
  font-weight: 500;
}

.customer-form__field input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.customer-form__submit {
  margin-top: var(--spacing-md);
}

.customer-form__links {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-lg);
  font-size: 0.875rem;
}

Practice Exercise

Set up customer account templates:

Create a basic login page
Add account link to header
Display customer name when logged in
Show different content for guests vs customers

Test by:

Creating a test customer account
Logging in and out
Verifying protected routes redirect

Key Takeaways

Customer templates live in templates/customers/
customer object is available when logged in
Route helpers like routes.account_login_url
Protected routes auto-redirect guests to login
Customer tags enable personalization
JSON templates work for Online Store 2.0
Account settings configured in Shopify Admin

What’s Next?

The next lesson covers the Register Page with form handling and validation.