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

# Static Pages

> Display static content pages using the basic page object

Static pages are content pages that contain information about your store, policies, or other important details. These pages use a `page` object to access basic content.

<Info>
  **Usage**: Available on static content pages - use to display basic page content
</Info>

## Basic Page Information

Access the core page content that is available:

<CodeGroup>
  ```mustache Basic Static Page theme={null}
  <div class="static-page">
      <header class="page-header">
          <h1 class="page-title">{{page.title}}</h1>
      </header>
      
      <div class="page-content">
          {{&page.content}}
      </div>
  </div>
  ```

  ```mustache Static Page with Page Builder Check theme={null}
  <div class="page-container">
      <!-- Page Header -->
      <header class="page-hero">
          <div class="hero-content">
              <h1>{{page.title}}</h1>
          </div>
      </header>
      
      <!-- Page Content -->
      <main class="page-main">
          <div class="container">
              {{#page.qbuilder}}
                  <!-- Content created with Page Builder -->
                  <div class="qbuilder-content">
                      {{&page.content}}
                  </div>
              {{/page.qbuilder}}
              
              {{^page.qbuilder}}
                  <!-- Regular content -->
                  <div class="regular-content">
                      {{&page.content}}
                  </div>
              {{/page.qbuilder}}
          </div>
      </main>
  </div>
  ```
</CodeGroup>

## Available Properties

### Core Page Properties

| Property        | Type    | Description                                           |
| --------------- | ------- | ----------------------------------------------------- |
| `page.title`    | String  | Page title                                            |
| `page.content`  | String  | Main page content (HTML)                              |
| `page.qbuilder` | Boolean | Check if Page Builder was used to create page content |

## Basic Page Template

Create a simple static page layout:

<CodeGroup>
  ```mustache Simple Page Layout theme={null}
  <div class="static-page">
      <!-- Page Header -->
      <section class="page-header">
          <div class="container">
              <h1>{{page.title}}</h1>
          </div>
      </section>
      
      <!-- Main Content -->
      <section class="page-content">
          <div class="container">
              <div class="content-wrapper">
                  {{&page.content}}
              </div>
          </div>
      </section>
  </div>
  ```
</CodeGroup>

## Contact Page Template

Create a basic contact page using available shop information:

<CodeGroup>
  ```mustache Contact Page theme={null}
  <div class="contact-page">
      <!-- Page Header -->
      <header class="contact-header">
          <div class="container">
              <h1>{{page.title}}</h1>
          </div>
      </header>
      
      <!-- Contact Content -->
      <section class="contact-content">
          <div class="container">
              <div class="contact-grid">
                  <!-- Contact Information -->
                  <div class="contact-info">
                      <h2>{{#lang}}Get in Touch{{/lang}}</h2>
                      
                      <!-- Page content -->
                      {{&page.content}}
                      
                      <!-- Available shop contact details -->
                      <div class="contact-details">
                          {{#shop.contact_text}}
                          <div class="contact-item">
                              <div class="contact-text">
                                  {{&shop.contact_text}}
                              </div>
                          </div>
                          {{/shop.contact_text}}
                          
                          {{#shop.address}}
                          <div class="contact-item">
                              <i class="icon-map-pin"></i>
                              <div class="contact-text">
                                  <h4>{{#lang}}Address{{/lang}}</h4>
                                  <p>{{shop.address}}</p>
                                  <p>{{shop.zipcode}} {{shop.city}}</p>
                              </div>
                          </div>
                          {{/shop.address}}
                          
                          {{#shop.phone}}
                          <div class="contact-item">
                              <i class="icon-phone"></i>
                              <div class="contact-text">
                                  <h4>{{#lang}}Phone{{/lang}}</h4>
                                  <p><a href="tel:{{shop.phone}}">{{shop.phone}}</a></p>
                              </div>
                          </div>
                          {{/shop.phone}}
                      </div>
                  </div>
                  
                  <!-- Contact Form -->
                  <div class="contact-form-section">
                      <h2>{{#lang}}Send us a Message{{/lang}}</h2>
                      
                      <form class="contact-form" action="/contact" method="post">
                          <div class="form-row">
                              <div class="form-group">
                                  <label for="contact-name">{{#lang}}Name{{/lang}} *</label>
                                  <input type="text" 
                                         id="contact-name" 
                                         name="name" 
                                         required
                                         placeholder="{{#lang}}Your name{{/lang}}">
                              </div>
                              
                              <div class="form-group">
                                  <label for="contact-email">{{#lang}}Email{{/lang}} *</label>
                                  <input type="email" 
                                         id="contact-email" 
                                         name="email" 
                                         required
                                         placeholder="{{#lang}}Your email{{/lang}}">
                              </div>
                          </div>
                          
                          <div class="form-group">
                              <label for="contact-subject">{{#lang}}Subject{{/lang}}</label>
                              <input type="text" 
                                     id="contact-subject" 
                                     name="subject"
                                     placeholder="{{#lang}}What is this about?{{/lang}}">
                          </div>
                          
                          <div class="form-group">
                              <label for="contact-message">{{#lang}}Message{{/lang}} *</label>
                              <textarea id="contact-message" 
                                        name="message" 
                                        rows="6" 
                                        required
                                        placeholder="{{#lang}}Your message{{/lang}}"></textarea>
                          </div>
                          
                          <div class="form-group">
                              <button type="submit" class="submit-btn">
                                  {{#lang}}Send Message{{/lang}}
                              </button>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
      </section>
  </div>
  ```
