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.
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.
The Slice Zone is where you can add and rearrange Slices.
You can find it in four places:
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.
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.
When editing a document, the Slice Zone gives authors the freedom to add and rearrange Slices.
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:
{
"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, 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.
Refer to the following document for how to create Slices with Slice Machine:
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.
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.
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
Here is an API response example of a Slice Zone with three Slices: author, quote and content, each one with key text fields:
// 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?
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.