Skip to main content
More in Learn

Create and Manage Grids

Grid organizers provide a more visual, non-hierarchical option for offering content on your frontend. They’re easy to define, and can look quite appealing and intuitive on a website or kiosk.

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.

Creating a Grid

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+K or ⌘+K and type “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.

Grids in Multiple Languages

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.

Grid-Related Webhooks

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.

Live Demonstration of Grids

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

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community