> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/sections-and-features/mosaic.md).

# Mosaic

A tight grid of product crops, and the way into the preview.

A tight six-column grid of product crops, three pixels apart, close enough to read as one block. On phones it goes to four columns.

Set a collection and a maximum. **Crop shape**, **Maximum products** and the two links only appear once a collection is chosen — they are meaningless without one.

| Setting                      | Default   | Notes                                                                            |
| ---------------------------- | --------- | -------------------------------------------------------------------------------- |
| **Collection**               | —         |                                                                                  |
| **Crop shape**               | Rectangle | Rectangle is what the reference uses. Square suits a set shot on a square canvas |
| **Maximum products**         | 18        |                                                                                  |
| **Show 'view all' link**     | On        |                                                                                  |
| **Show a lookbook link**     | On        | Only does anything with the preview link on                                      |
| **Link to the preview view** | Off       |                                                                                  |

## As an ordinary grid

Left alone, each crop goes to that product's page and **view all** goes to the collection. That is a block of product, and nothing else happens.

## As the way into the preview

Turn on **Link to the preview view** and the same grid becomes the front of the [Preview](https://github.com/cec-hdz/webexp-docs/tree/main/supra/sections-and-features/preview.md) — a set of things that are not for sale yet.

Each crop then goes to a look at the item rather than to a page with a buy button on it, **view all** goes to the same set laid out as a grid, and **lookbook** steps straight into the first item.

On a phone the two links move above the crops, on one line with a rule under it. On a desktop they sit below and to the right, where they have always been.