How to Model a Brand Page

We commonly see brand pages on e-commerce sites where merchandisers publish inspiration content and feature products for a specific brand. Let's take a simple Brand page structure and see how to model it in Prismic.

Page structure

Static Fields
Dynamic Zone

This first "Hero" section is fixed on the page structure (a Brand page will always start with this component). We'll then configure the fields for this section into the "Static Zone" of the Custom Type:

  • Title field restricted to "h1", for the brand name
  • Image field for the brand logo
1 of 5
< PreviousNext >

We want content editors to be free to compose Brand pages using predefined components (we call them Slices). This first Slice is a simple component with a title and some text. We'll then add those fields into the non-repeatable zone of this Slice:

  • Title field restricted to "h2"
  • Rich Text field restricted to "p", for the paragraph text
2 of 5
< PreviousNext >

We just need 2 fields in the non-repeatable zone of this video Slice:

  • Title field restricted to "h2", for the section title
  • Embed field where editors will paste the URL of the video to be displayed
3 of 5
< PreviousNext >

This Slice shows a section title and featured products that editors can handpick from the e-commerce backend:

  • Title field in the non-repeatable zone, restricted to "h2"

In the repeatable zone:

  • Integration field configured to pull product data from the e-commerce backend
4 of 5
< PreviousNext >

Here we want content editors to be able to handpick category pages that are related to the brand:

  • Title field in the non-repeatable zone, restricted to "h2", for the section title

In the repeatable zone:

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

How to set it up in Prismic

  • Create 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