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

# Page Template (main-page)

> Generic page template for About, Contact, custom content pages with optional additional info section

The Main Page template displays standard content pages like About Us, Contact, FAQs, Shipping Info, and other custom pages with optional page title display, customizable heading size, and additional info section for supplementary content. This versatile template works for any text-based content page and supports calls-to-action, highlights, or supplementary messaging through its flexible layout. Use this template to create informational pages that communicate your brand story, policies, and essential information while maintaining design consistency.

***

## Template Settings

### Page Title

<AccordionGroup>
  <Accordion title="Show Page Title" icon="heading">
    Display page title as heading.

    * **Type:** Checkbox
    * **Default:** Enabled

    **When Enabled:**

    * Page title appears as H1 heading at top
    * Automatically pulls from page title set in Shopify Admin
    * SEO-optimized (one H1 per page)

    **When Disabled:**

    * Page title hidden
    * Useful if page content starts with custom heading
    * Or if using page banner section above

    <Note>
      The page title is set in **Shopify Admin → Online Store → Pages → \[Page] → Title field**, not in the Theme Customizer.
    </Note>
  </Accordion>

  <Accordion title="Heading Size" icon="text-size">
    Control page title heading size.

    * **XS** (h6) - Smallest
    * **S** (h5)
    * **M** (h4)
    * **L** (h3)
    * **XL** (h2) - Default, largest

    <Tip>
      Use larger heading (XL, L) for primary landing pages. Use smaller heading (M, S) for supplementary pages or if page content has its own prominent title.
    </Tip>
  </Accordion>

  <Accordion title="Title Alignment" icon="align-center">
    Align page title horizontally.

    * **Left** (start)
    * **Center** (default)
    * **Right** (end)

    <Note>
      Most content pages use centered titles. Left-aligned works well for blog-style or document pages.
    </Note>
  </Accordion>
</AccordionGroup>

### Additional Info Section

<AccordionGroup>
  <Accordion title="Info Title" icon="heading">
    Optional supplementary heading above page content.

    * **Type:** Inline rich text
    * **Optional:** Leave blank to hide
    * Supports bold, italic, links

    **Use Cases:**

    * Promotional headline
    * Call-to-action heading
    * Section introduction
    * Highlight important message

    **Examples:**

    * "Free Shipping on Orders Over \$50"
    * "We're Here to Help!"
    * "Trusted by 10,000+ Customers"
  </Accordion>

  <Accordion title="Info Heading Size" icon="text-size">
    Control info title heading size.

    * **XS** (h6)
    * **S** (h5)
    * **M** (h4) - Default
    * **L** (h3)
    * **XL** (h2)

    <Tip>
      Use smaller heading than main page title (e.g., page title XL, info title M) to create visual hierarchy.
    </Tip>
  </Accordion>

  <Accordion title="Info Content" icon="align-left">
    Descriptive text for additional info section.

    * **Type:** Rich text
    * **Optional:** Leave blank to hide
    * Supports formatting: bold, italic, lists, links

    **Use Cases:**

    * Value proposition
    * Key benefits or features
    * Promotional message
    * Call-to-action description

    **Example:**

    ```
    Need help choosing the right product? Our expert team is available 
    Monday-Friday, 9am-5pm EST. Call us at 1-800-123-4567 or chat now!
    ```
  </Accordion>

  <Accordion title="Content Alignment" icon="align-justify">
    Align additional info section content.

    * **Left** (start)
    * **Center** (default)
    * **Right** (end)

    <Note>
      Most pages use centered alignment for additional info. Left-align for longer, paragraph-style content.
    </Note>
  </Accordion>
</AccordionGroup>

