> ## 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.

# CMS Pages: Build, Configure, and Gate Site Store Pro Content

> Create, configure, and gate CMS pages with custom slugs, layouts, slideshows, shortcodes, and access controls for your storefront content.

The CMS page builder gives you full control over every page on your storefront — from the homepage to deeply nested content pages. You can choose layouts, assign slideshows, embed interactive elements via shortcodes, and restrict access based on purchases or secret codes, all from a single editing interface at **Admin → CMS → Pages**.

## Creating a Page

Navigate to **Admin → CMS → Pages** and click **New Page**. Every page requires a title and a slug. Once you save, the page becomes live at the path defined by its slug.

<Steps>
  <Step title="Set the Title and Content">
    Enter a **Title** and write your page content in the TinyMCE rich text editor. The title appears in the browser tab and, when a header banner image is set, is layered on top of the hero image.
  </Step>

  <Step title="Define the Slug">
    Enter a **Slug** to control the public URL of the page. Slugs support nested sub-directory paths — for example, `blog/article-name` resolves to `/blog/article-name` and `legal/terms-and-conditions` resolves to `/legal/terms-and-conditions`.

    To publish your **homepage**, set the slug to `home`. Site Store Pro serves any page with `slug = 'home'` at the root path `/`.
  </Step>

  <Step title="Choose a Layout">
    Select one of three layout options from the **Layout** dropdown:

    | Layout        | Value           | Description                              |
    | ------------- | --------------- | ---------------------------------------- |
    | Full Width    | `full`          | Content spans the entire page width      |
    | Left Sidebar  | `left_sidebar`  | Content area with a sidebar on the left  |
    | Right Sidebar | `right_sidebar` | Content area with a sidebar on the right |
  </Step>

  <Step title="Assign a Slideshow (Optional)">
    To display a slideshow at the top of the page, set **Include Top Header Slideshow** to the ID of a slide deck you have created in **Admin → CMS → Slideshows**. The slideshow renders above all page content.
  </Step>
</Steps>

<Note>
  The `/kb/` URL namespace is reserved for Knowledge Base articles. You cannot create a CMS page slug that begins with `kb/`. Any attempt to use that prefix will conflict with the built-in KB routes.
</Note>

## Header & Background Images

Open the **Header & Background Images** tab on any page to control how the page looks behind the content.

<CardGroup cols={3}>
  <Card title="Header Banner Image" icon="image">
    Upload a full-width hero image. Your page title — or an **Alternate Page Title** you specify — is rendered on top of the image.
  </Card>

  <Card title="Per-Page Background Image" icon="panorama">
    Override the global site background for this page only. The image displays fixed with `background-size: cover`.
  </Card>

  <Card title="Per-Page Background Video" icon="video">
    Set a video URL (local, S3, or CDN) to use as the page background. The video autoplays in a looping, muted, inline mode and takes the highest priority — it overrides both the global background and any per-page background image.
  </Card>
</CardGroup>

## Slideshow Manager

Build and manage slide decks at **Admin → CMS → Slideshows** (`/admin/cms/slideshows`). Each slide deck can contain multiple slides, and each slide supports:

* Background image
* Title and subtitle text
* Primary and secondary CTA buttons (text + URL)
* Text alignment (left, center, or right)
* Sort order

Once you have created a deck, assign it to a page via the **Include Top Header Slideshow** field, or embed it anywhere on a page using the slideshow shortcode:

```text theme={null}
[plugin:slideshow-2026 id=1]
[plugin:slideshow-2026 id=1 auto_play=1 speed=5000]
```

## Page Access Gating

You can restrict who can view any CMS page. Open **Page Access / Gating** on the page edit screen and configure the two gate controls.

| Product Gate | Code Gate | Result                                                                                           |
| ------------ | --------- | ------------------------------------------------------------------------------------------------ |
| Off          | Off       | Page is publicly accessible to everyone                                                          |
| On           | Off       | Blocked unless the visitor has a verified paid order for the specified product                   |
| Off          | On        | Blocked by a lock screen until the visitor enters the correct access code                        |
| On           | On        | **Dual-Gate** — satisfying *either* the purchase requirement *or* the correct code grants access |

To enable the **Product Gate**, select the product the customer must have purchased from the **Required Product** dropdown. To enable the **Code Gate**, toggle the **Require Access Code** option and enter the code visitors must supply to gain access.

## Shortcode System

Shortcodes let you embed dynamic content anywhere in the TinyMCE editor. Use the **Shortcodes Generator** drawer (described below) to build them without memorising IDs.

| Shortcode                                          | Purpose                                    |
| -------------------------------------------------- | ------------------------------------------ |
| `[page:ID]`                                        | Insert a link to another CMS page          |
| `[download:ID]`                                    | Embed a digital asset download button      |
| `[download:ID label="Download User Manual (PDF)"]` | Download button with a custom label        |
| `[code-embed:ID]`                                  | Render a saved reusable HTML/JS code embed |
| `[cms-form:ID]`                                    | Embed an interactive form                  |
| `[list-menu:ID]`                                   | Embed a structured navigation list menu    |
| `[plugin:...]`                                     | Embed any display plugin                   |

## Editor Sidebar Drawers

While editing a CMS page, four floating drawer tabs appear on the right side of the editor screen. Each drawer is a productivity tool that helps you build richer pages faster.

<Accordion title="Widgets Drawer">
  Browse a library of pre-built, responsive HTML components — hero sections, feature grids, alert banners, card layouts, and glassmorphism elements. Click **Insert Widget** to drop the component HTML directly into the editor at your cursor position.
</Accordion>

<Accordion title="Plugins Panel">
  Browse every installed display plugin. The panel shows the shortcode syntax, all available parameters, and their default values. Use this as a quick reference when building plugin embeds without leaving the editor.
</Accordion>

<Accordion title="Shortcodes Generator">
  Search and select any embeddable element — products, forms, downloads, menus, plugins — by name rather than by ID. Once you have found what you need, click **Insert into Editor** to place the shortcode, or **Copy Shortcode** to paste it manually.
</Accordion>

<Accordion title="Link Generator">
  Type any keyword into the real-time autocomplete search field. The generator searches across Products, Brands, Categories, and CMS Pages simultaneously and generates a properly formatted anchor tag. Click **Insert Link** to embed it at your cursor.
</Accordion>

<Tip>
  Use the built-in **AI Content Generator** to jump-start any page. In the page editor, open the AI Content Generator panel, type a descriptive prompt, and click **Generate Content with AI**. Site Store Pro auto-populates the editor with rich, structured HTML content that you can refine before publishing.
</Tip>