</CodeGroup>

## About Page Template

Create a basic about page:

<CodeGroup>
  ```mustache About Page theme={null}
  <div class="about-page">
      <!-- Page Header -->
      <header class="about-header">
          <div class="container">
              <h1>{{page.title}}</h1>
          </div>
      </header>
      
      <!-- Main Content -->
      <section class="about-content">
          <div class="container">
              <div class="content-wrapper">
                  {{&page.content}}
              </div>
          </div>
      </section>
      
      <!-- Call to Action -->
      <section class="about-cta">
          <div class="container">
              <div class="cta-content">
                  <h2>{{#lang}}Ready to get started?{{/lang}}</h2>
                  <p>{{#lang}}Browse our products and find what you're looking for{{/lang}}</p>
                  <a href="/products" class="cta-button">
                      {{#lang}}Shop Now{{/lang}}
                  </a>
              </div>
          </div>
      </section>
  </div>
  ```
</CodeGroup>

## Legal Pages Template

Create professional legal and policy pages:

<CodeGroup>
  ```mustache Legal Page Template theme={null}
  <div class="legal-page">
      <header class="legal-header">
          <div class="container">
              <h1>{{page.title}}</h1>
          </div>
      </header>
      
      <!-- Legal Content -->
      <main class="legal-content">
          <div class="container">
              <div class="content-wrapper">
                  {{&page.content}}
              </div>
          </div>
      </main>
      
      <!-- Contact Information -->
      <footer class="legal-footer">
          <div class="container">
              <div class="legal-contact">
                  <h3>{{#lang}}Questions about this policy?{{/lang}}</h3>
                  <p>{{#lang}}If you have any questions about this policy, please contact us.{{/lang}}</p>
                  
                  <div class="contact-info">
                      {{#shop.address}}
                          <p><strong>{{#lang}}Address{{/lang}}:</strong></p>
                          <p>{{shop.name}}</p>
                          <p>{{shop.address}}</p>
                          <p>{{shop.zipcode}} {{shop.city}}</p>
                      {{/shop.address}}
                  </div>
              </div>
          </div>
      </footer>
  </div>
  ```
</CodeGroup>

## Complete Static Page Example

<CodeGroup>
  ```mustache Generic Static Page theme={null}
  <!DOCTYPE html>
  <html lang="{{shop.language}}">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <!-- Basic SEO -->
      <title>{{page.title}} - {{shop.name}}</title>
      <meta name="description" content="{{page.title}}">
  </head>
  <body>
      <header class="site-header">
          <!-- Include header template -->
      </header>
      
      <main class="page-main">
          <div class="page-container">
              <!-- Breadcrumbs -->
              <nav class="breadcrumbs">
                  {{#breadcrumbs}}
                      <a href="{{url}}">{{title}}</a>
                      {{^last}} > {{/last}}
                  {{/breadcrumbs}}
              </nav>
              
              <!-- Page Content -->
              <article class="page-content">
                  <header class="page-header">
                      <h1>{{page.title}}</h1>
                  </header>
                  
                  <div class="page-body">
                      {{&page.content}}
                  </div>
              </article>
          </div>
      </main>
      
      <footer class="site-footer">
          <!-- Include footer template -->
      </footer>
  </body>
  </html>
  ```
</CodeGroup>

## Usage Notes

<Warning>
  **Limited Page Object**: The page object only provides basic information (title, content, and qbuilder status). Advanced features like SEO properties, featured images, excerpts, publishing dates, and custom settings are not available.
</Warning>

## Best Practices

<CardGroup cols={2}>
  <Card title="Content Structure" icon="layout">
    Use proper HTML structure within page content for organization
  </Card>

  <Card title="Page Builder Check" icon="wand-magic">
    Use page.qbuilder to handle different content rendering approaches
  </Card>

  <Card title="HTML Content" icon="code">
    Page content supports HTML, use semantic markup for accessibility
  </Card>

  <Card title="Contact Forms" icon="envelope">
    Build contact forms using basic form elements and available shop properties
  </Card>
</CardGroup>

## Common Static Page Types

| Page Type        | Purpose                     | Available Elements               |
| ---------------- | --------------------------- | -------------------------------- |
| About            | Company information         | Basic content, shop name/address |
| Contact          | Contact information         | Contact form, shop address/phone |
| FAQ              | Frequently asked questions  | Basic content structure          |
| Privacy Policy   | Data protection information | Legal content                    |
| Terms of Service | Usage terms and conditions  | Legal content                    |
| Shipping Info    | Delivery information        | Policy content                   |
| Returns          | Return policy               | Process and contact info         |

## Next Steps

<CardGroup cols={2}>
  <Card title="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Build static page navigation and breadcrumbs
  </Card>

  <Card title="Shop Object" icon="store" href="/theme-development/global/shop">
    Learn about available shop information properties
  </Card>

  <Card title="SEO Object" icon="search" href="/theme-development/global/seo">
    Basic SEO optimization for static pages
  </Card>

  <Card title="Response Data" icon="message" href="/theme-development/global/response-data">
    Handle contact form responses
  </Card>
</CardGroup>