Create and Manage Grids

Imagine your customers making selections from an array of beautiful product photos instead of clicking through a tree of hyperlinks. Or, you could display your products side by side with documents related to those products, with the products you want to emphasize being larger and more prominently placed. Grid sizing, layout, and content are completely up to you.

A tenant's grids can be managed via the PIM API or the Crystallize App. To do so, you'll first need the requisite permissions for Grids (read, create, etc). Refer to our documentation on roles and permissions for more information.

Within the Crystallize App, you can click the Grids button on the leftmost panel. You can also bring up the command palette with [CTRL or ⌘] + K and type or select "Grids." Click either the New grid button (+) at the top left of the screen or the + Add grid button in the center.

The grid will be 3x2 to start. You’ll be able to add and remove rows and columns with buttons for that purpose. Whenever you hover over any cell, you’ll see buttons to merge (><) and/or split cells (< >). Once you have the grid layout you want, type a name for the grid at the top of the screen, then hit Enter or click Create.

To populate the grid, click the Catalogue button on the left browsing pane. This switches the pane from showing your grids to showing your catalogue. You can then browse to the items you want to put in the grid, then drag/drop them into the desired cells. Products, documents, and folders can all be placed into the grid. The image that will appear in the grid square corresponds to the first image or variant associated with that particular item. Use the (X) button in the top right corner of any cell to remove the item from that cell.

All changes to the grid are saved automatically, but won’t be publicly available until you click the Publish button. Clicking the action button (…) at the top of the screen gives you access to the Unpublish and Delete functions. Deleting the grid will remove it permanently, so proceed carefully.

Once your grid is ready, you can use the grid relation component to add it to products, documents, and folders.

If you’ve defined multiple languages in your tenant, there will be a translation of your grid for each of these languages. You can switch between different translations using the Language drop-down at the top of the screen. Refer to our Configuring Languages page for more information.

You can (optionally) set up webhooks to subscribe to grid-related events. In Crystallize, events are fired whenever grids are

• Created
• Updated
• Published
• Deleted

You can set up a webhook, then come up with your own way of responding to events. For more information, read about defining webhooks here.

Once created, grids are accessible via the Catalogue API. Refer to our sample query for fetching a grid available at our example repository, and to the API docs at https://api.crystallize.com/your-tenant-identifier/catalogue for more information.

Check out the livestream below to see how a grid is built and populated. (Starting at the 45:00 minute mark)