Model commerce presentation components with Page Builder

When building commerce experiences with Xperience by Kentico (XbyK), your content types determine what data you store and how you store them, while the presentation components determine how editors assemble and display that data on the website. The following sections focus on the presentation layer - Page Builder page templates, sections, and widgets – using a pet store commerce scenario with pet adoption services and a product catalog as an example.

You’ll learn how to design presentation components that let editors reference structured content from the Content hub while keeping the flexibility to override content for marketing campaigns, A/B testing, and personalization.

Page Builder presentation overview

Xperience by Kentico’s Page Builder relies on a three-layer architecture for website content:

1. Content types – represent the data structures for content items stored in the Content hub (products, pets, testimonials, articles) or in a structured format in website pages.
2. Presentation components – page templates, sections, and widgets that define how content appears on the website, and allow editors to store channel-specific content.
3. Page instances - specific pages where editors assemble content using presentation components.

Presentation components are the reusable building blocks that connect your content model to the pages people actually see. When they’re well designed, editors can mix and match them to create engaging pages that won’t break the website channel’s look and feel. They keep design consistent across the site, enable campaign optimization and personalization, and give teams creative freedom while staying within brand guardrails.

Every page follows a component hierarchy:

Content type (defines page data, can consist of a reusable content type with data, and a website content type with page-specific data)
└── Page Template (defines page structure and available components)
    └── Section (controls horizontal and vertical page layout)
        └── Widget (displays content from various sources)
            └── Content (data from *Content hub* or stored on page)

For a deep dive into widget theory and section design principles, see the guides on modeling Page Builder widgets and modeling Page Builder sections. The following parts focus on applying these concepts to commerce scenarios.