> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# User Object

> Access customer account and authentication information

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.

<Info>
  **Usage**: Available globally when `shop.login_active` is true - check login status and display account-related content
</Info>

## Basic Usage

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

<CodeGroup>
  ```mustache Basic Login Status theme={null}
  <!-- 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}}
  ```

  ```mustache Account Navigation theme={null}
  {{#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}}
  ```
</CodeGroup>

## 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

<CodeGroup>
  ```mustache Personalized Header theme={null}
  <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>
  ```
</CodeGroup>

### Account Dashboard Link

<CodeGroup>
  ```mustache Account Dashboard theme={null}
  {{#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}}
  ```
</CodeGroup>

### Checkout Experience

<CodeGroup>
  ```mustache Checkout Login Prompt theme={null}
  {{#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}}
  ```
</CodeGroup>

## Complete Examples

### Responsive Account Menu

<CodeGroup>
  ```mustache Complete Account Menu theme={null}
  {{#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}}
  ```
</CodeGroup>

### Mobile-Friendly Account Section

<CodeGroup>
  ```mustache Mobile Account Section theme={null}
  {{#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}}
  ```
</CodeGroup>

## Implementation Notes

<CardGroup cols={2}>
  <Card title="Feature Check" icon="shield-check">
    Always wrap user object usage with `{{#shop.login_active}}` to ensure the feature is enabled
  </Card>

  <Card title="Login URL" icon="link">
    The `user.login_url` leads to the same page for both login and account management
  </Card>

  <Card title="Logout Handling" icon="sign-out">
    Logout is typically handled via `/logout` endpoint, not through the login\_url
  </Card>

  <Card title="State Management" icon="toggle-on">
    Use `{{#user.logged_in}}` and `{{^user.logged_in}}` for clear conditional logic
  </Card>
</CardGroup>

## Best Practices

### Accessible Login Forms

<CodeGroup>
  ```mustache Accessible Login theme={null}
  {{#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}}
  ```
</CodeGroup>

### SEO-Friendly Account Links

<CodeGroup>
  ```mustache SEO Account Links theme={null}
  {{#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}}
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Settings Object" icon="gear" href="/theme-development/global/settings">
    Learn about theme-specific customizable settings
  </Card>

  <Card title="Basket Object" icon="shopping-cart" href="/theme-development/global/basket">
    Work with shopping cart data and functionality
  </Card>

  <Card title="Order Object" icon="receipt" href="/theme-development/pages/order">
    Display order information on thank you pages
  </Card>

  <Card title="Shop Object" icon="store" href="/theme-development/global/shop">
    Back to shop settings and global store information
  </Card>
</CardGroup>