User Object

The user object contains information about logged-in customers when the login/account feature is enabled in your store. It’s used to create account management functionality and personalized experiences.

Usage: Available globally when shop.login_active is true - check login status and display account-related content

Basic Usage

The user object helps you create login/logout functionality and personalized content:

<!-- Check if customer accounts are enabled -->
{{#shop.login_active}}
    {{#user.logged_in}}
        <p>Welcome back!</p>
        <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a>
    {{/user.logged_in}}
    
    {{^user.logged_in}}
        <a href="{{user.login_url}}">{{#lang}}Log In{{/lang}}</a>
    {{/user.logged_in}}
{{/shop.login_active}}

{{#shop.login_active}}
<nav class="account-nav">
    {{#user.logged_in}}
    <!-- Logged in user menu -->
    <div class="user-menu">
        <a href="{{user.login_url}}" class="account-link">
            <i class="icon-user"></i>
            {{#lang}}My Account{{/lang}}
        </a>
        <a href="/logout" class="logout-link">
            {{#lang}}Log Out{{/lang}}
        </a>
    </div>
    {{/user.logged_in}}
    
    {{^user.logged_in}}
    <!-- Guest user options -->
    <div class="guest-menu">
        <a href="{{user.login_url}}" class="login-link">
            {{#lang}}Log In{{/lang}}
        </a>
    </div>
    {{/user.logged_in}}
</nav>
{{/shop.login_active}}

Available Properties

Property	Type	Description
`user.logged_in`	Boolean	Check if visitor is logged in
`user.login_url`	String	Output link to Login / My Account page

Conditional Content Examples

Personalized Header

<header class="site-header">
    <div class="user-section">
        {{#shop.login_active}}
            {{#user.logged_in}}
                <!-- Logged in state -->
                <div class="logged-in-user">
                    <span class="welcome-text">{{#lang}}Welcome back{{/lang}}</span>
                    <a href="{{user.login_url}}" class="account-btn">
                        {{#lang}}My Account{{/lang}}
                    </a>
                </div>
            {{/user.logged_in}}
            
            {{^user.logged_in}}
                <!-- Guest state -->
                <div class="guest-user">
                    <a href="{{user.login_url}}" class="login-btn">
                        {{#lang}}Sign In{{/lang}}
                    </a>
                </div>
            {{/user.logged_in}}
        {{/shop.login_active}}
    </div>
</header>

Account Dashboard Link

{{#shop.login_active}}
    {{#user.logged_in}}
    <div class="account-dashboard">
        <h2>{{#lang}}Account Dashboard{{/lang}}</h2>
        <div class="dashboard-links">
            <a href="{{user.login_url}}" class="dashboard-link">
                <i class="icon-orders"></i>
                <span>{{#lang}}My Orders{{/lang}}</span>
            </a>
            <a href="{{user.login_url}}" class="dashboard-link">
                <i class="icon-settings"></i>
                <span>{{#lang}}Account Settings{{/lang}}</span>
            </a>
            <a href="{{user.login_url}}" class="dashboard-link">
                <i class="icon-addresses"></i>
                <span>{{#lang}}My Addresses{{/lang}}</span>
            </a>
        </div>
    </div>
    {{/user.logged_in}}
{{/shop.login_active}}

Checkout Experience

{{#shop.login_active}}
    {{^user.logged_in}}
    <div class="checkout-login-prompt">
        <h3>{{#lang}}Returning Customer?{{/lang}}</h3>
        <p>{{#lang}}Sign in for faster checkout{{/lang}}</p>
        <a href="{{user.login_url}}" class="signin-btn">
            {{#lang}}Sign In{{/lang}}
        </a>
    </div>
    {{/user.logged_in}}
    
    {{#user.logged_in}}
    <div class="checkout-welcome">
        <p>{{#lang}}Signed in and ready to checkout{{/lang}}</p>
    </div>
    {{/user.logged_in}}
{{/shop.login_active}}

Complete Examples

{{#shop.login_active}}
<div class="account-menu">
    {{#user.logged_in}}
    <!-- Logged in: Account dropdown -->
    <div class="account-dropdown">
        <button class="account-toggle" aria-expanded="false">
            <i class="icon-user"></i>
            <span>{{#lang}}Account{{/lang}}</span>
            <i class="icon-chevron-down"></i>
        </button>
        
        <div class="dropdown-content">
            <div class="dropdown-header">
                <span class="user-status">{{#lang}}Signed in{{/lang}}</span>
            </div>
            
            <div class="dropdown-links">
                <a href="{{user.login_url}}" class="dropdown-link">
                    <i class="icon-orders"></i>
                    {{#lang}}My Orders{{/lang}}
                </a>
                <a href="{{user.login_url}}" class="dropdown-link">
                    <i class="icon-user"></i>
                    {{#lang}}Account Details{{/lang}}
                </a>
                <a href="{{user.login_url}}" class="dropdown-link">
                    <i class="icon-location"></i>
                    {{#lang}}Address Book{{/lang}}
                </a>
                <div class="dropdown-divider"></div>
                <a href="/logout" class="dropdown-link logout">
                    <i class="icon-logout"></i>
                    {{#lang}}Sign Out{{/lang}}
                </a>
            </div>
        </div>
    </div>
    {{/user.logged_in}}
    
    {{^user.logged_in}}
    <!-- Logged out: Simple login link -->
    <a href="{{user.login_url}}" class="login-link">
        <i class="icon-login"></i>
        <span>{{#lang}}Sign In{{/lang}}</span>
    </a>
    {{/user.logged_in}}
</div>
{{/shop.login_active}}

Mobile-Friendly Account Section

{{#shop.login_active}}
<div class="mobile-account-section">
    {{#user.logged_in}}
    <!-- Mobile logged in menu -->
    <div class="mobile-account-menu">
        <div class="account-header">
            <i class="icon-user-circle"></i>
            <span class="account-title">{{#lang}}My Account{{/lang}}</span>
        </div>
        
        <nav class="account-nav">
            <a href="{{user.login_url}}" class="nav-item">
                <i class="icon-orders"></i>
                <span>{{#lang}}Order History{{/lang}}</span>
                <i class="icon-chevron-right"></i>
            </a>
            <a href="{{user.login_url}}" class="nav-item">
                <i class="icon-settings"></i>
                <span>{{#lang}}Account Settings{{/lang}}</span>
                <i class="icon-chevron-right"></i>
            </a>
            <a href="/logout" class="nav-item logout">
                <i class="icon-logout"></i>
                <span>{{#lang}}Sign Out{{/lang}}</span>
            </a>
        </nav>
    </div>
    {{/user.logged_in}}
    
    {{^user.logged_in}}
    <!-- Mobile login prompt -->
    <div class="mobile-login-prompt">
        <div class="login-content">
            <i class="icon-user-plus"></i>
            <h3>{{#lang}}Sign In{{/lang}}</h3>
            <p>{{#lang}}Access your account and order history{{/lang}}</p>
            <a href="{{user.login_url}}" class="login-btn-mobile">
                {{#lang}}Sign In{{/lang}}
            </a>
        </div>
    </div>
    {{/user.logged_in}}
</div>
{{/shop.login_active}}

Implementation Notes

Feature Check

Always wrap user object usage with {{#shop.login_active}} to ensure the feature is enabled

Login URL

The user.login_url leads to the same page for both login and account management

Logout Handling

Logout is typically handled via /logout endpoint, not through the login_url

State Management

Use {{#user.logged_in}} and {{^user.logged_in}} for clear conditional logic

Best Practices

{{#shop.login_active}}
    {{^user.logged_in}}
    <div class="login-section" role="region" aria-label="{{#lang}}User Login{{/lang}}">
        <a href="{{user.login_url}}" 
           class="login-button"
           aria-describedby="login-description">
            {{#lang}}Sign In{{/lang}}
        </a>
        <p id="login-description" class="sr-only">
            {{#lang}}Access your account to view orders and manage settings{{/lang}}
        </p>
    </div>
    {{/user.logged_in}}
{{/shop.login_active}}

SEO-Friendly Account Links

{{#shop.login_active}}
    {{#user.logged_in}}
    <nav aria-label="{{#lang}}Account Navigation{{/lang}}">
        <a href="{{user.login_url}}" 
           title="{{#lang}}View and manage your account{{/lang}}">
            {{#lang}}My Account{{/lang}}
        </a>
    </nav>
    {{/user.logged_in}}
{{/shop.login_active}}

Next Steps

Settings Object

Learn about theme-specific customizable settings

Basket Object

Work with shopping cart data and functionality

Order Object

Display order information on thank you pages

Shop Object

Back to shop settings and global store information

Getting Started

Template Language

Global Objects

Page Objects

Basic Usage

Available Properties

Conditional Content Examples

Personalized Header

Account Dashboard Link

Checkout Experience

Complete Examples

Responsive Account Menu

Mobile-Friendly Account Section

Implementation Notes

Feature Check

Login URL

Logout Handling

State Management

Best Practices

SEO-Friendly Account Links

Next Steps

Settings Object

Basket Object

Order Object

Shop Object

​Basic Usage

​Available Properties

​Conditional Content Examples

​Personalized Header

​Account Dashboard Link

​Checkout Experience

​Complete Examples

​Responsive Account Menu

​Mobile-Friendly Account Section

​Implementation Notes

Feature Check

Login URL

Logout Handling

State Management

​Best Practices

​Accessible Login Forms

​SEO-Friendly Account Links

​Next Steps

Settings Object

Basket Object

Order Object

Shop Object

Basic Usage

Available Properties

Conditional Content Examples

Personalized Header

Account Dashboard Link

Checkout Experience

Complete Examples

Responsive Account Menu

Mobile-Friendly Account Section

Implementation Notes

Best Practices

Accessible Login Forms

SEO-Friendly Account Links

Next Steps