Responsive Frontend Previews

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 a 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://app.crystallize.com/static/frontend-preview-listener.js" ></script>

For added security, the frontend preview requests sent by Crystallize are signed. It is your responsibility to verify these signatures.

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

You can use the Crystallize App 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 action button (…) in the lower right corner of the preview card.

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.
• From the View drop-down at the top of the screen, choose Preview.

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.