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

# Theme & Layouts: Product Pages and CMS Pages

> Choose from six product page layouts, set CMS page sidebars, and apply per-page header banners and background media overrides using a clear priority order.

Site Store Pro gives you full control over how individual product pages and CMS pages are laid out, and lets you override the global background on a per-page basis. Whenever you save a setting in Global Settings, the platform updates your storefront's visual theme automatically — you never need to rebuild assets or restart the server. This page covers the layout options you apply at the product and CMS page level.

***

## Product Page Layouts

Each product has its own layout setting, giving you full control over how the image gallery, buy-box, and video player are arranged. Set the layout under **Admin → Shop → Products → Edit → Layout**.

Site Store Pro ships with six layouts:

| # | Layout Name                                      | Description                                                                   |
| - | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| 1 | **Right Side Images** *(Default)*                | Buy-box on the left, image gallery on the right                               |
| 2 | **Left Side Images**                             | Image gallery on the left, buy-box on the right                               |
| 3 | **Right Side Images + Large Video Player Below** | Right-side gallery with a full-width video player beneath the product details |
| 4 | **Centered Layout With Images On Top**           | Full-width hero image row above a centered buy-box                            |
| 5 | **Centered Layout + Large Video Player On Top**  | Hero video header above a centered buy-box                                    |
| 6 | **No Images — Video On Page**                    | Video-first presentation; the image gallery space is hidden entirely          |

<Note>
  Layouts **3**, **5**, and **6** expose a **Video Embed** field on the product edit screen. This field accepts two formats:

  * **CMS Code Embed Shortcode** — reference a saved embed block by ID: `[code-embed:12]`
  * **Raw iFrame** — paste an iframe tag directly, for example: `<iframe src="https://www.youtube.com/embed/VIDEOID" ...></iframe>`

  YouTube, Vimeo, and any other iframe-compatible source work with the raw iFrame format.
</Note>

***

## Choosing a Product Layout

<Steps>
  <Step title="Open the product editor">
    Navigate to **Admin → Shop → Products**, find your product, and click **Edit**.
  </Step>

  <Step title="Select a layout">
    Scroll to the **Layout** section and select one of the six options from the dropdown. Layouts 3, 5, and 6 reveal the **Video Embed** field once selected.
  </Step>

  <Step title="Add a video embed (Layouts 3, 5, 6 only)">
    Paste your CMS shortcode or raw iframe into the **Video Embed** field. Site Store Pro renders the player at the position defined by the layout.
  </Step>

  <Step title="Save and preview">
    Click **Save**, then open the product's public URL to verify the layout looks correct at both desktop and mobile breakpoints.
  </Step>
</Steps>

***

## CMS Page Layouts

Pages created under **Admin → CMS → Pages** support three column arrangements. Set the layout in the page editor under **Admin → CMS → Pages → Edit → Layout**.

<CardGroup cols={3}>
  <Card title="Full Width" icon="rectangle-wide">
    Single-column layout that spans the full content area. Best for landing pages, promotional campaigns, and long-form content that benefits from maximum horizontal space.
  </Card>

  <Card title="Left Sidebar" icon="sidebar-flip">
    Two-column layout with a navigation or widget sidebar on the left and the main content area on the right. Useful for knowledge bases and category pages.
  </Card>

  <Card title="Right Sidebar" icon="sidebar">
    Two-column layout with the main content area on the left and a sidebar on the right. A common choice for blog posts and documentation pages.
  </Card>
</CardGroup>

***

## Per-Page Header Banners

Every CMS page can display a full-width hero banner at the top. Set **Header Banner Image** in the page editor to a URL pointing to your banner image. Site Store Pro renders it as a full-width strip with the page title overlaid.

<Tip>
  Use a banner image sized at least **1920 × 400 px** to prevent upscaling artifacts on large monitors. Optimize the file with WebP format to keep load times fast.
</Tip>

***

## Per-Page Background Media

In addition to the global background set in **Admin → Global Settings**, each CMS page accepts its own background overrides. Site Store Pro resolves backgrounds using the following priority order — the highest-priority source that has a value wins:

<Steps>
  <Step title="Priority 1 — Per-page background video">
    Set a **Background Video URL** on the page. When present, this overrides everything else: the global background and any per-page image.
  </Step>

  <Step title="Priority 2 — Per-page background image">
    Set a **Per-Page Background Image** on the page. This overrides the global background setting but is itself overridden by a per-page video.
  </Step>

  <Step title="Priority 3 — Global background">
    The background mode and media configured under **Admin → Global Settings** apply as the site-wide default whenever no per-page override is set.
  </Step>
</Steps>

<Info>
  The glassmorphism dark overlay settings (overlay tint and opacity) defined in Global Settings apply on top of whichever background source is active, including per-page images and videos. Adjust the overlay opacity if text legibility changes after setting a page-specific background.
</Info>