Send Slices & Screenshots 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.


⚠️ Create Your Components & Slices

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

Push Your Slices

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

So the final step in The Slice Builder is to click the 'Push to prismic' button. Clicking this button will take a screenshot of your Storybook component preview and send this along with 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, but you will still need to select them in your Custom Types.

Push Slices Example Video:

💡 Component Preview Look Strange?

If you component preview isn't appear exactly as you designed, try clicking the 'Take Screenshot' button again and re-pushing to Prismic.

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 the folder of your Slice/Component in your project, so in our example ~slices/HeroSlice/preview.png. Doing so will overwrite the default image and give you the control that you may need.


Add Shared Slices to Custom Types

This is the final step you'll need to complete before your content writers can use your Slices in their documents. This step will allow you to decide which Custom Types to make you Slices available for, thus affording you control over the design.

Create a new Custom Type

If you don't already have a custom type you'll need to make a new one. To do this, go to your repository, navigate to the 'Custom Types' tab and click the 'Create New' button to create a new Custom Type.

You will have to configure your custom type as either a Repeatable Type or a Single Type. If you select Repeatable Type, you can create as many instances of the custom type as you need (i.e. Good for blog pages). If you select Single Type, you will only be able to create one instance of this custom type (i.e. Good for home pages).

You will also need to enter a name for the custom type. When you enter the name, Prismic will automatically assign the custom type an API-ID. When you click the “Create new custom type” button, your type will be created and you will be taken to the custom type builder to begin adding and configuring the content fields.

Select Your Slice in the Custom Type

Now to use your recently pushed Slices in your Custom Type you will need to toggle slice-zone, then click on 'Add a slice' (+). This will open an overlay with four different tabs: 'From Slice Machine', 'Shared Slices', 'From this Repository' and '+ Create new slice'.

The one we care about here is the 'Shared Slices' tab. 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. 😀

Select Slices Example Video:

Now, you'd love to add content to your added slice/component. Check this article, Create a page, add content, and publish, to add and publish content.


Troubleshooting

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

Troubleshooting Guide

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.