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

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

## Resources

Use [`routes` object](/docs/api/liquid/objects/routes) to manage login redirection.

## Redirecting to customer accounts

Before you edit your theme code, review the [considerations for customizing your theme](https://help.shopify.com/manual/online-store/themes/customizing-themes#before-you-customize-your-theme) to prevent any unintended changes to your store.

In Liquid, the [`routes`](/docs/api/liquid/objects/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 login screen and then to the order index page after a successful login
- **`routes.account_url`**: Takes customers to customer accounts order index page directly

### Modify your login links to redirect to the order index page
If your store's theme supports a customer account login link, then the following is an example of the default route on the `header.liquid` page:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="liquid">

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

</script>

</div>
</p>


If your theme doesn't display a login link in your theme header, then you can add a customer account login link to your theme with the following Liquid code:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="liquid">

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

</script>

</div>
</p>


### Link directly to customer account pages
Create direct links to redirect customers to specific customer account pages, such as their **Profile** page:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="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>

</script>

</div>
</p>


Link to a customer account full-page extension with the following Liquid code:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="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>

</script>

</div>
</p>


## Direct customers back to the online store

Direct your customers back to the online store after successful login by editing your theme code to use the [`routes.storefront_login_url`](/docs/api/liquid/objects/routes#routes-storefront_login_url) object. Once logged in, the customer will be taken back to the page where the login originated. For example, if a customer is on the Catalogs page and clicks on the login link, they will be taken back to Catalogs after a successful login.

The following example demonstrates how you can modify the customer account login link with the `storefront_login_url` route. In this example, after a customer logs in, they will be taken back to the storefront. If they click on the login link again, they will be taken to customer accounts:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="liquid">

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

</script>

</div>
</p>


You can also add the route to any login URL on your storefront with the following Liquid code:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="liquid">

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

</script>

</div>
</p>


> Note:
> If you choose to direct customers back to the online store after login by replacing the default login link route, we recommend you use another link on your theme that navigates customers to their accounts/orders.


## Direct 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 login, use this Liquid code:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/header.liquid"></script>

<script type="text/plain" data-language="liquid">

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

</script>

</div>
</p>


> Note:
> The `return_to` parameter will only work with relative URLs.