> 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/preview.md).

# Preview

A look at what is coming, with nothing to buy on it.

A set of things that are not for sale yet — shown, stepped through and grouped, with no price, no buy button and no cart anywhere on it.

It is three views of one set of products:

| View      | Template           | What it is                                                                                 |
| --------- | ------------------ | ------------------------------------------------------------------------------------------ |
| The crops | `page.preview`     | The [Mosaic](/supra-shopify-theme/supra/sections-and-features/mosaic.md) grid. The way in. |
| The item  | `product.preview`  | One item at a time, stepped through with arrows.                                           |
| The grid  | `page.preview-all` | The whole set laid out like a collection, with categories down the side.                   |

## Setting it up

1. **Online Store → Pages → Add page.** Call it Preview. Under **Theme template** on the right, pick `preview`.
2. Open it in the theme editor and give the **Mosaic grid** section a collection.
3. Turn on **Link to the preview view**. Without it the crops go to ordinary product pages and none of the rest of this happens.
4. Leave **Show a lookbook link** on if you want the second link at the top.

That is all of it. The item view and the grid are alternate templates of pages that already exist, so there is nothing else to create and nothing to keep in step.

You will see `preview-all` in the template dropdown alongside `preview`, looking like a second page to make. **Leave it alone.** It has to exist as a file because that is how `?view=preview-all` resolves, but it is reached by the **view all** link rather than by being assigned.

## The products have to be published

A preview product still has to be **published to the Online Store** sales channel. A draft is invisible to the theme and simply will not appear.

Keeping it out of your menus is what keeps it unannounced — not leaving it unpublished. Anyone with the link can reach it either way, so treat the collection as findable.

## The item view

Reached by tapping a crop. Every shot of every item in the set is on the page, and stepping is a class change rather than a page load, so moving through the set does not reload anything.

* **Either side of the picture** steps back and forward. The pointer becomes an arrow.
* **The picture itself** opens it larger. The pointer becomes a glass.
* **Back** returns to the crops.

The address bar keeps up as you step, so a particular item can be linked to and the back button walks the set.

### On a phone

The picture is a carousel: swipe it. Every shot of every item is laid out in one row, so a swipe carries on through the end of one item into the next, and a flick carries as far as a flick should. The arrows are still there, next to the name.

Tapping the picture does nothing on a phone — the shot is already the width of the screen, so there is no larger view to open, and a tap that opened one instead of moving along would be a tap nobody asked for. The header stays, and it is the way back; there is no Back button down there.

## The grid

**view all** goes to the same page seen as a grid — the shape of your collection page, categories down one side, product filling the rest. Tapping one goes to the item view rather than to a product page.

The categories are the **product types** found in the set, in the order the set runs. There is nothing to build: type a product's type in Shopify and it appears. Choosing one narrows the grid where it stands, without leaving the page, and each is a real link, so a category can be bookmarked or opened in a new tab.

A product with no type set shows under **all** and claims no category of its own.

Nothing in the grid carries a name or a price. Nothing there is for sale yet: a name under a crop labels something that has not been announced, and a price is a number you have not committed to.

## The lookbook link

Goes straight into the item view at the first item. The stepping view is the lookbook — arriving at its first page is arriving at it.

It is a different thing from the [Lookbook](/supra-shopify-theme/supra/sections-and-features/lookbook.md) section, which is your own photography rather than the product shots.

## Settings

**Preview grid** — on the `preview-all` template.

| Setting                   | Default | Notes                                           |
| ------------------------- | ------- | ----------------------------------------------- |
| **Heading**               | empty   | Empty is how the reference shows a grid         |
| **Collection**            | —       | Point it at the same collection the mosaic uses |
| **Products to show**      | 50      | 10 to 50                                        |
| **Show category sidebar** | On      | The product types found in the set              |

The item view has no settings. Every picture, name and description on it is the one already on the product.