Integrate an Editorial Section with Your Product Page

Enterprise plans

A common use case with a visual CMS is to have a region on your product page for adding more editorial about the given product — or for all products of a given type or collection. This could include content such as storytelling, imagery, videos, recommended products, and other merchandising.

Model definition

A standard section model named product-editorial is all you need.

By default you don't need any fields. Instead, this example uses targeting to decide where the section should display; such as for a given product or any product of a certain collection.

Custom targeting or an e-commerce plugin can help provide the UI fields for picking product and collections where this section shows.

Example Code

Framework

Meta-Framework

SDK Generation

The Next.js shows and example in pages/products/[product].jsx:

import { BuilderComponent, builder } from '@builder.io/react'; // Replace with your Public API Key. builder.init(YOUR_API_KEY); export async function getStaticProps({ params }) { // Get the product details from your ecom backend const product = await getProduct(params.product) const editorial = await builder .get('product-editorial', { userAttributes: { // This helps you target different product editorials // to different URL paths. Optionally add other properties to target // on here too urlPath: `/products/${params.product}`, // Allow targeting a section by a specific product ID (or perhaps handle) productId: product.id, // Optionally, allow targeting any product in a collection collection: product.collection } }) .toPromise(); return { props: { product, editorial: editorial || null, }, }; } export default function Page({ editorial, product }) { return ( <> {/* Put your header here. */} <YourHeader /> <YourProductInfo product={product} /> <BuilderComponent model="product-editorial" content={editorial} /> {/* Put the rest of your page here. */} <YourFooter /> </> ); }