### Layout Settings

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    Control content area width.

    * **Narrower** - Very narrow (ideal for blog posts, long-form reading)
    * **Narrow** (default) - Comfortable reading width
    * **Page** - Standard page margins
    * **Fluid** - Extends to container edges

    **Width Comparison:**

    **Narrower:**

    * \~600px max width
    * Optimal for long-form reading
    * Blog posts, articles, stories

    **Narrow (Default):**

    * \~800px max width
    * Comfortable for most content pages
    * About, FAQs, Policies

    **Page:**

    * \~1200px max width
    * Wide content areas
    * Tables, multiple columns

    **Fluid:**

    * Full container width
    * Edge-to-edge content
    * Wide layouts, full-width images
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**
  </Accordion>
</AccordionGroup>

***

## Page Content

The main page content is **not** controlled by template settings:

<AccordionGroup>
  <Accordion title="Where Content Comes From" icon="file-lines">
    **Page Content Source:**

    Page content is edited in **Shopify Admin → Online Store → Pages → \[Page] → Content field**.

    * Rich text editor for formatting
    * Supports headings, paragraphs, lists, images, videos
    * HTML mode available for advanced formatting
    * Can embed code snippets

    <Note>
      The template controls **how** content displays (width, spacing, colors), not the actual content text.
    </Note>
  </Accordion>

  <Accordion title="Content Formatting" icon="paragraph">
    **Available Formatting:**

    * Headings (H2-H6, not H1 - page title is H1)
    * Paragraphs
    * Bold, italic, underline
    * Bulleted and numbered lists
    * Links (internal and external)
    * Images (uploaded or from URL)
    * Videos (YouTube, Vimeo embeds)
    * Tables
    * Code blocks
    * Horizontal lines
  </Accordion>
</AccordionGroup>

***

## Common Page Types

<CardGroup cols={2}>
  <Card title="About Us" icon="building">
    **Setup:**

    * Title: "About Us" or "Our Story"
    * Narrow width for comfortable reading
    * Additional info: brand values, mission statement
    * Content: company history, team, values
  </Card>

  <Card title="Contact" icon="envelope">
    **Setup:**

    * Title: "Contact Us"
    * Narrow width
    * Additional info: "We're here to help!"
    * Content: contact form, email, phone, hours, address
  </Card>

  <Card title="Shipping & Returns" icon="truck">
    **Setup:**

    * Title: "Shipping & Returns"
    * Narrow width
    * Additional info: Free shipping threshold
    * Content: Shipping rates, delivery times, return policy
  </Card>

  <Card title="FAQs" icon="circle-question">
    **Setup:**

    * Title: "Frequently Asked Questions"
    * Narrow or Page width
    * Additional info: "Find answers here"
    * Content: Q\&A format, accordions (if theme supports)
  </Card>

  <Card title="Size Guide" icon="ruler">
    **Setup:**

    * Title: "Size Guide"
    * Page or Fluid width (for wide tables)
    * Content: Size charts, measurement instructions, fit tips
  </Card>

  <Card title="Terms & Conditions" icon="file-contract">
    **Setup:**

    * Title: "Terms & Conditions"
    * Narrower width for legal document readability
    * Content: Legal terms, policies, disclaimers
  </Card>
</CardGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Content organization" icon="list-tree">
    Structure content clearly with headings to break up sections (H2, H3), keep paragraphs short (3-5 sentences), use bulleted lists for easy scanning, include whitespace, bold important information, and link related pages. Most visitors scan rather than read.
  </Card>

  <Card title="Width selection" icon="ruler-horizontal">
    Use Narrower for long-form reading (About Us, Brand Story, legal documents). Use Narrow for most content pages (Contact, FAQs, Shipping) as default. Use Page for images/media and multiple columns. Use Fluid for full-width designs and landing pages.
  </Card>

  <Card title=" Additional info strategy" icon="sparkles">
    Use strategically on high-traffic pages for promotional messaging ("Free Shipping on All Orders"), supportive content ("Questions? We're Here to Help!"), trust-building ("100% Satisfaction Guaranteed"), or directional guidance. Don't overuse as it loses impact.
  </Card>

  <Card title="SEO optimization" icon="magnifying-glass">
    Use descriptive page titles (set in Shopify Admin), write unique meta descriptions for each page, use H1 for page title (one per page), structure content with H2-H6 headings, include internal links, optimize images with alt text, and keep URLs short and descriptive.
  </Card>

  <Card title="Mobile optimization" icon="mobile-screen">
    Use short paragraphs for small screens, large tappable links and buttons, responsive images that scale to fit, avoid wide tables (consider vertical layout), test on actual mobile devices, and ensure forms work well especially on contact pages.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Customer Service Page" icon="headset">
    Title: "Customer Service"
    Additional Info: "We're here for you 24/7"
    Content: Contact methods, FAQ links, return info, live chat
  </Card>

  <Card title="Brand Story" icon="book-open">
    Title: "Our Story"
    Narrower width for reading
    Content: Founder story, mission, values, timeline
  </Card>

  <Card title="Press & Media" icon="newspaper">
    Title: "Press"
    Additional Info: "As featured in..."
    Content: Press releases, media mentions, download assets
  </Card>

  <Card title="Wholesale Inquiry" icon="briefcase">
    Title: "Wholesale"
    Additional Info: "Interested in carrying our products?"
    Content: Wholesale terms, minimum order, contact form
  </Card>
</CardGroup>

***

## Related Templates & Sections

<CardGroup cols={2}>
  <Card title="Page Banner" icon="image">
    Hero banner section for pages (add above page content)
  </Card>

  <Card title="Contact Form" icon="message">
    Section for embedded contact forms
  </Card>

  <Card title="Rich Text" icon="align-left">
    Section for additional formatted text blocks
  </Card>

  <Card title="Image with Text" icon="image">
    Section for combining images with text content
  </Card>
</CardGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Page Title Not Showing" icon="eye-slash">
    **Check:**

    * "Show Page Title" checkbox is enabled
    * Page has title set in Shopify Admin
    * Template is assigned to page
    * Not using custom template without title
  </Accordion>

  <Accordion title="Content Not Displaying" icon="file-slash">
    **Verify:**

    * Page content added in Shopify Admin → Pages → \[Page] → Content
    * Page is published (not draft)
    * Correct template assigned to page
    * No theme errors (check browser console)
  </Accordion>

  <Accordion title="Additional Info Not Appearing" icon="info-circle">
    **Reasons:**

    * Info Title or Info Content fields are empty
    * Both must have content to display
    * Check if section is hidden by color scheme
  </Accordion>

  <Accordion title="Width Too Narrow/Wide" icon="left-right">
    **Adjust:**

    * Change "Section Width" setting
    * Options: Narrower → Narrow → Page → Fluid
    * Preview changes before saving
    * Consider content type when choosing
  </Accordion>

  <Accordion title="Formatting Issues" icon="code">
    **Common Problems:**

    * HTML code visible (escaped HTML)
    * Images not responsive (use responsive image tags)
    * Videos not loading (check embed code)
    * Tables overflow on mobile (use responsive tables)

    **Solutions:**

    * Use Shopify's rich text editor (not raw HTML unless needed)
    * Upload images through editor (auto-responsive)
    * Use proper video embed codes (YouTube, Vimeo)
    * Test mobile view for all content
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Generic content page template (About, Contact, FAQs, etc.)
* **Content Source:** Shopify Admin → Pages → \[Page] → Content field
* **Title Control:** Show/hide, size (h6-h2), alignment
* **Additional Info:** Optional supplementary heading, content, alignment
* **Width Options:** Narrower, Narrow (default), Page, Fluid
* **Best For:** Text-based content pages with optional promotional messaging
* **Settings:** Minimal template settings, most content edited in Page editor

<Note>
  Create new pages in **Shopify Admin → Online Store → Pages → Add page**. Set title, content, and SEO fields there. Template settings control layout, not content.
</Note>