What Is a Slice?

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.

You can find it in four places:

In Slice Machine

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.

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.

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

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:

• Slice Machine's slices

  Learn how to create and edit slices in 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.

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.

The following table displays the JSON structure for each slice inside the slice zone. All slices are located inside body.config.choices.

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:

// API response example of a slice zone

{
  // ...
  "body": [
    {
      "slice_type": "quote",
      "slice_label": null,
      "primary": {
        "quote_text": "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    },
    {
      "slice_type": "content",
      "slice_label": null,
      "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."
      }
    }
  ]
}