From Shopify Wiki

Enabling Customer Accounts

To enable customer accounts, select Preferences > Checkout and Payments > Customer Checkout settings. There are three options available, as noted below.

Guest Checkout only

This option is enabled by default.

When a customer clicks on checkout, they are directed to the standard Shopify checkout page. Customers are required to fill out their email and billing/shipping address information each time they purchase from your shop.

Guest Checkout with Optional Sign In

When customers click on checkout, they are directed to a customer/guest login screen as shown below.

If a customer has an active account already, they can save time by logging in with their email and password. If they enter a valid email/password, they will be directed to the checkout page with their customer information pre-filled.

Selecting 'Guest Login' will continue to the checkout page as a guest, similar to the default Guest Checkout behaviour as described above.

If they logged in with their customer account, their address information will be prefilled, and there will be a select dropdown with additional addresses (if any) from which they can quickly fill out their address information. If they wish to use a new address, they can simply update the required fields.

If they logged in as a guest, they will need to fill out their email and address information as usual. However, at the end of the checkout process, there will be an option to create a customer account. The customer can enter a password and an account, based on their email address provided during the checkout, will be created. An email will be generated and sent when a customer creates a new account.

Sign In Required

When this option is enabled, a customer will not be allowed to checkout from your shop unless they log into their customer account. As well, customer accounts must be created in advance by the merchant. With this option, the merchant is able to control which customers are able to purchase from their shop. The most common use case for this scenario would be a membership-only shop.

Please note: A Customer Account must be created by the merchant in order for a customer to checkout from your shop

Creating a Customer Account

You must enable customer account login as described above from the Checkout and Payments preferences screen.

For new customers, they can create an account on the Order Confirmation page a.k.a. the 'Thank you page' (ie. after they've made a first order). You need to make sure you have "Guest Checkout with Optional Sign In" checked off.

With "Guest Checkout with Optional Sign In" checked off, there is no register link or page. This may go against what people have been accustomed to when signing up to run-of-the-mill websites. The rationale behind this process goes like this: Shopify minimizes how many loops a client needs to go through to purchase something and register. When a first order is completed — on the Thank you page —, the customer has already provided all his info. All he has left to do then to sign up is provide a password.

To create an account for an existing customer:

• select the customer in question and go to the Customer Details page.
• Select the Send Account Invite link.
• A lightbox with a draft invite email will be shown, which you can review and send.
• Once the customer receives the email, they can click on the activation link, which will direct them to enter a password for their account.

Once an account is active, the customer will be able to use their email/password to log in when they encounter the customer login screen during checkout.

Disabling a Customer Account

To disable a customer that is already active:

• go the customer Details page of the customer
• select the disable account link.
• Confirm that you wish to disable the account.

If your shop is configured to require sign in before checkout, that customer will no longer be able to check out from your shop. If customer login is optional, they will still be able to continue as a 'Guest'.

Password Reset

Should a customer forget their password, they may contact you (the merchant) to request a password reset.

• Select Reset Password from the customer Details page
• An email will be send to the customer's email which contains instructions on how to reset the password.
• They can also request to reset their password from the link on the Customer Login screen during checkout.

Customer Account email templates

Three new email templates are available with Customer Accounts. Email templates are editable, should you wish to customize the content. Email templates are located under Preferences > Email and Notifications:

• Customer Account Activation - Sent to customer with information on how to activate their account
• Customer Password Reset - Sent to customer when they wish to reset their password
• Customer Account Welcome - Sent to customer when they activate their account

Managing Customer Accounts

Customers can be searched/filtered by Account Status by selecting Account Status as one of the filters in the Customer Index screen.

On the customer Details page, there is an account status field:

• disabled - no account is associate with this customer
• invited - an account creation invite email was sent to this customer
• enabled - account is enabled for this customer
• declined - an invitation was sent, but the customer declined to accept the invitation

Enable Customer login on Storefront

With Customer Accounts, Shopify supports customer login to your storefront. Once logged in, customer can view their account details, order history and address information.

To enable customer login, you need to modify your theme.liquid file

Modifying theme.liquid

You must provide a link to the account login link on your shop. You can do this by modifying your theme.liquid template and add the following snippet:

{% if shop.customer_accounts_enabled %}
  {% if customer  %}
    <a href="/account">Welcome {{ customer.first_name }}</a> | {{ "Logout" | customer_logout_link }}
  {% else %}
    {{ "Login" | customer_login_link }}
  {% endif %}
{% endif %}

This will display a customer login link if a customer is not logged in. If they are logged in, then they'll see a Welcome text and a link to log out.

When a customer logins into your storefront, they will be presented with a login screen.

Once logged in, they will be redirected to their customer account overview page:

From here, they can:

• see overview of their account and order history
• view detailed information about their past order
• view/edit/delete existing addresses associated to their account, which can help them speed through the checkout process.

Customizing Customer Pages on your Storefront

Changing Layout template

By default, customer templates are rendered with a default Shopify layout. You can change what layout file is used to render the customer templates. For example, if you wish to match the customer pages with the rest of your theme, you can change the layout file to be the theme.liquid layout file from your theme.

To change the setting, go to the Theme Settings tab and modify the Additional Layouts settings section.

When modifying your theme.liquid layout file for use with customer pages, you must:

• include required customer javascript files
• include a customer-specific stylesheet (or modify your existing stylesheet and include styles for the customer related classes and ids.

Required customer javascript files

The following javascript is required for the customer area:

  {% if template contains 'customers' %}
    {{ "shopify_common.js" | shopify_asset_url | script_tag }}
    {{ "customer_area.js"  | shopify_asset_url | script_tag }}
  {% endif %}

For Example:

<head>
  ...
  ...
  {% if template contains 'customers' %}
    {{ "shopify_common.js" | shopify_asset_url | script_tag }}
    {{ "customer_area.js"  | shopify_asset_url | script_tag }}
  {% endif %}
  ...
  ...
</head>

Customer specific stylesheet

The customer pages by default have their own customer css. You should either include this, or create your own.

{{ 'customer.css' | shopify_asset_url | stylesheet_tag }}

or create your own customer stylesheet and include it in assets folder:

{{ 'customer.css' | asset_url | stylesheet_tag }}

Optional Customer templates

Customer pages are optional liquid templates that you can edit like any other liquid template. You can access them through the Template Editor tab. Click on the "add new template" link at the bottom of the templates in the left hand column, select the template you want and a copy will be added to your existing templates.

• customers/login The login template is used when a customer logins into their account from the storefront, as well as the login screen before proceeding to the checkout.
• customers/account This is the template used to display customer page once they are logged in. It displays customer account information, as well as their order history.
• customers/addresses This template displays customer addresses associated with their account.
• customers/order This template is used to display an Order's detail.
• customers/reset_password This template is used to display the form for reseting a customer password.
• customers/activate_account This template is used to display the form for activating a customer account.

Customer-related Liquid variables and filters

The following liquid variables/filters are available for customer pages:

• Customer
• Order
• Customer Area Filters