Skip to main content

Customer sign-in links and redirects

You can configure where customers are redirected after they sign in to their account on your store. For example, you might want to redirect customers to the page they were on when they signed in, or a specific product collection.

In this tutorial, you'll learn how to configure custom redirects in your theme.


Use routes object to manage sign-in redirection.


Direct links send customers to specific destinations in customer accounts, routing them through sign-in when needed, with optional parameters to make the process faster.

You can create sign-in links that prepopulate the customer's email address on the sign-in page. This is useful when you already know the customer's email address, such as when you've captured it through a form on your store.

Use the login_hint parameter to specify the email address. The customer is taken to the sign-in page with the email address prefilled, allowing them to review it before continuing.

In the following example snippet, you'll see how you can pre-fill an email address into this login_hint parameter after a form submission:

/sections/header.liquid

<a href="{{ routes.storefront_login_url | append: '&login_hint=' | append: customer.email | url_param_escape }}">Sign in</a>

Anchor to Redirecting to customer accountsRedirecting to customer accounts

Before you edit your theme code, review the considerations for customizing your theme to prevent any unintended changes to your store.

In Liquid, the routes object can be used to direct customers to customer accounts, where they can view their order history and track current orders:

  • routes.account_login_url: Takes customers to the sign-in page and then to the order index page after they sign in successfully.
  • routes.account_url: Takes customers to customer accounts order index page directly.

If you need to append a path (such as for an account extension, tab, or subpage) to routes.account_url, be aware that this URL may sometimes contain query parameters (for example, after a successful sign-in).

To ensure your generated links remain valid, always split routes.account_url on the ? character before appending your extension, then re-attach any query parameters at the end.

Example:

/sections/header.liquid

{% assign url_parts = routes.account_url | split: '?' %}
{% assign base_url = url_parts | first %}
<a href="{{ base_url }}/pages/extensionId{% if url_parts.size > 1 %}?{{ url_parts.last }}{% endif %}">Account Extension Link</a>

This approach always produces a valid link, regardless of whether routes.account_url contains query parameters.

If your store's theme supports a customer account sign-in link, then the following is an example of the default route on the header.liquid page:

/sections/header.liquid

{%- if shop.customer_accounts_enabled -%}
<a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
className="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}"
rel="nofollow">
</a>
{%- endif -%}

If your theme doesn't display a sign-in link in your theme header, then you can add a customer account sign-in link to your theme with the following Liquid code:

/sections/header.liquid

{%- if shop.customer_accounts_enabled -%}
{% if customer %}
<a href="{{ routes.account_url }}">Account</a>
{% else %}
<a href="{{ routes.account_login_url }}">Sign in</a>
{%- endif %}
{%- endif -%}

Create direct links to redirect customers to specific customer account pages, such as their Profile page:

/sections/header.liquid

{% assign url_parts = routes.account_url | split: '?' %}
{% assign base_url = url_parts | first %}
<a href="{{ base_url }}/profile{% if url_parts.size > 1 %}?{{ url_parts.last }}{% endif %}">Account Profile</a>

Link to a customer account full-page extension with the following Liquid code:

/sections/header.liquid

{% assign url_parts = routes.account_url | split: '?' %}
{% assign base_url = url_parts | first %}
<a href="{{ base_url }}/pages/extensionId{% if url_parts.size > 1 %}?{{ url_parts.last }}{% endif %}">Account Extension</a>

Anchor to Redirect customers after signing inRedirect customers after signing in

Anchor to Direct customers back to the online storeDirect customers back to the online store

Direct your customers back to the online store after successful sign in by editing your theme code to use the routes.storefront_login_url object. Once signed in, the customer will be taken back to the page where the sign-in originated. For example, if a customer is on the Catalog page and clicks on the sign-in link, they will be taken back to Catalog after a successful sign in.

The following example demonstrates how you can modify the customer account sign-in link with the storefront_login_url route. In this example, after a customer signs in, they're taken back to the storefront. If they click on the sign-in link again, they're taken to customer accounts:

/sections/header.liquid

{%- if shop.customer_accounts_enabled -%}
<a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.storefront_login_url }}{%- endif -%}"
className="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}"
rel="nofollow">
</a>
{%- endif -%}

You can also add the route to any sign-in URL on your storefront with the following Liquid code:

/sections/header.liquid

<a href="{{ routes.storefront_login_url }}">Sign in</a>
Note

If you choose to direct customers back to the online store after signing in, by replacing the default sign-in link route, we recommend you use another link on your theme that navigates customers to their account and orders.

Anchor to Direct customers back to another page on the online storeDirect customers back to another page on the online store

You can redirect customers to any page on your online store using the /customer_authentication/login path with a return_to parameter.

For example, to redirect customers to your Contact page after signing in, use this Liquid code:

/sections/header.liquid

<a href="/customer_authentication/login?return_to={{ "/pages/contact" | url_encode }}">Contact</a>
Note

The return_to parameter only works with relative URLs.


Was this page helpful?