customers/login.liquid

The customers/login.liquid template is used by visitors to log in to their customer account page.

Ex login

Template Considerations

Linking to the log in page

When linking to the log in page, you must take the shop's Customer accounts options into consideration. Inside your theme.liquid template, use the code snippet below to output the proper Customer account links.


{% if shop.customer_accounts_enabled %}
  {% if customer  %}
    <a href="/account">Your Account</a>
  {% else %}
    {{ 'Log in' | customer_login_link }}
    {% if shop.customer_accounts_optional %}
      <span>or</span>
      {{ 'Create an account' | customer_register_link }}
    {% endif %}
  {% endif %}
{% endif %}

Here is a breakdown of the code snippet:

  • {% if shop.customer_accounts_enabled %} checks if the shop has Customer accounts enabled. If it is disabled, we don't need to output anything
  • {% if customer %} checks if the customer is logged in. If they are, offer a link to their account page
  • The customer_login_link filter turns a string into a link to the log in page
  • {% if shop.customer_accounts_optional %} checks to see if Customer accounts is set to optional in the shop. If it is, offer a link to the register page using the customer_register_link filter

Outputting the log in form

To output a form that visitors use to log in to their customer page, initialize the form tag with the parameter 'customer_login'. Within the form, include the following:

  • an input of type email with the name attribute customer[email]
  • an input of type password with the name attribute customer[password]

Below is an example of a simple log in form:


{% form 'customer_login' %}

{{ form.errors | default_errors }}

<label for="customer_email">Email Address</label>
<input type="email" name="customer[email]" />

<label for="customer_password">Password</label>
<input type="password" name="customer[password]" />

<input type="submit" value="Sign In" />

{% endform %}

Offering a "Forgot your password" option

To output a form that visitors can use to recover their password, initialize the form tag with the parameter 'recover_customer_password'. Within the form, include an input of type email with the name attribute email.

Below is an example of a simple password recovery form:


{% form 'recover_customer_password' %}

{{ form.errors | default_errors }}

<label for="customer_email">Email Address</label>
<input type="email" name="customer[email]" />

<input type="submit" value="Submit" />

{% endform %}

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

Offering customers to check out as guests

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

Checkout login link

If customer accounts are optional, you can use a form with the parameter guest_login to allow the customer to check out as a guest instead of logging in to an account.

It's recommended that you wrap this form in a check for shop.checkout.guest_login. This ensures that the form's displayed on the login page only when coming directly from the checkout, and not when coming from another part of your storefront:

{% if shop.checkout.guest_login %}
  {% form 'guest_login' %}
    <input type="submit" value="Continue as Guest" />
  {% endform %}
{% endif %}

Want to discuss this page?

Visit the Shopify Community