How to model a product page

Product pages on e-shops can be boring. Adding inspiration content and storytelling on your PDPs boosts SEO and conversion rates. Let's see how to enrich a product page with content components managed in Prismic.

Page structure

Static Fields
Dynamic Zone

This section displays the core product data. Let's assume that the source of truth for this data is an external e-commerce backend, we then use one Integration Field in the fixed section of the custom type.

From here content editors will be able to select the product from the product catalog.

The core product data will be pulled from the source of truth, embedded in Prismic API response and will keep synced with the data source.

1 of 4
< PreviousNext >

The Slice Zone will be used by content editors to enhance this basic Product page with rich content.

This first Slice is a simple Video component allowing to control the section title and input a video URL:

  • Title field for the section title, restricted to "h2"
  • Embed field for pasting the video URL
2 of 4
< PreviousNext >

We just need 3 fields in the non-repeatable zone of this editorial Slice:

  • Image field
  • Title field for the section title, restricted to "h2"
  • Rich text field restricted to "p", for the paragraph text

Additionally, we need to configure 2 "labels" for this Slice so that content editors can control the image alignment.

To populate this example, content editors will use two Slices and will switch the label to get the expected alignment.

3 of 4
< PreviousNext >

We need 2 things for this featured product Slice

In the non-repeatable zone

  • Title field for the section title, restricted to "h2"

In the repeatable zone

  • Content Relationship field restricted to the "product" Custom Type - so that only documents of the "product" type can be linked here
4 of 4
< PreviousNext >

How to set it up in Prismic

  • Set up a new repeatable Custom Type
  • Copy the JSON below and paste it under the JSON editor of this new custom type

You need to have Integration Fields enable on your repository for this JSON to work. This Custom Type definition below uses an Integration Field for pulling and syncing Product data from an external system. To get Integration Fields enabled on your repository, just ask on the chat. Also, in the following example, the "product" Integration Field is pulling data from a demo endpoint. See how to replace this data source with yours in this video.


What editors will see

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call