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:
Basic Login Status
Account Navigation
<!-- 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}}
Available Properties Property Type Description user.logged_inBoolean Check if visitor is logged in user.login_urlString Output link to Login / My Account page
Conditional Content Examples <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
