Design commerce page templates

Page templates define the page-level structure and guide the editing experience for a specific page content types.

Page templates specify available areas editors use to design a page’s layout and add content. Page templates often contain properties 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 with predefined sections, widgets, and layout configurations. Developers can then programmatically assign these presets when creating pages using the API, 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.

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