PrintNowPrintNowDocs
Content

Landing Pages

Create curated landing pages that combine categories, other landing pages, and visual groups into a single browsable page on your storefront.

Landing Pages let you build custom entry points for your storefront that aggregate categories, other landing pages, and visual groups into a single page. Each landing page has its own SEO-friendly URL, hero image, CMS content area, and a configurable hierarchy of child items that display as linked cards with thumbnails.

Use landing pages to create seasonal promotions, product showcases, curated browsing experiences, or any page that needs to present a mix of categories and sub-pages in a structured, visual layout.

View Landing Pages

  1. From your Unified Admin, go to Content > Landing Pages.
  2. The list displays all landing pages for the current storefront in a hierarchical tree grid.
  3. Each landing page row expands to show its child items (categories, nested landing pages, and groups).
  4. Click Add to create a new landing page.
  5. Click the Edit icon on any row to open the landing page editor.
  6. Click the Delete icon to remove a landing page (with confirmation).

Tree Grid Columns

ColumnDescription
NameThe page title, displayed hierarchically with parent-child indentation. Child items show their type-specific name (category name, landing page title, or group name).
TypeThe child item type: Category, LandingPage, or Group. Root-level landing pages do not display a type.
ActionEdit (opens the landing page editor for root items, or the group editor for Group-type children) and Delete.

Add a Landing Page

  1. From the Landing Pages list, click Add.
  2. Enter a Page Title in the dialog.
  3. Click Save. The landing page is created with:
    • An auto-generated SEO record and URL
    • Published set to off (draft state)
    • No child items, image, or CMS content
  4. The new page appears in the tree grid. Click Edit to configure it.

Edit a Landing Page

  1. From the Landing Pages list, click the Edit icon on any landing page.
  2. The editor opens with a left panel for the hero image and child item tree, and a right-side drawer for content and SEO settings.
  3. Configure children, upload an image, edit CMS content, and adjust page settings.

Hero Image

The left sidebar displays the landing page's hero image. This image is used as the page thumbnail when the landing page appears as a child of another landing page.

  1. Click Choose File to select an image from your computer.
  2. Supported formats: JPG, JPEG, PNG, JFIF, BMP, SVG, WebP.
  3. A 200x200 preview displays after selection.
  4. Click Save to upload the image.

Child Items

The main area displays a tree grid of the landing page's child items. Children appear as linked cards with thumbnails on the storefront.

  1. Click Add to open the Add Child dialog.
  2. Drag root-level items to reorder them. The sort order is saved automatically.
  3. Click the Edit icon on a Group-type child to modify its contents.
  4. Click the Delete icon to remove a child item.

Add a Child Item

The Add Child dialog lets you attach categories, landing pages, or groups to the current landing page.

FieldDescription
TypeSelect the child type:
Category — links to one or more product categories
LandingPage — links to one or more other landing pages (circular references are prevented automatically)
Group — creates a named visual group that contains its own set of categories and landing pages
CategoriesMulti-select dropdown. Visible when Type is Category or Group. Select one or more product categories to include. Categories already added to this landing page are excluded from the list.
Landing PagesMulti-select dropdown. Visible when Type is LandingPage or Group. Select one or more landing pages to include. Pages that would create a circular reference (ancestors of the current page) are excluded.
Group NameText input. Visible only when Type is Group. The display name shown as the group heading on the storefront.

Content Editor

Click the settings drawer toggle to open the CMS content editor on the right side. The content area provides two editing modes plus a fullscreen toggle:

Design View — A Froala WYSIWYG editor for visually composing page content. Includes a Snippets dropdown in the toolbar to insert HTML snippet references using {{snippetName}} template syntax. The editor loads the storefront's CSS files for accurate preview styling.

Code View — A Monaco code editor (VS Code engine) with HTML syntax highlighting, minimap, and auto-formatting for editing the raw HTML directly.

Fullscreen — Click the fullscreen icon tab to expand the editor to fill the entire screen.

The CMS content renders above the child item cards on the storefront.

Page Details

The right-side panel contains page configuration fields:

