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.
Usage: Available on static content pages - use to display basic page content

​
Basic Page Information

Access the core page content that is available: 
<div class="static-page">
    <header class="page-header">
        <h1 class="page-title">{{page.title}}</h1>
    </header>
    
    <div class="page-content">
        {{&page.content}}
    </div>
</div>

​
Available Properties

​
Core Page Properties

PropertyTypeDescription
page.titleStringPage title
page.contentStringMain page content (HTML)
page.qbuilderBooleanCheck if Page Builder was used to create page content

​
Basic Page Template

Create a simple static page layout: 
<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>

​
Contact Page Template

Create a basic contact page using available shop information: 
<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>

​
About Page Template

Create a basic about page: 
<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>
Create professional legal and policy pages: 
<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>

​
Complete Static Page Example

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

​
Usage Notes

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.

​
Best Practices

Content Structure

Use proper HTML structure within page content for organization

Page Builder Check

Use page.qbuilder to handle different content rendering approaches

HTML Content

Page content supports HTML, use semantic markup for accessibility

Contact Forms

Build contact forms using basic form elements and available shop properties

​
Common Static Page Types

Page TypePurposeAvailable Elements
AboutCompany informationBasic content, shop name/address
ContactContact informationContact form, shop address/phone
FAQFrequently asked questionsBasic content structure
Privacy PolicyData protection informationLegal content
Terms of ServiceUsage terms and conditionsLegal content
Shipping InfoDelivery informationPolicy content
ReturnsReturn policyProcess and contact info

​
Next Steps

Navigation Object

Build static page navigation and breadcrumbs

Shop Object

Learn about available shop information properties

SEO Object

Basic SEO optimization for static pages

Response Data

Handle contact form responses