What Is a Slice?

On this page, you'll learn what Slices are and how you can use them to enrich the content modeling process.


Prismic Slices are sections of your website. Prismic documents contain a dynamic "Slice Zone" that allows content creators to add, edit, and rearrange Slices to compose dynamic layouts for any page design, such as blog posts, landing pages, and tutorials.

Slices are dynamic website sections

A Slice has three parts:

  • A Slice Model, which is a JSON data model saved in Prismic.
  • Slice Content, which is the content for an instance of a Slice.
  • A Slice Template, which is a component in your project codebase.

Your Slice Model defines the shape of the Slice content. Content creators can create an instance of a Slice and fill it with Slice Content. Then your developer can create a Slice Template in the code, which will render the Slice Content.

These three parts — Model, Content, and Template — form a marriage between the CMS and your website, allowing editors to create and rearrange Slices (website sections) freely without breaking the web app.

Your Slices are managed inside Slice Zones.

What is the Slice Zone?

The Slice Zone is where you can add and rearrange Slices.

Slices℠Editor
Sign Up
Info Box
Call to Action

You can find it in four places:

In the Builder

In Slice Machine, Slices become available in the page type's Slice Zone after creating them in the Slices tab. Slices can be shared between page types.

Slice Machine's Slice Zone

In the Legacy Builder, the Slice Zone is where you create, edit, and manage all of the Slice models.

Shared Slices are not available in the Legacy Builder

Please note that, unlike Slice Machine, Slices with the Legacy builder aren’t shared between types. You can create a copy of a Slice and store it in the Slice Library, but new changes in the models for these Slices will not be synchronized between types.

The Legacy Builder's Slice Zone

In the document editor

When editing a document, the Slice Zone gives authors the freedom to add and rearrange Slices.

In the API response

A document's Slice Zone can be found in the body property in the API response.

Note: Other names for the Slice Zone property

Most documents have one Slice Zone, stored in the body property. However, you can change the name of this property in your page type. And, if you add additional Slice Zones to a page type, they will be named body1, body2, etc.

For example, for a page type with the API ID of page you can access the Slice Zone in the data.body array of objects which lists all the Slices in the document. Here's a full example of this:

Copy
{
  "id":"XxnD3REAACYAk_CJ",
  "uid":"unique_value",
  "type":"page",
  "href":"https://your-repo-name.cdn.prismic.io/api/v1/documen8document.id%2C+%22XxnD3REAACYAk_CJ%22%29+%5D%5D",
  "tags":["…"],
  "first_publication_date":"2020-07-23T17:07:43+0000",
  "last_publication_date":"2021-04-21T18:31:50+0000",
  "slugs":["…"],
  "linked_documents":["…"],
  "lang":"en",
  "alternate_languages":["…"],
  "data":{
    "body":[
      {
        "slice_type":"image_gallery",
        "slice_label":null,
        "items":["…"],
        "primary":["…"]
      }
    ]
  }
}

In your project code

In your project code, the SliceZone is a component that renders Slices with a conditional function (such as a switch in JavaScript) inside of a loop (such as a forEach in JavaScript).

The syntax of these loop cycles varies between technologies, and there are Slice Zone packages available for some technologies. Learn how to create a Slice Zone with your favorite technology.

Slices configuration

In Slice Machine

Refer to the following document for how to create Slices with Slice Machine:

In the Legacy Builder

The first step is to enable the Slice Zone in your newly created custom type. Click the switch button, and the Add a slice button will appear.

Screenshot of an empty Slice Zone in the custom type builder

You'll see a configuration window to set the Slice's name and description. Select an icon, and pick either List or Grid to define how items should appear in the repeatable section.

Screenshot of the Slices editor.

The Slice Zone is the object with all the Slices in a page type. The following table displays the JSON structure for the Slice Zone.

body

object

Object to setup the Slice Zone

body.type

sting (required)

Value must be Slices

body.config

object

Configuration object for the Slice Zone

body.config.labels.[sliceID]

array

Key that matches a Slice's API ID

body.config.labels.[sliceID].name

string

Defines the tag that will be displayed in the API response object for this Slice

body.config.labels.[sliceID].display

string

Defines the display name for the tag in the document editor

body.config.choices

object

An object containing nested objects for each Slice

The following table displays the JSON structure for each Slice inside the Slice Zone. All Slices are located inside body.config.choices.

[sliceID]

string

Key that matches a Slice's API ID

[sliceID].type

string (required)

The value must be Slice

[sliceID].fieldset

string

The display name for the Slice in the document editor

[sliceID].description

string

The display description for the Slice in the document editor

[sliceID].icon

string

The icon of the Slice displayed in the document editor

[sliceID].non-repeat

object

The fields added to the Non-repeatable zone of a Slice

[sliceID].repeat

object

The fields added to the Repeatable zone of a Slice

API response example

Here is an API response example of a Slice Zone with three Slices: author, quote and content, each one with key text fields:

Copy
// API response example of a Slice Zone

{
  // ...
  "body":[
    {
      "slice_type":"author",
      "slice_label":null,
      "items":[
        {
          "author_name":"Victoria Doe"
        }
      ],
      "primary":{"…"}
    },
    {
      "slice_type":"quote",
      "slice_label":null,
      "items":["…"],
      "primary":{
        "quote_text":"consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    },
    {
      "slice_type":"content",
      "slice_label":null,
      "items":["…"],
      "primary":{
        "content_text":"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."
      }
    }
  ]
}

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.