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:
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
Online Store → Pages → Add page. Call it Preview. Under Theme template on the right, pick
preview.Open it in the theme editor and give the Mosaic grid section a collection.
Turn on Link to the preview view. Without it the crops go to ordinary product pages and none of the rest of this happens.
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 section, which is your own photography rather than the product shots.
Settings
Preview grid — on the preview-all template.
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.
Last updated