How to Model an E-commerce Product Listing Page

A product listing page (PLP) made of rich components is crucial for a good e-commerce experience. By using Slices in your content model, content editors can use components in the CMS to enrich the PLP layouts.

Page structure

Static Fields
Dynamic Zone

The main hero banner of your category that consists of:

  • Image field for the background image
  • Title field for the category main title (usually restricted to "h1")
1 of 6
< PreviousNext >

For this first section, we'll create a "Featured Products" Slice with this configuration:

In the non repeatable zone :

  • Title field restricted to "h2"

In the repeatable zone:

  • Content Relationship field to a product page
    OR
  • Integration Fields for editors to select the product to show
2 of 6
< PreviousNext >

This section does not render static content from your Prismic repository.
This section lists your products rendered by your e-commerce platform or your PIM.

3 of 6
< PreviousNext >

This is a promotional banner to be inserted between product rows that consists of:

  • Image field for the banner image
  • Link field to lead to another page
4 of 6
< PreviousNext >

This section does not render static content from your Prismic repository.
This section lists your products rendered by your e-commerce platform or your PIM.

5 of 6
< PreviousNext >

A slider or a list of featured inspirational content from your blog or this same website.
It consists of:


In the non repeatable zone :

  • Title field restricted to "h2"

In the repeatable zone:

  • Content Relationship field to another content
6 of 6
< 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 enabled 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