Responsive Custom Views

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? Custom views can 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. Custom views also let you link to catalogue view-enhancing functionality that is hosted outside of the Crystallize App with a URL, similar to Apps. 

You can set up as many custom views as you need. The views 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 custom view, 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 custom view 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 custom views within your tenant. To get started, click the Settings button in the left-hand panel, then choose Custom views. From here, click the Add custom view + button.

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

Here are some examples of what your 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 custom view name and URL have been specified, click the Add custom view button. 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 magnifying glass icon. 

To edit or delete a custom view, click the action button (…) on the right side of its entry.

Once custom views have been defined, you’ll be able to reference them from the catalogue while you’re making changes:

• Click the Catalogue button on the left-hand side of the screen.
• Browse to an item and open it for editing.
• From the Views drop-down at the top of the screen, select the custom view you’d like to work with from the Custom view list.

This opens the custom view in the full window. At the top of the screen is a Reload view button, along with an action button (...) with options to disable the live preview or copy the view link to share with others.

To display the custom view side-by-side with the item editing window:

• From the Views drop-down, choose Pretty (if not already selected).
• From the Views drop-down, choose Split.
• In the panel that appears, click the button for your desired custom view.

To close either pane, access the Views drop-down on that pane and choose Close split.