---
title: Model commerce presentation components with Page Builder
---

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

When building commerce experiences with Xperience by Kentico (XbyK), your [content types](https://docs.kentico.com/guides/architecture/content-modeling/content-modeling-guide/what-is-a-content-type.md) 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](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md) _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.

> **Tip:** **Companion to the commerce content modeling guide**
>
> If you haven't designed your commerce content types yet, start with [Model reusable Product SKU](https://docs.kentico.com/modules/commerce-content-modeling/model-reusable-sku-product-intro.md) and [Model reusable product](https://docs.kentico.com/modules/commerce-content-modeling/model-product-content-type-intro.md) guides to understand how reusable content works. Then go through [modeling commerce page content types](https://docs.kentico.com/modules/commerce-content-modeling/model-commerce-pages-intro.md) to define website pages and listing pages to display the content. The following sections build on those content types and focus on the presentation components editors use to display them.

## 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](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/page-templates-for-page-builder.md), [sections](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/sections-for-page-builder.md), and [widgets](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/widgets-for-page-builder.md) 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:

```markdown title="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](https://docs.kentico.com/guides/architecture/content-modeling/model-website-presentation-components/model-page-builder-widgets.md) and [modeling Page Builder sections](https://docs.kentico.com/guides/architecture/content-modeling/model-website-presentation-components/model-page-builder-sections.md). The following parts focus on applying these concepts to commerce scenarios.

> **Tip:** We recommend building every page on a _page template_ and using _Page Builder_ widgets to display the data. That's why, in this material, we'll start with **widgets**, then cover **sections** and **page templates**, and finish with some general recommendations.