How to model a e-commerce homepage

A homepage 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 and build rich page layouts.

Page structure

The navigation items are handled into dedicated Prismic documents. Learn how to model a e-commerce navigation in Prismic.

1 of 4
< PreviousNext >

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

In the non repeatable zone :

  • Title field restricted to "h2"
  • Rich text field restricted to "p", for the paragraph text
  • Image field for the background image
  • Key text field for the CTA label
  • Link field for the CTA target
2 of 4
< PreviousNext >

The Hotspot component will be composed as follows.

In the non-repeatable zone:

  • Image field for the main image

In the repeatable zone:

  • Range fields for horizontal and vertical position of each spot
  • Integration Field for editors to select the product to show

Product bubbles are showing core-product data (name, image, price, link) all coming directly from our product catalog through an Integration Field.

3 of 4
< PreviousNext >

This Grid component lets marketing users add as many blocks as they want and order them.

In the repeatable zone:

  • Image field for the main image
  • Title field restricted to "h3"
  • Key text field for the CTA label
  • Link field for the CTA target
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 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