customers/login

The customers/login template renders the customer login page, which hosts the form for logging into a customer account.

Tip

Refer to the customers/login template and its main section in Dawn for an example implementation.

An example of the customer login template in Dawn

Anchor to LocationLocation

The customers/login template is located in the templates > customers directory of the theme:

└── theme

├── layout

├── templates

| └── customers

| ├── login.json

| ...

...

Anchor to ContentContent

You should include the customer login form in your customers/login template or a section inside of the template.

Optionally, you can include "Forgot your password" and guest checkout options.

Anchor to The customer login formThe customer login form

The customer login form can be added with the Liquid form tag and accompanying 'customer_login' parameter. Within the form tag block, you need to include the following:

Input	`type`	`name`
Email	`email`	`customer[email]`
Password	`password`	`customer[password]`

For example:

{% form 'customer_login' %}

<label for="email">Email</label>

</div>

<label for="password">Password</label>

</div>

</div>

{% endform %}

Anchor to UsageUsage

When working with the customers/account template, you should familiarize yourself with the following:

Linking to the login page
Providing a "Forgot your password" option
Offering guest checkout
Redirecting customers on login

Tip

If you're using a JSON template, then any HTML or Liquid code needs to be included in a section that's referenced by the template.

Anchor to Link to the login pageLink to the login page

When linking to the login page, you need to consider the store's customer accounts settings, as well as the current login status.

For example, you don't need to show any links if customer accounts aren't enabled. If the customer is already logged in, then you can link to the account page instead. If customer accounts are enabled and optional, and the customer isn't logged in, then you can show a link to the register page:

Example

{% if shop.customer_accounts_enabled %}

{% if customer %}

<a href="{{ routes.account_url }}">Account</a>

{% else %}

<a href="{{ routes.account_login_url }}">Login</a>

{% if shop.customer_accounts_optional %}

<a href="{{ routes.account_register_url }}">Create an account</a>

{% endif %}

Anchor to Provide a "Forgot your password" optionProvide a "Forgot your password" option

You can add a password recovery form with the Liquid form tag and accompanying 'recover_customer_password' parameter. Within the form tag block, you need to include an <input /> with the following attributes:

type="email"
name="email"

For example:

{% form 'recover_customer_password' %}

<label for="email">Email</label>

</div>

</div>

{% endform %}

If the password recovery form is submitted successfully, then the customer will receive an email with instructions on how to reset their password.

Anchor to Offer guest checkoutOffer guest checkout

If customer accounts are optional or required, then customers can log in to their account at the first step of checkout:

When customer accounts are optional, you can allow customers to check out as a guest, instead of logging in to an account. You can do this with the Liquid form tag and accompanying 'guest_login' parameter. Within the form tag block, you need to include a submit input. Additionally, to ensure that the form only shows when coming directly from the checkout, you can use the checkout.guest_login attribute of the shop object.

For example:

{% if shop.checkout.guest_login %}

{% form 'guest_login' %}

</div>

{% endform %}

{% endif %}

Anchor to Redirect customers on loginRedirect customers on login

By default, when a customer logs in, they're directed to the customer account page. You can change this by using the return_to parameter of the Liquid form tag.

The following example shows how to direct customers to the collection list page URL:

{% form 'customer_login', return_to: routes.collections_url %}

{% endform %}

Was this page helpful?