Send Slices and 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 and Slices

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

Launch the Prismic Builder

Before you start reading this article, launch the Prismic Builder in a new terminal window, if you haven't yet, with the prismic sm --develop command.

It should open by default at http://localhost:9999.

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 preview: 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.

💡 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.

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 and The Prismic Builder are still in beta. If you encounter any issues, 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.