How to Model a Pricing Page

If you're running a SaaS product or service - it's essential to have a clear and straightforward pricing page. In this guide, we will showcase how to build compelling content modeling for pricing pages using Slices.

Page structure

Static Fields
Dynamic Zone

We'd recommend creating a static zone for fields that should always be there (like hero banner titles, header image, author names).

  • Title field with h1 for the heading title.
  • Rich Text field for optional section description.
1 of 3
< PreviousNext >

"Pricing table" slices will be inside the dynamic Slice Zone.

In the non-repeatable zone:

  • Title field with h3 tag for the plan's title.
  • Key Text for the indicated price of the plan.
  • Key Text field for the CTA text.
  • Link field for the CTA link.

In the repeatable zone:

  • Image field for a small pictogram for the state of the feature
  • Rich Text for the feature title/description
2 of 3
< PreviousNext >

"Features" slice will present company's products and services main feature.

In the non-repeatable zone:

  • Title field with h3 tag for the plan's title.
  • Key Text for the indicated price of the plan.
  • Key Text field for the CTA text.
  • Link field for the CTA link.

In the repeatable zone:

  • Image field for a small pictogram for the state of the feature
  • Rich Text for the feature title/description
3 of 3
< 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
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