Crystallize logo

Custom Views

Custom Views let you extend Crystallize with live previews or custom interfaces embedded directly in the Crystallize App. They allow you to see exactly how your content will appear in your storefront, app, or any other external interface while you work on it.

You can use Custom Views to preview your content side-by-side before publishing, connect an AI assistant that generates or enriches product data, or automatically translate content into multiple languages. This makes it easier to work with real-time content, streamline workflows, and create a tighter connection between your editorial and frontend environments.

Custom View for Content Preview

You can create as many Custom Views as you need. Views are responsive and automatically update as changes are made to your content.

Before setting up a Custom View, your storefront or frontend application must support preview mode. This typically means being able to fetch and render draft content from Crystallize through a dedicated preview environment or a preview mode feature (for example, Next.js Preview Mode).

To enable communication between the App and your frontend during preview mode, include this script tag in your preview environment:

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

Custom View for Content Preview

Adding custom views

  1. Go to Settings → Custom Views in the left-hand panel.
  2. Click Add custom view +.
  3. In the dialog, specify:
    • Preview Name - the name displayed in Crystallize.
    • URL - the address of your preview environment.
      This must include an {{itemPath}} parameter, which Crystallize replaces with the current catalogue item path.
      Optionally, you can include:
      • {{itemExternalReference}}
      • {{language}} (recommended for multilingual projects)

Example URLs

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)

When finished, click Add custom view.

If the target URL defines an image in its meta tags, you’ll see a preview thumbnail. Otherwise, Crystallize displays a magnifying glass icon.

To edit or delete a view, use the action menu (⋯) on the right-hand side of the entry.

Accessing Custom Views

Once you’ve created Custom Views, they can be accessed directly from the Catalogue.

  1. Click Catalogue in the left navigation and open an item for editing.
  2. From the Views dropdown at the top, select your Custom View under Custom view.
  3. The view will open in a full window.
    At the top, you’ll find:
    • Reload view button
    • Action menu (⋯) with options to disable live preview or copy the view link for sharing

To preview your content side-by-side while editing:

  1. From the Views dropdown, choose Pretty (if not already active).
  2. Then select Split.
  3. In the new panel, pick your desired Custom View.

To close a pane, open its Views dropdown and choose Close split.