---
title: Design commerce page templates
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

## Design page templates

[Page templates](https://docs.kentico.com/documentation/business-users/website-content/page-templates.md) define the page-level structure and guide the editing experience for a specific page [content types](https://docs.kentico.com/documentation/developers-and-admins/development/content-types.md).

_Page templates_ specify available [areas](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/create-pages-with-editable-areas.md) editors use to design a page's layout and add content. _Page templates_ often contain [properties](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/page-templates-for-page-builder/page-template-properties.md) editors can use to adjust configurations of global elements, such as showing or hiding logo or navigation, selecting a specific style, or page color mode.

### Add flexibility with Page Builder

In many commerce projects, you don't want editors to manually craft every page from scratch or freely rearrange the layout of every element. Too much freedom leads to inconsistent product pages, different-looking listing pages, and a fragmented shopping experience.

Instead, aim for a uniform look and feel across all pages of the same type. Every product detail page should follow the same layout. Every listing page should present filters, sorting, and product cards in the same predictable structure. Consistency builds trust with shoppers and reduces the editorial effort needed to maintain large catalogs.

Xperience supports two approaches to achieve this consistency:

1. **Preset page templates** – Editors or architects design [reusable preset templates](https://docs.kentico.com/guides/digital-marketing/work-with-websites/create-a-reusable-landing-page-template.md) with predefined sections, widgets, and layout configurations. Developers can then [programmatically assign](https://docs.kentico.com/documentation/developers-and-admins/api/content-item-api.md) these presets when [creating pages using the API](https://docs.kentico.com/guides/development/commerce/create-page-wrapper-for-ch-products.md), ensuring every new product or listing page starts with the correct structure.

2. **Fixed layout templates** – Developers build _page templates_ where most content renders automatically in designated positions. Product images, descriptions, pricing, variant selectors, recommended products, and cross-sell or upsell sections all appear in consistent locations driven by the content model rather than manual editor placement.

> **Tip:** **Add editable areas even to fixed templates**
>
> Even when a page template defines a fixed layout, add _Page Builder_ [editable areas](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/create-pages-with-editable-areas.md) to listing pages and product detail pages. _Page Builder_ widgets allow editors to tailor page content for specific audiences using [personalization](https://docs.kentico.com/documentation/developers-and-admins/digital-marketing-setup/content-personalization.md) – for example, showing a loyalty discount banner to returning customers who regularly purchase a product, or adding a seasonal promotion section to a specific product category page.

### Template examples from the pet store scenario

Like the widget examples above, the following templates are **conceptual blueprints** for the pet store scenario. They cover the most common commerce page types. Each template suggests properties and widget combinations that demonstrate how to balance structured consistency with editorial flexibility. Adapt them to match your project's content types and design requirements.

### Pet Listing template

Dynamically displays multiple pets available for adoption with filtering and grid layout options.

**Template properties:**

- Page title (Text - Displayed as page heading)
- Page description (Rich text - Introductory text below title)
- Filter configuration (Taxonomy selector - Pet types, age ranges, size categories)
- Grid layout (Dropdown - 2-column, 3-column, 4-column)
- Results per page (Number - Default: 12)
- Default sort order (Dropdown selector - Newest first, name A–Z, name Z–A)

**Additional configuration**

- **Available sections:** All section types.
- **Recommended widgets:** **Pet Card** widget, **Image** widget, **Video** widget, **Testimonial** widget, **CallToAction** widget, **Product Card** widget for recommended accessories, food, and treats, and other relevant content.
- **Use case:** Pages like _/adopt/dogs_ or _/adopt/cats_.

### Pet Detail template

Displays an individual pet profile with adoption information.

**Template properties:**

- Show adoption status badge (Boolean - Displays availability indicator)
- Show related pets (Boolean - Displays similar pets at the bottom)
- Application CTA style (Dropdown - Depends on the brand design manual, e.g., Primary, Secondary, Sticky)

**Additional configuration:**

- **Available sections:** SingleColumnSection, TwoColumnSection.
- **Recommended widgets:** HeroBannerWidget, ImageWidget, FAQListWidget, CallToActionWidget
- **Use case:** Pages like _/adopt/dog/blackie_ or _/adopt/cats/whiskers_

### Product Listing template

Displays a commerce product catalog with search, filtering, and sorting capabilities.

**Template properties:**

- Listing title (Text - Category or catalog heading)
- Listing description (Rich text - Category introduction)
- Product filter criteria (Taxonomy selector - Product categories, brands, price ranges)
- Grid layout (Dropdown - 2-column, 3-column, 4-column, list view)
- Enable search (Boolean - Shows search bar above results)
- Enable sorting (Boolean - Sort by price, name, popularity)
- Enable attribute filtering (Boolean - Filter by size, brand, etc.)
- Products per page (Number - 12, 24, or 48)
- Show "Add to Cart" in grid (Boolean - Enables quick add from listing)

**Additional configuration:**

- **Available sections:** All section types
- **Recommended widgets:** ProductCardWidget, HeroBannerWidget, CallToActionWidget
- **Use case:** Pages like _/shop/dog-food_ or _/shop/accessories_

### Product Detail template

Displays an individual product with purchase options, variant selectors, and related products.

**Template properties:**

- Show reviews section (Boolean - Displays customer reviews)
- Show related products (Boolean - Displays similar products)
- Related products count (Number - 4, 6, or 8)
- Enable variant selector (Boolean - For size/flavor/color variants)
- Sticky add-to-cart position (Dropdown - Top, side, bottom)

**Additional configuration:**

- **Available sections:** SingleColumnSection, TwoColumnSection
- **Recommended widgets:** ProductCardWidget (related products), TestimonialWidget, FAQListWidget, ImageWidget, VideoWidget
- **Use case:** Pages like _/shop/products/premium-dog-food-25lb_

### Campaign Landing template

Marketing campaign pages with maximum editorial flexibility, designed for promotions and special offers. Design these templates to allow as much flexibility as possible, meaning editors will build these pages as one-offs using the _Page Builder_.

**Template properties:**

- Campaign name (Text - Internal tracking label)
- Campaign tracking code (Text - For analytics integration)
- Enable exit-intent popup (Boolean - Shows popup when visitor navigates away)
- Hero style (Dropdown - If you don't provide a dedicated section for hero configuration, your template property might include configuration for the hero area, e.g., Image, video, Split-screen)
- Form placement (Dropdown - Top, middle, bottom, sidebar in case editors don't use the built-in [Form](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md#widgets) widget.)

**Additional configuration:**

- **Available sections:** All section types (unrestricted)
- **Recommended widgets:** All widgets - maximum flexibility for campaign creativity
- **Use case:** Pages like _/promotions/summer-sale_ or _/campaigns/new-customer-offer_

> **Info:** **Consider a Homepage template**
>
> Many pet store projects also benefit from a dedicated Homepage template with properties for featured pet spotlights, promotional banners, and quick navigation to adoption categories and product collections. Design the Homepage template with all section types available and a mix of Mixed content widgets (for promotional flexibility) and Referenced content widgets (for consistent branding).