Skip to main content
More in Learn

Responsive Frontend Previews

When adding or editing products, documents, and folders, sometimes you don’t know how the changes you make will translate to your frontend(s). For instance, how will text and images flow on different screen sizes? Will your hyperlink properly convert to an embedded video? Frontend previews provide an added level of scrutiny: you can see what your updated content will look like across different platforms before the changes are published and potentially made live to your customers.

You can set up as many previews as you need. The previews will be responsive, redrawn as updates are made. Please note that your storefront/website/app framework does need to support this kind of preview mode, and you must implement it over there in order to get it working here. Essentially, you need a way to pull the draft version of an item, either through separate preview environment or by usage of a preview mode if your framework supports that. Check out the Next.js Preview Mode for an example.

In order to enable PIM communication from the frontend preview, include the following script tag on the frontend during preview mode:

<script defer src="https://pim.crystallize.com/static/frontend-preview-listener.js" ></script>

If you have any questions about this procedure, feel free to chat with our Slack community.

Managing Frontend Previews

You’ll use the Crystallize PIM user interface to set up frontend previews within your tenant. To get started, click the Settings button in the left-hand panel, then choose Frontends. Click either the Add new frontend + button or Create Frontend button.

On the window that appears, you’ll need to specify a Preview Name and URL for the frontend you wish to preview. The preview URL must contain an {{itemPath}} parameter that will be replaced with the particular catalogue item paths that you preview. It can also optionally contain a {{language}} parameter (which should be there if your frontends are in different languages).

Here are some examples of what your preview URL may look like, depending on your particular setup:

  • https://my.shop.com/{{language}}/{{itemPath}}
  • https://my.shop.com?item={{itemPath}}
  • https://my.shop.com/{{itemPath}}?preview=true
  • https://my.shop.com/api/preview?&slug={{itemPath}} (Next.js)

Once the frontend preview name and URL have been specified, click the Let me have it button. Cards for connected previews will display the name, URL, and a preview image as long as the target site has defined an image attribute within its meta tags. Otherwise, you’ll see a “Preview not available” message. 

To edit or delete a preview, click the (…) button in the lower right corner of the preview card.

Previewing Your Changes

Once previews have been defined, you’ll be able to reference them from the catalogue while you’re making changes. Here’s how:

  • Click the Catalogue button on the left-hand side of the screen.
  • Browse to an item and open it for editing.
  • Click the Preview button at the top of the screen.

In the new window that appears, you’ll see the following controls:

  • Frontend. This drop-down will contain all the previews that have been defined, listed by name. Choose the preview you want to work with.
  • View. The “Preview” setting is a full view of how the frontend will appear. The “Edit” setting switches you to a side-by-side view: the edit screen for the item in question will be on the left, and the frontend preview will be on the right. You can click and drag on the line separating the two views to make one side larger or smaller. As usual, changes are saved, but not made live, until you click the Publish button at the top of the screen.
  • Live preview. Check this feature to enable responsive previewing: as changes are made in the edit window, the frontend preview will automatically refresh to show those changes. If Live preview is left unchecked, then the frontend preview will not reflect changes as they are made. A manual refresh will be necessary to preview any updates (as described below).
  • Reload preview. Use this button to manually refresh the frontend preview as desired.
  • Copy preview link. This button will copy the frontend preview URL to the clipboard, allowing you to view the modified content in another browser/device or share it with others for feedback.

Check Out Our Frontend Preview Livestream

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community