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>
<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>
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:<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>
Legal Pages Template
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 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
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