How to create a category page

This custom type aims at linking parent pages to a child category.

First, your main content should be ready and your category pages as well. Once the content ready, you'll be able to make the link happen thanks to a content relationship field in the main document.

Start with your design

For the purpose of this article find below a sample design of how your category page might look like. A category custom type will be a repeatable type of template so that your content editors can create different category pages.

Follow those steps to understand how this design has been modeled into a custom type in Prismic.

We recommend keeping this in the static part of your custom type. Drag and drop a title field for the first step.

1 of 3
< PreviousNext >

Drag and drop a rich text field for a description of the category.

2 of 3
< PreviousNext >

Drag and drop an image field for the image of the category.

3 of 3
< PreviousNext >

The content model

In this modeling example, we chose to use only the static part of the Custom Type.

The static section of our category will contain the following elements:

One Title field for the category name

The Title field in Prismic is meant to be used to manage titles. The formatting options can be constrained to predefined heading levels (h1, h2, h3, h4, h5, h6). In this case, we've limited the formatting options to "h1" because we don't want the content editors to be able to change the heading level.

One Rich Text field for the description

The Rich Text field is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a title or a paragraph, make it bold, add links, etc. It can also be restricted to a set of formatting options.

One Image field with responsive views for an image

We are using an Image field to manage the image of the category if you have any. This field allows content editors to upload images directly in Prismic. The image field provides options to create responsive versions of a single image. It means that you can get multiple predefined versions of the same image.

How to set it up in Prismic

First, set up a new repeatable Custom Type and then drag and drop the fields described above in the Static Zone.

If you want to try this Custom Type in Prismic, copy and paste the following JSON in the JSON editor in the top-right corner of your Custom Type as shown in the GIF below.

JSON structure

You can copy the following into the JSON editor of your custom type builder.

CopyExpand/Collapse

What editors will see

When an editor creates a document based on this Category Custom Type, the writing room will look like this:

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