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

# Shop Object

> Access store settings, configuration, and global information

The `shop` object contains your store's fundamental settings and configuration. It's available globally across all pages and templates, making it perfect for headers, footers, and any store-wide functionality.

<Info>
  **Usage**: Available globally - use anywhere in your templates to access store information
</Info>

## Basic Store Information

Access your store's core details that you've configured in the Control Panel:

<CodeGroup>
  ```mustache Store Basics theme={null}
  <!-- Store name and URL -->
  <header>
      <h1><a href="{{shop.url}}">{{shop.name}}</a></h1>
  </header>

  <!-- Contact information -->
  <footer>
      <div class="contact-info">
          <h3>Contact Us</h3>
          <p>{{shop.address}}</p>
          <p>{{shop.zipcode}} {{shop.city}}</p>
          <p>Phone: {{shop.phone}}</p>
      </div>
  </footer>

  <!-- Contact page content -->
  <div class="contact-content">
      {{&shop.contact_text}}
  </div>
  ```
</CodeGroup>

### Available Properties

| Property            | Description          | Example                 |
| ------------------- | -------------------- | ----------------------- |
| `shop.name`         | Your store's name    | `"My Awesome Store"`    |
| `shop.url`          | Your store's URL     | `"https://mystore.com"` |
| `shop.address`      | Street address       | `"123 Main Street"`     |
| `shop.zipcode`      | Postal code          | `"12345"`               |
| `shop.city`         | City name            | `"Stockholm"`           |
| `shop.phone`        | Phone number         | `"+46 123 456 789"`     |
| `shop.contact_text` | Contact page content | HTML content            |

## Currency Conversion

If you have multiple currencies enabled, display a currency picker:

<CodeGroup>
  ```mustache Currency Picker theme={null}
  {{#shop.cconverter_active}}
  <form method="get" action="{{url_current}}" class="currency-selector">
      <label for="currency">{{#lang}}Currency{{/lang}}:</label>
      <select name="currency" id="currency" onchange="this.form.submit()">
          {{#shop.cconverter_currencies}}
          <option value="{{currency}}" {{#current}}selected{{/current}}>
              {{currency}}
          </option>
          {{/shop.cconverter_currencies}}
      </select>
  </form>
  {{/shop.cconverter_active}}
  ```

  ```mustache Advanced Currency Picker theme={null}
  {{#shop.cconverter_active}}
  <div class="currency-dropdown">
      <button class="currency-toggle">
          {{#shop.cconverter_currencies}}
              {{#current}}{{currency}}{{/current}}
          {{/shop.cconverter_currencies}}
          <span class="arrow">▼</span>
      </button>
      
      <div class="currency-options">
          {{#shop.cconverter_currencies}}
          <a href="{{url_current}}?currency={{currency}}" 
             class="currency-option {{#current}}active{{/current}}">
              {{currency}}
          </a>
          {{/shop.cconverter_currencies}}
      </div>
  </div>
  {{/shop.cconverter_active}}
  ```
</CodeGroup>

### Currency Object Properties

When looping through `shop.cconverter_currencies`:

| Property   | Description                                               |
| ---------- | --------------------------------------------------------- |
| `currency` | Currency code (e.g., "SEK", "EUR", "USD")                 |
| `current`  | Boolean - true if this is the currently selected currency |

## Multi-Language Support

Display language options when multiple languages are configured:

<CodeGroup>
  ```mustache Language Selector theme={null}
  {{#shop.app.languages}}
  <div class="language-selector">
      <h4>{{#lang}}Choose Language{{/lang}}</h4>
      {{#shop.languages}}
      <a href="{{url}}" class="language-option">
          <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" 
               alt="{{id}}" 
               class="flag">
          {{id}}
      </a>
      {{/shop.languages}}
  </div>
  {{/shop.app.languages}}
  ```

  ```mustache Compact Language Switcher theme={null}
  {{#shop.app.languages}}
  <div class="lang-switcher">
      {{#shop.languages}}
      <a href="{{url}}" class="lang-link" title="{{id}}">
          <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" alt="{{id}}">
      </a>
      {{/shop.languages}}
  </div>
  {{/shop.app.languages}}
  ```
</CodeGroup>

### Language Object Properties

When looping through `shop.languages`:

| Property      | Description                                  |
| ------------- | -------------------------------------------- |
| `id`          | Language identifier (e.g., "en", "sv", "no") |
| `url`         | URL to switch to this language               |
| `asset_flags` | Helper to get flag image for this language   |

