Send Slices to Prismic
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.
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:
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.
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!
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:
Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.