FieldDescription
PreviewButton that opens the landing page on the live storefront in a new browser tab. Disabled if the page is not published.
Page TitleThe display title for the page, shown in the page heading and browser tab.
LayoutDropdown to set the page container width:
Default — standard layout
Fixed Width — content wrapped in a fixed-width container
Full Width — content spans the full browser width
Req. LoginCheckbox. Restricts access to authenticated customers only. Anonymous visitors are redirected to the login page.
PublishedCheckbox. Controls whether the page is live on the storefront. Unpublished pages are not accessible to customers.

Page SEO

Below the Page Details panel, the SEO section controls search engine optimization fields:

FieldDescription
Friendly UrlThe SEO-friendly URL path for the page (e.g., holiday-specials). Customers access the page at yourdomain.com/holiday-specials. Must be unique within the storefront.
Meta TitleThe HTML meta title tag. Appears in browser tabs and search engine results.
Meta KeywordsThe HTML meta keywords tag for search engines.
Meta DescriptionThe HTML meta description tag. Shown as the page summary in search engine results.

Child Item Types

Landing pages support three types of child items, each rendering differently on the storefront:

Category

Links directly to a product category. The card displays the category's thumbnail image and name, and links to the category browsing page. You can add multiple categories at once from the Add Child dialog.

Landing Page

Links to another landing page, creating a nested browsing hierarchy. The card displays the target landing page's hero image and title. Circular references are prevented — you cannot add an ancestor page as a child. You can add multiple landing pages at once.

Group

A visual container that groups multiple categories and landing pages under a named heading. Groups render as a bordered section on the storefront with the group name as a header, and the group's children displayed as cards within it. Groups are useful for organizing related items into labeled sections on a single page.

Custom Templates

Landing pages support Mustache-based custom templates for full control over the page layout. If a landing-page.mustache file exists in the storefront's theme template directory, it is used instead of the default card layout.

The template receives the following data:

VariableDescription
{{PageContent}}The rendered CMS HTML content for the page (triple-mustache for unescaped HTML: {{{PageContent}}}).
{{Children}}All child items (categories, landing pages, and groups) sorted by display order.
{{Categories}}Only the category-type children.
{{Pages}}Only the landing page-type children.
{{Groups}}Only the group-type children. Each group has a nested {{children}} array.

Each child item in the template provides {{name}}, {{url}}, {{thumbnail.url}}, and {{isGroup}} properties.

Associations

AreaEffect
SEO URL routingEach landing page's Friendly URL is registered in the storefront's SEO routing system. When a customer visits the URL, the storefront resolves it to the landing page view and renders its content and child items.
Storefront navigationPublished top-level landing pages (those not nested as children of other landing pages) are available to theme templates via the GetLandingPages() helper, enabling them to appear in site navigation menus.
Category integrationCategory-type children link directly to the storefront's category browsing page, using the category's thumbnail image and name.
Page renderingThe storefront renders landing page CMS content through the CMS Content control, which processes HTML snippet references and link placeholders before displaying the final HTML.
Login restrictionPages with Req. Login enabled redirect anonymous visitors to the login page. After authentication, the customer is redirected back to the landing page.
Theme templatesLanding pages support custom Mustache templates (landing-page.mustache) for full layout control. If no custom template exists, the default card-based layout is used.
  • Page Content — create custom CMS pages that can serve as landing page content sources
  • Category Content — manage content for the product categories linked as landing page children
  • HTML Snippets — reusable HTML blocks that can be embedded in landing page CMS content
  • Product Content — manage product descriptions for items within linked categories
  • Page Templates — customize the Mustache templates used to render landing pages
  • Data Properties — reference for template variables available in landing page templates
  • Object Models — data structures for landing page children, categories, and groups

HTML Snippets

Create reusable HTML content blocks that can be embedded in any CMS page, blog post, product, or category content using template syntax.

Page Content

Create and manage CMS pages with custom HTML content, SEO settings, tabbed layouts, and access controls for your storefront.

On this page

View Landing PagesTree Grid ColumnsAdd a Landing PageEdit a Landing PageHero ImageChild ItemsAdd a Child ItemContent EditorPage DetailsPage SEOChild Item TypesCategoryLanding PageGroupCustom TemplatesAssociationsPrint StoreRelated Pages