How to model e-commerce inspirational pages

Inspirational content is widely used on e-commerce sites to promote products and enhance SEO. This example uses an Integration Field for content editors to pick product data from any external system. You can learn more about Integration Fields here.

Page structure

Static Fields
Dynamic Zone

Our inspiration page template has a fixed header with a Title and a short introduction.
We will then configure two fields in the fixed part of the custom type:

  • Title field for the Inspiration Page title
  • Rich text field for the short introduction paragraph, restricted to "p"
1 of 3
< PreviousNext >

After the fixed header, we want content editors to build a story by choosing content components of their choice. We'll then enable the "Slice zone" and configure some Slices.

For this first editorial Slice, we'll configure two fields in the non-repeatable zone:

  • Image field for the image
  • Rich Text field for the text, restricted to "h2" to allow editors to add headings, and "p" for plain paragraph text
2 of 3
< PreviousNext >

The products links, images, prices and names will come directly from your product catalog through an Integration Field. The CTA value of each product will be managed with a Key Text field.

3 of 3
< 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.

CopyExpand/Collapse

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