## Tax Toggle

If tax toggling is enabled, allow customers to switch between prices including/excluding tax:

<CodeGroup>
  ```mustache Tax Toggle theme={null}
  {{#shop.taxtoggle_active}}
  <div class="tax-toggle">
      {{#shop.exclude_tax}}
      <a href="{{shop.incl_tax_url}}" 
         class="tax-link"
         title="{{#lang}}Prices are excluding tax. Click to toggle{{/lang}}">
          {{#lang}}Tax Excl.{{/lang}}
      </a>
      {{/shop.exclude_tax}}
      
      {{^shop.exclude_tax}}
      <a href="{{shop.excl_tax_url}}" 
         class="tax-link"
         title="{{#lang}}Prices are including tax. Click to toggle{{/lang}}">
          {{#lang}}Tax Incl.{{/lang}}
      </a>
      {{/shop.exclude_tax}}
  </div>
  {{/shop.taxtoggle_active}}
  ```

  ```mustache Tax Status Display theme={null}
  <div class="price-info">
      {{#shop.exclude_tax}}
          <small>{{#lang}}Prices excluding tax{{/lang}}</small>
      {{/shop.exclude_tax}}
      {{^shop.exclude_tax}}
          <small>{{#lang}}Prices including tax{{/lang}}</small>
      {{/shop.exclude_tax}}
  </div>
  ```
</CodeGroup>

### Tax-Related Properties

| Property                | Description                                              |
| ----------------------- | -------------------------------------------------------- |
| `shop.taxtoggle_active` | Boolean - true if tax toggle is enabled                  |
| `shop.exclude_tax`      | Boolean - true if currently showing prices excluding tax |
| `shop.incl_tax_url`     | URL to switch to prices including tax                    |
| `shop.excl_tax_url`     | URL to switch to prices excluding tax                    |

## Customer Login Integration

Display login/account links when customer accounts are enabled:

<CodeGroup>
  ```mustache Login/Account Links theme={null}
  {{#shop.login_active}}
  <div class="account-links">
      {{#user.logged_in}}
      <a href="{{user.login_url}}" class="account-link">
          <i class="icon-user"></i>
          {{#lang}}My Account{{/lang}}
      </a>
      {{/user.logged_in}}
      
      {{^user.logged_in}}
      <a href="{{user.login_url}}" class="login-link">
          <i class="icon-login"></i>
          {{#lang}}Log In{{/lang}}
      </a>
      {{/user.logged_in}}
  </div>
  {{/shop.login_active}}
  ```

  ```mustache Header Account Menu theme={null}
  {{#shop.login_active}}
  <nav class="account-nav">
      {{#user.logged_in}}
      <div class="dropdown">
          <button class="account-toggle">
              <i class="icon-user"></i>
              {{#lang}}Account{{/lang}}
          </button>
          <div class="dropdown-menu">
              <a href="{{user.login_url}}">{{#lang}}My Orders{{/lang}}</a>
              <a href="{{user.login_url}}">{{#lang}}Settings{{/lang}}</a>
              <a href="/logout">{{#lang}}Log Out{{/lang}}</a>
          </div>
      </div>
      {{/user.logged_in}}
      
      {{^user.logged_in}}
      <a href="{{user.login_url}}" class="login-btn">
          {{#lang}}Log In{{/lang}}
      </a>
      {{/user.logged_in}}
  </nav>
  {{/shop.login_active}}
  ```
</CodeGroup>

## Stock Messages

Display custom out-of-stock messages:

<CodeGroup>
  ```mustache Stock Messages theme={null}
  <!-- Use custom sold out message if available -->
  {{#product.soldOut}}
      <div class="sold-out-notice">
          {{#shop.soldout_text}}
              {{shop.soldout_text}}
          {{/shop.soldout_text}}
          {{^shop.soldout_text}}
              {{#lang}}Sorry, this item is currently out of stock{{/lang}}
          {{/shop.soldout_text}}
      </div>
  {{/product.soldOut}}
  ```
</CodeGroup>

## Complete Examples

### Store Header with All Features

