Guide · Updated Oct 6, 2026

Vitrine documentation

How to add products, prices, screenshots, a bundle and the homepage sections — using only the Ghost editor.

Installation

Download vitrine.zip from your purchase email or your purchases library. Do not unzip it.
In Ghost Admin, open Settings → Design & branding → Change theme.
Click Upload theme, select the zip, then Activate.

Vitrine requires Ghost 6 (self-hosted, or a Ghost(Pro) plan that allows custom themes).

Updating

Upload the new zip the same way and confirm the overwrite. Your content, navigation and theme settings are kept.

Import the demo content

The download includes vitrine-demo.zip: posts, pages, tags, navigation and images.

Use a new or empty site: importing over existing content creates duplicates. On a fresh Ghost, first delete the default content in Settings → Advanced → Danger zone → Delete all content.
Open Settings → Advanced → Import/Export and import the zip (not just the JSON, or the images will be missing).
Theme settings are not part of an import: set them in Design & branding (see the table below).

Add a product

A product is a regular post. Give it the internal tag #product, a title, an excerpt and a feature image. Then, in the post:

Buttons — add one Button card per licence, with the price in its text: Single site — $89, Unlimited — $389. The link is your checkout page (Gumroad, Lemon Squeezy, Stripe…). A button whose text contains demo, preview, sample or look inside becomes the preview link, with its own text (“Live demo”, “Read a sample”). One button per format works the same way (“Ebook — €12”, “Paperback — €22”).
Key features — the first bullet list of the post is shown as ticks on the catalogue card.
Screenshots — image cards, each with a short caption. The first four make the collage of the catalogue card; the captions are their labels.
Full-page capture (optional) — a very tall image (at least twice as high as wide) is shown in a scrolling browser frame on the product page.

💡

Nothing to type that can break the page: if something is missing, that element simply does not appear.

Product colour

Give each product its own public tag (for example Vesper) and set the tag’s Color in Tags. The catalogue card, the chip and the product page take that colour; the text switches to dark or light automatically. The tag page becomes the product’s news page.

Bundle

Create a product with both #product and #bundle. Its first button gives the bundle price; the theme adds the total of the single prices and the saving.

Homepage sections

Section	Setting	Content comes from
Statement	Show hero	Hero title (words between `asterisks` take your product colours) and the site description
Colour chips	Show chips	Posts tagged `#product`
Catalogue	Show catalogue	Posts tagged `#product`, newest first and full width
Bundle	Show bundle	The post tagged `#product` + `#bundle`
Comparison	Show compare	The page with the slug `compare` (a table)
Promises	Show promises	The page with the slug `promises` (each heading becomes a card)
Guides & blog	Show docs	Pages whose slug ends in `-docs` or `-guide`, and the latest posts
FAQ	Show FAQ	The page with the slug `faq` (Toggle cards)

Guide pages

Create a page, choose the template Documentation and give it the slug <product slug>-docs or <product slug>-guide (for example vesper-docs, the-salt-road-guide). It is linked from the product page automatically (“Read the guide”) and listed on the homepage.

In the main menu, an item whose label starts with - goes in a dropdown under the item above. In the footer menu, an item whose label starts with # is a column title. The My purchases button points to your customers’ library (setting Purchases URL).

All settings

Setting	Tab	Default	What it does
Color scheme	Site-wide	Light	Default color scheme. Readers can switch.
Logo for dark mode	Site-wide	—	Optional logo used when the dark scheme is active
Purchases url	Site-wide	https://app.gumroad.com/library	"My purchases" button in the header (e.g. your customers' Gumroad library). Empty = no button.
Buy note	Site-wide	One-time payment · Lifetime updates	Small line under the buy buttons of every product
Other social links	Site-wide	—	Extra social profile URLs, comma-separated (GitHub, Dribbble, Discord...)
Show newsletter	Site-wide	On	Subscription band at the bottom of every page
Newsletter heading	Site-wide	Be the first to see the next release.	Heading of the subscription band
Newsletter text	Site-wide	New products, updates and the occasional guide. No spam, unsubscribe anytime.	Text of the subscription band
Show hero	Homepage	On	Opening statement with the site description and two buttons
Hero label	Homepage	Digital products · One-time purchase · Lifetime updates	Small line above the statement
Hero title	Homepage	Products with a `point of view.`	Large statement. Words between `asterisks` take the colors of your products.
Show chips	Homepage	On	A row of colour chips, one per product
Show catalogue	Homepage	On	Product catalogue: posts with the internal tag `#product`, newest first
Catalogue heading	Homepage	The collection	Heading of the catalogue
Show bundle	Homepage	On	Bundle offer: the post with the internal tags `#product` and `#bundle`
Show compare	Homepage	On	Comparison table: content of the page with the slug "compare"
Show promises	Homepage	On	Promise cards: content of the page with the slug "promises"
Show docs	Homepage	On	Documentation pages (slug ending in -docs) and latest blog posts
Show faq	Homepage	On	Questions & answers: content of the page with the slug "faq"
Table of contents	Post	On	Table of contents on posts with three or more headings

Posts per page: 12 (set by the theme). Settings are in Settings → Design & branding → Customize, in the Site-wide, Homepage and Post tabs.

The subscription block uses Ghost’s native members. It is hidden for signed-in members, and when sign-ups are off or invite-only (Settings → Membership).

Translation

Every text of the theme goes through Ghost’s translation system. Copy locales/en.json inside the theme to locales/fr.json (or your language code), translate the values, zip the theme again and upload it. Then set the language in Settings → General → Publication language.