Page Template

The page template is used for custom content pages like About Us, Contact, FAQ, Terms of Service, and any other informational pages you want to create. Pages are highly flexible and can include any combination of sections to create unique layouts.

Overview

The page template displays custom content pages created in Shopify admin. By default, it shows the page title and content, but you can add any sections to create rich, customized page layouts. Pages are perfect for informational content, landing pages, and marketing pages.

Where to Use

The page template (page.json) is automatically used for all pages created in Shopify admin. When customers visit a page URL, they'll see this template.

Creating pages:

  1. Go to Online Store → Pages in Shopify admin
  2. Click Add page
  3. Enter page title and content
  4. Choose template (default is page.json)
  5. Save and publish

Access pages:

  • Direct URL: /pages/page-handle
  • Navigation links (if added to menu)
  • Links from other pages
  • Search results

Default Section

Page Section

What it does: Displays the page title and content from Shopify admin

Settings:

  • Color Scheme: Select a color scheme for the page section
  • Padding Top: Space above the page content (0-100px, default: 40px)
  • Padding Bottom: Space below the page content (0-100px, default: 40px)

What's displayed:

  • Page Title: Automatically displays page title as H1
  • Page Content: Rich text content from page editor

Tips:

  • Page section can be disabled if you want to use only custom sections
  • Content width is controlled by theme settings
  • Rich text formatting from page editor is preserved
  • You can add multiple sections to create custom layouts

Adding Sections to Pages

Pages can include any section available in your theme. Common sections for pages include:

Content Sections

  • Rich Text: Formatted text content with headings, lists, buttons
  • Image with Text: Image and text side-by-side
  • Content Spotlight: Highlighted content with images
  • Video: Embedded videos
  • Image Accordion: Expandable image sections
  • Gallery: Image galleries

Form Sections

  • Contact Form: Contact form with fields
  • Newsletter Signup: Email subscription form

Product Sections

  • Featured Product: Showcase a product
  • Featured Collection: Display a collection
  • Product Spotlight: Feature products

Layout Sections

  • Hero: Large banner section
  • Slideshow: Image carousel
  • Custom Code: Custom HTML/Liquid code

Settings

Page Section Settings

Color Scheme

  • What it does: Selects a color scheme for the page section
  • Controls background color, text colors, and link colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your page content

Padding Top

  • What it does: Space above the page content
  • Range: 0-100px
  • Default: 40px
  • Tip: More padding creates more breathing room from header/navigation

Padding Bottom

  • What it does: Space below the page content
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with footer or next section

How It Works

Page Structure

By default, the page displays:

  1. Page Title: H1 heading with page title
  2. Page Content: Rich text content from page editor

Adding Sections

You can add sections to pages:

  1. In theme editor, navigate to the page
  2. Click Add section
  3. Choose a section type
  4. Configure section settings
  5. Sections appear in order you add them

Section Order

Sections appear in the order you add them:

  • Top to bottom on the page
  • Can be reordered by dragging
  • Can be removed if not needed
  • Each section has its own settings

Page Content

Page content comes from Shopify admin:

  • Title: Page title (required)
  • Content: Rich text editor (optional)
  • Summary: Page summary/excerpt (optional)
  • SEO: Meta title, description, URL handle

Common Use Cases

About Us Page

Sections:

  1. Hero section (large banner)
  2. Rich Text (company story)
  3. Image with Text (team photos)
  4. Content Spotlight (values/mission)

Use Case: Tell your brand story and company information

Contact Page

Sections:

  1. Page section (title and intro)
  2. Contact Form section
  3. Image with Text (store location/map)
  4. Rich Text (contact information)

Use Case: Provide contact information and contact form

FAQ Page

Sections:

  1. Page section (title and intro)
  2. Rich Text (FAQ content)
  3. Image Accordion (expandable FAQs)
  4. Contact Form (for additional questions)

Use Case: Answer common customer questions

Terms of Service / Privacy Policy

Sections:

  1. Page section (title and content)

Use Case: Legal pages with text content

Landing Page

Sections:

  1. Hero section
  2. Featured Product/Collection
  3. Image with Text
  4. Newsletter Signup
  5. Rich Text with CTA

Use Case: Marketing landing pages for campaigns

Store Locator

Sections:

  1. Page section (title)
  2. Location section (if available)
  3. Image with Text (store information)
  4. Contact Form

Use Case: Help customers find physical store locations

Tips & Best Practices

✅ Do's

  • Use clear page titles: Help customers understand page content
  • Add relevant sections: Use sections to enhance page content
  • Use rich text formatting: Format content for readability
  • Add images: Visual content improves engagement
  • Include CTAs: Add buttons/links to guide customers
  • Optimize for SEO: Use meta titles and descriptions
  • Test on mobile: Ensure mobile experience is good
  • Use consistent styling: Match page design to theme

