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:
Basic Static Page
Static Page with Page Builder Check
<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 Property Type Description page.titleString Page title page.contentString Main page content (HTML) page.qbuilderBoolean 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 