Send Slices to Prismic

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This article explains how to push Slices from The Slice Builder to the Prismic UI and make them available for content editors.


🕚 Before starting

This article is the final of 3. Please read the Create and Model a Component & Code & Style Components articles before continuing :)


Open the Slice Builder

Now that you've created your Slice, plus coded and styled the component using its mock data, you can send this Slice to Prismic for your content editors to use in their documents.

Run the Slice Builder if it's not running already:

Copy
prismic sm --develop

Now, if you visit http://localhost:9999/ you should be able to see the home screen of The Slice Builder. 😃


Push Slice models to Prismic

Now that you've created your Slices, plus coded and styled the component using its mock data, you can push your Slices to Prismic to create Custom types models that your content editors use in their documents.

Add component previews

You can choose to have component preview images for each of your Slices so that they appear in the UI of your documents. There are a few options for doing this:

  • Automatic screenshots: These images are auto-generated from your Storybook. The mock data that you use in your fields will appear here. To use them, open your Slice and click 'Take Screenshot'. Then, a preview of your component will appear in the Slice builder.
  • Custom Previews: To add custom images, add an image named preview.png in the folder of your Slice in your project. For example, if your Slice name is HeroSlice, the path will be ~.slicemachine/assets/slices/HeroSlice/preview.png. Doing so will overwrite the default Storybook image.
  • Placeholders: If you haven't created a preview/screenshot for your component push your Slice to Prismic anyway, but this will make it harder for your users to make a choice.

Following our example, Open the TextImageRight Slice and click the Take screenshot button.

Broken screenshot?

Sometimes the builder might not be able to generate the screenshot. This can be caused by 2 things:

1. Storybook is re-rendering your Slice, in that case re-clicking the 'Push to file system' button will resolve the issue.
2. Updating or deleting a field might cause the component to break, in this case, you will need to update your component first and make sure it renders correctly.


Push Your Slices

The next step is to Push your Slices to Prismic. This step is needed to make your Slices available everywhere in your repository. That way you can connect them to any Custom types that you create.

To perform this step, head to the Prismic builder, open a Slice, and after adding all the necessary changes, you're able to select save to the filesystem first and then 'Push to Prismic'.

If you've been following along the examples where we created a Slice with variations, you know that until now, we have only saved the models into the filesystem. Let's move on to the next step. Open the TextImageRight Slice in the Slice Builder, and click the 'Push to Prismic' button.

Once you push Slices from The Slice Builder, they will be available to select them in your Custom Types. We'll see how to build these in the next section.

Add Shared Slices to Custom Types

This is the final step before your content writers can use your Slices in their documents. Here you'll decide which Custom Types to make your Slices available for.

Create a new Custom Type

If you don't already have a custom type, you'll need to make a new one. We have a dedicated guide to teach you how to build your Custom Type models here:


Select Your Slice in the Custom Type

Once you've created your Custom Types, you'll be able to select which of your recently pushed Slices you wish to add to these Custom Types. By having the ability to dictate which Slices are available to use on which Custom Types, you can restrict the design of different pages and give your content creators different options for different use cases.

To do this go to the Custom Type builder, open a Custom Type and click on the 'Edit Slices' button in the SliceZone. Add all the Slices you need. Save your changes to the filesystem and then Push to Prismic. Now, if you open your repository and create a new 'Page' document, you'll see that your Slice and its variations are available to use; you'll also see the screenshots we added before.

For those of you who have been following along the example, now it's time to add TextImageRight Slice to a Custom Type. Open the Prismic builder. Then, head to the Custom Types tab. You'll see that we already have two existing types: Menu and Page. Click on the Page type, then click the 'Edit Slices' button, search and select the TextImageRight Slice and save.

Once your finish building your model, click 'Save to filesystem' and then 'Push to Prismic'.

Push models to Prismic example:😀

After you finish creating all your Slices and Custom Types you can then Create a page, add content, and publish!

Troubleshooting

Currently, Slice Machine & The Slice Builder are in BETA. If you encounter any problems, please read the troubleshooting guide for a list of the most common issues and the possible solutions:


Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.