❌ Don'ts

  • Don't use only text: Add images and sections for visual interest
  • Don't skip page content: Use page editor for main content
  • Don't forget mobile: Test pages on phones and tablets
  • Don't ignore SEO: Add meta titles and descriptions
  • Don't use too many sections: Keep pages focused and organized
  • Don't skip formatting: Use rich text for better readability
  • Don't forget navigation: Add pages to menu for discoverability

Customizing Pages

Adding Sections

  1. In theme editor, navigate to the page
  2. Click Add section at the bottom
  3. Choose a section type
  4. Configure section settings
  5. Click Save

Reordering Sections

  1. Click on a section in the left sidebar
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Move sections up or down
  4. Sections appear in new order
  5. Click Save

Removing Sections

  1. Click on the section in the left sidebar
  2. Scroll to the bottom of section settings
  3. Click Remove section
  4. Confirm removal
  5. Click Save

Editing Page Content

  1. Go to Online Store → Pages in Shopify admin
  2. Select the page
  3. Edit title and content
  4. Add images, links, formatting
  5. Save changes

Page Content Best Practices

Writing Page Content

  • Clear headings: Use H2, H3 for structure
  • Short paragraphs: Keep paragraphs concise
  • Bullet points: Use lists for easy scanning
  • Bold text: Emphasize important information
  • Links: Link to relevant pages/products
  • Images: Add relevant images

SEO Optimization

  • Meta title: Descriptive, keyword-rich title
  • Meta description: Compelling description (150-160 characters)
  • URL handle: Clean, descriptive URL
  • Heading structure: Use H1, H2, H3 properly
  • Alt text: Add alt text to images

Content Organization

  • Introduction: Brief intro at top
  • Main content: Detailed information
  • Call-to-action: Clear next steps
  • Contact info: How to reach you (if relevant)

Examples

Example 1: Simple About Page

Sections:

  1. Page section (title and content)
    • Title: "About Us"
    • Content: Company story, mission, values

Result: Simple, text-focused about page

Example 2: Rich Contact Page

Sections:

  1. Hero section (banner image)
  2. Page section (intro text)
  3. Contact Form section
  4. Image with Text (store location)
  5. Rich Text (contact information, hours)

Result: Comprehensive contact page with form and information

Example 3: Marketing Landing Page

Sections:

  1. Hero section (promotional banner)
  2. Featured Product section
  3. Image with Text (benefits)
  4. Newsletter Signup section
  5. Rich Text with CTA button

Result: Conversion-focused landing page

Example 4: FAQ Page

Sections:

  1. Page section (title and intro)
  2. Rich Text (FAQ content with headings)
  3. Image Accordion (expandable FAQs)
  4. Contact Form (for additional questions)

Result: Comprehensive FAQ page with interactive elements

Troubleshooting

Page Not Showing

  • Check: Verify page is published in Shopify admin
  • Check: Ensure page is not password-protected
  • Check: Verify page URL is correct
  • Check: Check page visibility settings

Content Not Displaying

  • Check: Verify page has content in Shopify admin
  • Check: Ensure page section is enabled
  • Check: Check page section settings
  • Check: Verify content is saved

Sections Not Appearing

  • Check: Verify sections are added to page
  • Check: Ensure sections are enabled (not disabled)
  • Check: Check section order
  • Check: Verify section settings

Formatting Not Working

  • Check: Use rich text editor in Shopify admin
  • Check: Verify HTML is properly formatted
  • Check: Check theme CSS for conflicts
  • Check: Test formatting in preview

Images Not Showing

  • Check: Verify images are uploaded in page editor
  • Check: Ensure images are published
  • Check: Check image file sizes
  • Check: Verify image URLs are correct

Creating Pages in Shopify Admin

Adding a New Page

  1. Go to Online Store → Pages in Shopify admin
  2. Click Add page
  3. Enter page title
  4. Add page content (rich text)
  5. Set page visibility (published/draft)
  6. Configure SEO settings
  7. Choose template (default: page.json)
  8. Click Save

Editing Page Content

  1. Go to Online Store → Pages
  2. Select the page
  3. Edit title and content
  4. Add images, links, formatting
  5. Update SEO settings if needed
  6. Click Save

Page Settings

Visibility:

  • Published: Visible to customers
  • Draft: Hidden from customers
  • Password protected: Requires password

SEO:

  • Page title: SEO title (different from display title)
  • Meta description: Search result description
  • URL handle: Page URL slug

Related Templates

  • Home Page (index.json) - Store homepage
  • Product Page - Individual products
  • Collection Page - Product collections
  • Blog Post - Blog articles

Related Sections

  • Page Section - Default page content display
  • Rich Text - Formatted text content
  • Contact Form - Contact forms
  • Image with Text - Image and text layouts
  • Hero - Banner sections
  • Any theme section - Can be added to pages

Next Steps:

  • Learn about Home Page Template
  • Learn about Blog Template
  • Create pages in Shopify admin
  • Add sections to customize page layouts
  • Optimize pages for SEO
  • Add pages to navigation menus