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.
Within the Crystallize PIM user interface, click the Grids button on the leftmost panel. Click either the New grid button (+) at the top left of the screen or the + Add grid button in the center. Type a name for the grid, then hit Enter or click Create.
The grid will be 3x2 to start. Click the Visualize button at the top of the screen to enable resizing of the grid. 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, click Visualize again to return to the normal grid preview.
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. If you click on an item in the grid, you’ll be taken to its edit screen within the catalogue.
All changes to the grid are saved automatically, but won’t be made publicly available until you click the Publish button. Once published, a grid can be unpublished by clicking the button at the top of the screen. To delete a grid, click the trash can button at the top of the screen. The grid will be permanently deleted.
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)