Module: Commerce content modeling
19 of 38 Pages
Model a product listing page
Model the Product wrapper page content type
Your Product page content type provides the browsable URL (or its vanity URLs) and channel-specific context for displaying a product on your website. The most important field in your wrapper is the Product reference. Use a content item selector configured to accept only your Product content type (or specific product variants if you support multiple product types). Set this field as required. To guide the editors, use a clear field label like Select Product to Display with a helpful description: Choose the reusable product this page will showcase.
Pattern takeaway: Restrict wrapper page selectors to valid product types and add clear guidance to reduce editor mistakes.
Create or reuse an SEO metadata schema for search engine optimization fields. This schema can include, for example:
- SEO title (text field to override the default title for search results),
- SEO meta description (text area for the snippet shown in search results),
- Canonical URL (to handle duplicate content across channels or pages),
- Sitemap inclusion (checkbox to control whether this URL appears in sitemap.xml),
- No-index directive (checkbox to prevent search engines from indexing this page, empty by default to make the page indexable),
- SEO structured data (opens in a new tab) (structured data that developers generate into the page HTML markup),
- Other project-specific SEO fields.
Pattern takeaway: Keep SEO and Open Graph fields at the wrapper page layer so channel metadata stays separate from reusable product data.
Create or reuse an Open Graph metadata schema for social sharing. Review the Kbank demo site's Open Graph reusable field schema for inspiration. At a minimum, include:
- OG title (may differ from your SEO title, optimized for social networks),
- OG description (optimized for social sharing, may differ from SEO description),
- OG image (optimized for social media dimensions, may differ from your product's primary image),
- Platform-specific properties for Facebook or Twitter cards.
Create dedicated fields or reuse a Page publishing schema for content management. You can include fields, such as Publish date (override the default if needed), last updated date (can be system-generated or manually overridden), and author or owner assignment.
Though we recommend using Page Builder widgets to extend or customize the core product data, you might need to, in some cases, add website-specific presentation fields to your product page. Editors will use them to customize how the product appears on your website, and you need this data in a structured format. We have seen customers use fields such as the hero banner image (different from the product's main image and specific to your website channel), featured callout texts (promotional text that appears only on this specific page), and page-specific calls to action (custom CTAs for this landing page).
Use Page Builder widgets to present product data on your wrapper pages rather than adding content fields to the Content tab. Using widgets provides editors with more flexibility, supports personalization for different audience segments, and makes the editing experience more intuitive.