<CodeGroup>
  ```mustache Complete Store Header theme={null}
  <header class="store-header">
      <!-- Main branding -->
      <div class="brand">
          <h1><a href="{{shop.url}}">{{shop.name}}</a></h1>
      </div>
      
      <!-- Utility navigation -->
      <div class="header-utils">
          <!-- Currency selector -->
          {{#shop.cconverter_active}}
          <div class="currency-selector">
              <select name="currency" onchange="window.location=this.value">
                  {{#shop.cconverter_currencies}}
                  <option value="{{url_current}}?currency={{currency}}" 
                          {{#current}}selected{{/current}}>
                      {{currency}}
                  </option>
                  {{/shop.cconverter_currencies}}
              </select>
          </div>
          {{/shop.cconverter_active}}
          
          <!-- Language selector -->
          {{#shop.app.languages}}
          <div class="language-selector">
              {{#shop.languages}}
              <a href="{{url}}" class="lang-link">
                  <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" alt="{{id}}">
              </a>
              {{/shop.languages}}
          </div>
          {{/shop.app.languages}}
          
          <!-- Tax toggle -->
          {{#shop.taxtoggle_active}}
          <div class="tax-toggle">
              {{#shop.exclude_tax}}
              <a href="{{shop.incl_tax_url}}">{{#lang}}Incl. Tax{{/lang}}</a>
              {{/shop.exclude_tax}}
              {{^shop.exclude_tax}}
              <a href="{{shop.excl_tax_url}}">{{#lang}}Excl. Tax{{/lang}}</a>
              {{/shop.exclude_tax}}
          </div>
          {{/shop.taxtoggle_active}}
          
          <!-- Account links -->
          {{#shop.login_active}}
          <div class="account-links">
              {{#user.logged_in}}
              <a href="{{user.login_url}}">{{#lang}}Account{{/lang}}</a>
              {{/user.logged_in}}
              {{^user.logged_in}}
              <a href="{{user.login_url}}">{{#lang}}Log In{{/lang}}</a>
              {{/user.logged_in}}
          </div>
          {{/shop.login_active}}
      </div>
  </header>
  ```
</CodeGroup>

### Store Footer with Contact Information

<CodeGroup>
  ```mustache Store Footer theme={null}
  <footer class="store-footer">
      <div class="footer-content">
          <!-- Store information -->
          <div class="footer-section">
              <h3>{{shop.name}}</h3>
              {{#shop.address}}
              <div class="address">
                  <p>{{shop.address}}</p>
                  <p>{{shop.zipcode}} {{shop.city}}</p>
              </div>
              {{/shop.address}}
              
              {{#shop.phone}}
              <div class="contact">
                  <p>{{#lang}}Phone{{/lang}}: {{shop.phone}}</p>
              </div>
              {{/shop.phone}}
          </div>
          
          <!-- Contact text -->
          {{#shop.contact_text}}
          <div class="footer-section">
              <h3>{{#lang}}Contact{{/lang}}</h3>
              <div class="contact-text">
                  {{&shop.contact_text}}
              </div>
          </div>
          {{/shop.contact_text}}
          
          <!-- Currency and language options -->
          <div class="footer-section">
              {{#shop.cconverter_active}}
              <div class="footer-currencies">
                  <h4>{{#lang}}Currency{{/lang}}</h4>
                  {{#shop.cconverter_currencies}}
                  <a href="{{url_current}}?currency={{currency}}" 
                     {{#current}}class="current"{{/current}}>
                      {{currency}}
                  </a>
                  {{/shop.cconverter_currencies}}
              </div>
              {{/shop.cconverter_active}}
              
              {{#shop.app.languages}}
              <div class="footer-languages">
                  <h4>{{#lang}}Language{{/lang}}</h4>
                  {{#shop.languages}}
                  <a href="{{url}}">{{id}}</a>
                  {{/shop.languages}}
              </div>
              {{/shop.app.languages}}
          </div>
      </div>
  </footer>
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Check Before Using" icon="shield-check">
    Always check if features are enabled before displaying related UI elements (e.g., `{{#shop.cconverter_active}}`)
  </Card>

  <Card title="Provide Fallbacks" icon="life-ring">
    Provide fallback content when optional settings aren't configured
  </Card>

  <Card title="Use Semantic HTML" icon="code">
    Structure your shop information with proper semantic HTML elements
  </Card>

  <Card title="Cache Considerations" icon="clock">
    Shop data is cached and updates when you change store settings in the Control Panel
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="User Object" icon="user" href="/theme-development/global/user">
    Learn about customer account and authentication data
  </Card>

  <Card title="Settings Object" icon="gear" href="/theme-development/global/settings">
    Explore 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="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Build dynamic navigation menus
  </Card>
</CardGroup>