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.
🕚 Before starting
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 your Slices
Now, Take a Screenshot of your Storybook component and then Push Slice to Prismic. Clicking this button will send your Slice model to the Prismic UI. You can also create Custom Component Previews if you like; read more about this below.
Once you push Slices from The Slice Builder, they will be available in the repository's Custom Types shared slices library.
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.
Custom Component Previews
As discussed above, you can choose to have a custom component preview image instead of the one auto-generated from your Storybook. To do this, simply add an image named preview.png in your Component folder in your project, so in our example ~slices/TextImageBlock/preview.png. Doing so will overwrite the default image and give you the control that you may need.
Create a new Custom Type
Go to your repository and navigate to the 'Custom Types'. If you don't have any Custom types yet, click 'Create New'. Add a name to it and configure it as either a Repeatable Type, which allows you to create as many instances of the Custom Type as you need (i.e., blog pages), or a Single Type, where you will only be able to create one instance of this Custom Type (i.e., homepage).
Add your Slice
Now, toggle slice-zone and click on 'Add a slice' (+). This will open an overlay with four different tabs; the one we care about here is 'Shared Slices'. Once you click this, you'll see your Slices from The Slice Builder represented by their preview screenshots, choose a Slice to add to your Custom Type, and save the changes.
Now your content editors can use your Slices and their corresponding components to build beautiful, versatile pages. 😀
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.