How to Model a Recipe Page

This guide will help you create a recipe page which is repeatable so that you can create recipes content on the fly to enrich your platform.

Page structure

Static Fields
Dynamic Zone

This is the top section of your page. It's static which it will always stay on the top of this page. It consists of:

  • Title field restricted to "h1", for the recipe name
  • Image field for the recipe illustration
  • Key text field for the time required to prepare this recipe
  • Select field with defined options to choose the level of difficulty of this recipe
  • Number field to estimate the number of servings
  • Select field with defined options to choose the cost level of this recipe
1 of 5
< PreviousNext >

This section is the first slice of your page. It is dedicated to add a tutorial of the recipe. It consist of:

  • Title field restricted to "h1", for the tutorial section title
  • Embed field to embed the URL of your video hosted on YouTube for example

2 of 5
< PreviousNext >

This is a second Slice which will handle the ingredients section of the recipe page. It consists of:

In the non-repeatable zone:

  • Title field restricted to "h1", for the item section title

In the repeatable zone::

  • Key text field for the repeatable items listed in this section
3 of 5
< PreviousNext >

This third section of your page will re-use the same Slice as above since both sections are similar in structure. Just choose the component that already created in your template to add it and enrich with your content for Ustensils needed for this recipe.

4 of 5
< PreviousNext >

This is the last Slice of this example Recipe page. It will cover the different steps to follow for the recipe. It consists of:

In the non-repeatable zone:

  • Title field restricted to "h1", for the item section title

In the non-repeatable zone:

  • Title field restricted to "h3", for the title of step (e.g Step 1, Step One)
  • Rich Text field for the description of the step. You'll have the option to allow different formatting options

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