Layouts, blocks and rails: a page worth visiting
By default, your catalog is a grid: every product, aligned, all the same size. That works well when a visitor knows what they're after. It works much less well when they came to discover your work — a grid says nothing about where your products come from, or why they should choose you.
Composing means deciding the order in which your page tells its story.
Two doors, one screen:
On the left, the list of what your visitor will see, top to bottom. On the right, a live preview with your real products. You move things, you adjust, you see the result.
Three ready-made compositions. They touch none of your products — they only change the order of the page.
| Layout | What it composes | Best for |
|---|---|---|
| Grid | Your current catalog, unchanged | Visitors who know what they want |
| Shop | Category photos, product rail, then the grid | A wide range to explore |
| Editorial | Editorial, rail, craft story, breather, categories, then the grid | Craftsmanship worth telling |
You can start from a layout and change everything afterwards. Nothing is locked, and you can go back to the plain grid whenever you like.
Not sure? Let it guide you: the composer asks three questions — what triggers a purchase with you, whether your typical visitor already knows what they want, and what you'd like them to do after their visit. It picks a starting layout from your answers. Three questions, about fifteen seconds, and you can skip it.
| Block | What visitors see |
|---|---|
| Product grid | Your whole catalog, with search and filters |
| Mood banner | Your cover photo, full width, with your tagline |
| Categories | Large photos, or a row of shortcuts. One click filters the grid |
| Product rail | A selection scrolling on a loop |
| Editorial | Image, short text and a link — to an article on your website |
| Storytelling | Your photo and your story, or a before/after |
| Breather | A band of colour, with or without a sentence, to let the page breathe |
You can place up to 20. The product grid is always there and can't be removed: whatever you compose, a visitor can always see all of your products.
One block, three ways to fill it:
An editorial entry is an image, a title, a couple of sentences and a link to your website. Vitrin doesn't host articles: long-form content lives on your side, the catalog only points to it. That's deliberate — one more place to write is one more place nobody keeps up.
You can ask Vitrin to rank your products by actual demand: the ones that keep coming back in your quotes, saved selections and favourites. The ranking is proposed, never applied on its own — you approve, remove and reorder, and the published rail then stays fixed on your choice.
That proposal needs material: at least 15 requests or saved selections over the last 90 days, and each suggested product must appear in at least 3 of them. Below that, the button stays visible but inactive, showing exactly what's missing.
That bar is deliberate. Writing "our bestsellers" above three products picked from four clicks is a claim your customers notice — and it costs more than it earns.
Some blocks need a minimum of material:
| Block | Needs at least |
|---|---|
| Product rail | 4 products |
| Categories | 2 categories — and 2 with a photo in "photos" mode |
| Editorial | 1 entry with an image and a title |
| Storytelling | 1 photo (2 for a before/after) |
Below the threshold, the block disappears for visitors — never a page full of holes. Inside the composer, nothing is silent: the block is greyed out with the exact reason ("needs at least 4 products, you have 2") and a way to fix it.
Placeholder pictures don't count as real photos. A catalog without proper visuals can't be staged — start with the AI Photo Studio.
Two different rhythms, and this is the most common source of confusion:
The Real preview button shows your draft exactly as it will look, before publishing.
Composing, adjusting and previewing are free, with no limits. Putting a composed catalog online requires a subscription PRO — until then, your visitors see the grid.