To login and manage your Shopify Store, go to: https://www.shopify.com/login or https://shopify.plus/login for Shopify Plus merchants

If you are considering how to optimize your customer’s login experience on Shopify, you’ve come to the right place.

There are 3 main points to consider that we will discuss in this article:

1. How to customize the customer login page
2. How to offer a passwordless login experience for customers
3. How to implement social login

Before we go any further, you should verify that customer accounts are enabled on your Shopify store.

Shopify customer accounts: ‘Classic’ vs ‘New’

Depending on your goals, you’ll need to choose between “classic” or “new” customer accounts. In a nutshell, classic customer accounts allow you to edit the customer login and customer account pages through your theme or using an app. Meanwhile, new customer accounts allow for a passwordless login experience using a one-time password that is emailed to customers.

If you need more information to decide, consider these pros and cons of “new” customer accounts.

How to customize the customer login page

There are many reasons why you may want to edit the customer login page. Especially if you have a B2B/Wholesale portal on your Shopify store.

To edit the customer login experience you’ll have to select classic customer accounts on Shopify.

If you are using an updated OS2.0 theme, you can do a lot of customizations without needing any code. Most of the text elements on the page such as the page heading and the button text can be edited through the default theme content.

If you want to add new elements to the page such as additional text or a new link or button, you can do so by editing the `customer-login` template in the theme editor.

Older themes that have not been updated to OS2.0 standards may require editing the theme code directly to customize the login page.

Edit the text on the customer login page

For example, let’s say you want to edit the text on the customer login page to be something like this:

Here are the steps to edit this text:

1. Login to Shopify Admin: Go to your Shopify admin dashboard.
2. Navigate to Themes: On the left-hand side, click on “Online Store” and then “Themes”.
3. Edit code: Find the theme you are using, and click on the “Actions” drop-down. Select “Edit code”.
4. Locate the template: On the left sidebar of the code editor, you’ll find a list of files. Look for the customer login-related template. It’s often named `customers/login.liquid` or something similar.
5. Edit the text: Once you’re in the correct template, look for the text you want to change. It might be within <p> tags or wrapped within some_text, which indicates it’s a translation string.

• If you see the text shown on the login page, you can simply edit it.
• If it’s a translation string, you’ll need to go to the locales folder in the editor, then find and open your language’s .json file (e.g., en.default.json for English). Search for the text currently used on your customer login pageand edit its associated value.

Save Changes: Once you’ve made your edits, click “Save” in the top right corner.

Preview or check live site: Go back to your online store and navigate to the customer login page to see if the changes have been applied.

Add a button to ‘create an account’ on the login page

To illustrate another example, let’s edit the login page to show a button for account registration.

If you want to add a “Create An Account” button on your Shopify login page, similar to the image above, here’s a step-by-step guide

1. Login to Shopify Admin: Access your Shopify admin dashboard.
2. Navigate to Themes: On the left-hand menu, click on “Online Store” and then “Themes”.
3. Edit Code: Locate the theme you’re using, click on the “Actions” drop-down menu, and choose “Edit code”.
4. Locate the Login Template: In the code editor, find and click on the login-related template. It’s often named `customers/login.liquid` or something similar.
5. Insert the button code: Locate the appropriate place in the template where you want the button to appear. Then, add the following code for the “Create An Account” button:

<a href="/account/register" class="btn">Create An Account</a>

The class “btn” is a common class used in Shopify themes to style buttons, but your theme might use a different class. Adjust accordingly based on your theme’s styling, or hire a vetted Shopify Expert to help you out.

Save changes: After making your edits, hit the “Save” button in the top right corner of the code editor.

Preview or check on live site: Visit your online store’s login page to verify that the “Create An Account” button appears and functions correctly.

Remember, always back up your theme before making any changes. If something doesn’t look or work right after your edits, you can revert to the backup.

2. How to offer a passwordless login experience for customers

This is one of the most compelling reasons to use new customer accounts in Shopify: passwordless login is built in natively. So to enable passwordless login, simply navigate to customer account settings in Shopify and select new customer accounts. The downside is that the customer experience is not customizable in any way– whether by Liquid customizations or apps.

3. How to implement social login

This is another use case for classic customer accounts. To implement social login on your Shopify store, we recommend using an app. Here are the social login apps that we’ve seen merchants use in conjunction with the Customer Fields app.

• https://apps.shopify.com/oxi-social-login
• https://apps.shopify.com/miniorange-social-login