Populating Your Product Catalogue - the Core of PIM + CMS

Browse through our demo furniture tenant to see what a well organized and detailed catalogue allows you to do. The sections labeled “Shop,” “Stories,” and “About,” as well as subsections like “Plants” and “Chairs,” are defined by a hierarchy of folders. Within these folders and subfolders are many examples of products (furniture, plants, etc.) and documents (articles on various design styles). The products and documents have tags associated with them (ex. color, materials) that have been defined by topic maps. On the main page, you can scroll down to “Today’s Trending Plants” to see an example of a grid organizer in action. Everywhere you look, you see beautiful assets like images, bringing product and marketing content to life.

As you can see, your catalogue is not just a repository for data and content. It can also form the foundation of your frontend navigation and allow you to define relationships between your products based on common attributes. These relationships can potentially be used to power advanced search filters or suggest related products to customers.

We’ll now see how you can start implementing your own catalogue within the Crystallize App.

Access the catalogue by clicking the Catalogue button on the left-hand side of the screen. You can also bring up the command palette with CTRL+K or ⌘+K and type “Catalogue.”

On the left side of the Catalogue window is a browser pane that lets you navigate through the hierarchical catalogue structure (once you’ve built it, of course). “Catalogue” is the root level. As you create folders and subfolders and browse down through them, your browsing path will be displayed at the very top of the browsing pane. You can click on the path names to jump back immediately to those levels without having to click the back arrow button (←) multiple times. You can also hide the browsing pane by clicking the left arrow button (<) at the bottom.

Inside any level of the catalogue, you can click and drag on items in the browser pane to reorder them. You can also move items between levels of the catalogue by dragging them to the bottom of the pane, browsing to where you want to place them, and then dragging them back out.

In the main Catalogue panel, you can create new items or edit existing ones. All items will be based upon the shapes that you’ve previously defined. If you haven’t done that step, go back and make sure you have all the shapes you need first.

You can create a product, document, or folder by clicking the Create + button in the bottom left, or by clicking the Product, Document, or Folder buttons in the middle of the screen. You can also bring up the command palette with CTRL+K or ⌘+K and type “Create item,” then select the desired item type.

Read more about the specifics for these processes here:

• Creating a product
• Creating a document
• Creating a folder

To edit products or documents, you can simply click on them in the browsing pane to open them in the main window. To edit a folder, however, you need to hover over the folder until a pencil icon appears, then click on that icon. (If you click on a folder, you will browse into it.) The changes you make to items are automatically saved, but they’re not made publicly available until you hit the Publish changes button.

The action button (…) beside the Publish button allows you to Unpublish anything that’s already been published or Delete items completely. Anything you delete will be gone permanently, so keep that in mind.

All items in the catalogue have an ID and path associated with them, which is what a developer will use to specify particular items within programming. If you need the ID or path of any item, you can get it by opening up the item for editing, then choosing Developer from the View drop-down menu at the top of the screen. You’ll be taken to the GraphQL playground, which shows a GraphQL query for retrieving this particular catalogue item and the corresponding JSON response. The Item ID and Path are listed above the query window. The Copy to clipboard buttons allow you to copy these strings for use elsewhere. The path is also listed in the bottom left Query Variables window.

To return to the original item edit view, use the View drop-down to choose either Pretty or Nerdy depending on the type of item you’re working with.

Crystallize’s Asset Organizer allows you to manage all of your tenant’s images in one place. Once uploaded, images can be tagged with topics, added to catalogue items, and more.

You can categorize and define any sort of relationships between products by using topic maps. Learn more about creating topic maps here.

This section of the User Guide also covers how you can create grids to group and display products in a non-hierarchical fashion.