Theme settings guide
Hamptons, setting by setting.
Hamptons gives you fifteen controls in Ghost Admin — typefaces, accent colour and colour scheme, the homepage hero and its curated rows, two article options and three social links. This page explains what each one does and where it appears, plus the few setup steps that make the theme look like the demo.
Where the settings live
Every setting on this page is in Ghost Admin, in one place:
Settings→Design & branding→Theme settings
Ghost groups them into Site-wide, Homepage and Post — the same three groups used below.
Every setting has a sensible default, and the homepage rows hide themselves when they have nothing to show, so the theme never displays an empty block. Treat the settings as refinements rather than a setup checklist.
First ten minutes
Just activated the theme? These steps make it look like the demo. None of them is required — every page works without them.
- Upload the routes file. Settings → Labs → Routes, then upload the routes.yaml from the theme download. It creates the four magazine section pages — see Sections and URLs before you do this on an established site.
- Create the section tags with the slugs architecture, interiors, travel and shopping, and give each a cover image and description under Settings → Tags.
- Make a section the first tag on each post. Ghost calls the first tag the primary tag, and it decides which section a story belongs to.
- Set up navigation. Settings → Navigation: add the four sections (/architecture/ and so on) and an About page. The first three links sit to the left of your title and the next three to its right on wide screens; every link appears in the menu drawer.
- Curate the front page. Mark your best stories as Featured to fill Editors' Picks, and add the internal tag #popular to up to five stories for the Most Popular list.
- Fill in author profiles under Settings → Staff: picture, bio, location and website all appear in the theme.
All fifteen settings
Use the search box to jump to a setting — it matches names, descriptions and placements as you type.
Site-wide
Applies across the whole publication.
The typeface for headlines and the wordmark in the header. Fraunces (editorial serif) gives the magazine its classic voice; Inter (modern sans) gives a cleaner, more contemporary one.
Where it appears: the site title, every headline and section heading.
A heading font chosen in Ghost's own Brand settings takes precedence over this one. See Colour and type.
The typeface for article text and excerpts: Newsreader (serif) for long reads, or Inter (sans), set slightly smaller to match its larger letters.
Where it appears: article text, standfirsts and card excerpts.
Labels, bylines and buttons always use Inter, whichever you choose here.
The decorative colour of the theme: the rules above and below the newsletter and pull quotes, the rule beside standard quotes, and the underlines under menu links and headlines on hover.
Where it appears: rules and underlines throughout.
Default: #A7823B. Small text such as section labels uses fixed brass tones that were checked for contrast in light and dark, so a pale accent cannot make text unreadable.
Light is the warm paper palette of the demo. Dark sets the whole site on deep charcoal. Auto follows each reader's operating system, switching as they do.
Where it appears: every page.
The same accent works in both schemes; the brass text tones are adjusted for each.
A sign-up band with a heading, a short line and an email field, using Ghost's own member signup.
Where it appears: the front page, after the section rows, and beneath every article.
It only appears when members are enabled and signups are open to everyone. See Members and newsletter.
Your full Instagram address, starting with https://. An Instagram icon appears once it is filled in.
Where it appears: the social icons in the menu drawer and footer.
Blank hides the icon. X and Facebook come from Ghost's own social accounts instead, and an RSS link is always shown.
Your full Pinterest profile address, starting with https:// — a natural home for an interiors or travel title's boards.
Where it appears: the social icons in the menu drawer and footer.
Blank hides the icon.
Your full YouTube channel address, starting with https://.
Where it appears: the social icons in the menu drawer and footer.
Blank hides the icon.
Homepage
Controls the front page only. Page two onwards is a plain archive and does not use these.
Your newest story opens the front page full-bleed, with its headline over the feature image. Image with video plays a muted, looping video behind the headline instead, with a pause button for readers.
Where it appears: the top of the front page.
Video needs the Hero video URL below. The feature image is shown while the video loads, and stays in its place for anyone whose device asks for reduced motion.
The full address of an .mp4 or .webm file. It must be a direct link to the video file — a YouTube or Vimeo page will not play.
Where it appears: behind the lead story, when Hero style is set to video.
Keep it short and small: a ten to twenty second loop under 5 MB loads quickly on phones. Ghost's own file upload card is one easy place to host it.
A horizontal rail of up to six stories you have marked Featured in post settings, each with its image, section and headline.
Where it appears: the front page, beneath the four feature cards.
With no featured stories, the rail is hidden rather than left empty.
A row for each magazine section — Architecture, Interiors, Travel and Shopping — showing its three newest stories and a View all link to the section page.
Where it appears: the front page, after the latest stories.
A section with no stories hides its own row. To rename or replace the sections, see Sections and URLs.
A numbered list of five stories beside the latest-stories feed. You choose them by adding the internal tag #popular — Ghost gives themes no view counts, so the list is curated rather than calculated.
Where it appears: the front page, alongside The Latest.
With no #popular stories, the list falls back to your featured stories; with neither, it is hidden.
Post
Applies to individual articles.
Up to three more stories that share the article's primary tag, with a link to see the rest of that section.
Where it appears: the end of every article, before the newsletter band.
Hidden when the article has no tag or nothing else shares it.
A Written by card for the article's main author, with their picture, name, bio and links to their website, X and Facebook when set.
Where it appears: the end of every article, after its tags.
Everything in the card comes from the author's profile under Settings → Staff.
No setting matches that search. Try a shorter word, or clear the box to see all fifteen.
Colour and type
Fonts come with the theme
Fraunces, Newsreader and Inter are bundled inside the theme as woff2 files and served from your own site, so there are no requests to a font service and nothing extra to list in a privacy policy. The two font settings choose between the editorial serifs and Inter for headlines and body text separately.
If you set a heading or body font in Ghost's Brand settings, one level up from the theme settings, Ghost's choice takes precedence. Leave both on Theme default to use the theme's own settings.
Accent colour
Hamptons uses its accent for ornament — rules and underlines — rather than for large areas of colour, so almost any muted tone works. Warm metallic and earthy colours suit the photography best. Ghost's own Brand accent colour still drives Ghost's pop-ups, such as the signup Portal and comments.
Light, dark or automatic
Choose the scheme with the Color scheme setting. Auto is the friendliest choice for readers, since it follows their device; Dark suits a publication whose photography is moody or shot at night.
Sections and URLs
The theme download includes a routes.yaml. Uploading it under Settings → Labs → Routes gives you:
| URL | What it shows |
|---|---|
| / | The homepage |
| /your-post/ | An article — post URLs are unchanged |
| /architecture/ | Stories whose primary tag is architecture, with the tag's cover and description |
| /interiors/, /travel/, /shopping/ | The same, for each of the other three sections |
| /category/your-tag/ | Posts with any other tag |
| /author/their-name/ | An author's profile and stories |
The routes file moves tag pages from Ghost's usual /tag/…/ to /category/…/. On a new site that does not matter. On an established one, add redirects for tag links shared before the switch — or skip the routes file entirely: every template works with Ghost's standard URLs, you just lose the four section pages.
As with any routes change, download your current routes.yaml first so you can put it back.
Renaming or replacing the sections
The four sections are defined in two places: routes.yaml, which creates their pages, and the section blocks in the theme's index.hbs, which build their homepage rows. To rename one — say, Travel to Gardens — change its URL, tag filter and tag in routes.yaml, change the matching block's tag filter, heading and link in index.hbs, then re-upload both. Keep a note of the edit, since a theme update will replace index.hbs.
How the homepage builds itself
Most "something is missing" questions are really about this structure, so it is worth reading once.
- The lead story is simply your newest post, full-bleed, with its section, headline, excerpt and byline over the image or video.
- Four feature cards follow, with your next four posts.
- Editors' Picks — up to six Featured stories in a horizontal rail — if it is on.
- The Latest carries on with the next seven posts as a compact list, beside Most Popular.
- The section rows for Architecture, Interiors, Travel and Shopping follow, if they are on and have stories.
- The newsletter band closes the page on members-enabled sites.
That is twelve posts from the main feed on the first page, set by the theme's posts_per_page. Editors' Picks, Most Popular and the section rows fetch their own stories, so a story can appear in more than one place.
Page two looks different, deliberately
Ghost uses one template for the front page and another for every page after it. Page two onwards is a plain Latest stories grid of cards, without the hero or curated rows.
Members and newsletter
- The Subscribe button in the header, the Subscribe button in the menu drawer, the newsletter band and the footer's newsletter column appear only when members are enabled and signups are not invite-only.
- They use Ghost's own member signup, so new subscribers go straight into Ghost and receive your newsletters as normal.
- Native comments appear beneath articles, under a Conversation heading, once enabled under Settings → Membership.
- Search uses Ghost's built-in search, opened from the magnifying glass in the header.
Members-only and paid posts use Ghost's standard content gate; Hamptons does not restyle it.
The content conventions that matter
Much of what makes the demo look finished is ordinary Ghost fields, filled in well.
| Where it shows | Ghost field |
|---|---|
| Standfirst under a post title | Post settings → Excerpt |
| Image descriptions | The feature image's alt text, falling back to the post title |
| Section a story belongs to | The post's first (primary) tag |
| Editors' Picks | Posts marked Featured |
| Most Popular | Posts with the internal tag #popular |
| Section page cover and description | Settings → Tags → Tag image and Description |
| Author portrait, bio and location | Settings → Staff |
Photography
Hamptons is built around landscape photographs. Feature images of about 2000 pixels wide at a 3:2 ratio fill the lead story, cards and section covers without awkward crops, and Ghost serves smaller copies to phones automatically.
In the editor
- The first paragraph of every post gets a drop cap automatically.
- Press the quote button twice for the pull quote style: large, centred italics between brass rules.
- Use the image card's wide and full widths for photographs that deserve the space, and the gallery card for sequences.
- The demo's style guide shows every card as it appears in the theme.
Beyond the settings
Change the newsletter heading and wording
The newsletter band's wording — Rooms worth lingering in and the line beneath it — lives in partials/newsletter.hbs. Edit the text between the tags and re-upload the theme. Keep a note of the change, since a theme update will overwrite it.
Change how many posts appear per page
Hamptons shows twelve posts per page. That number lives in the theme's package.json rather than in Ghost Admin, so changing it means editing the theme and re-uploading the ZIP. The homepage layout is built for twelve: fewer leaves The Latest short.
Use a different typeface
The simplest route is Ghost's own Brand font settings, which take precedence over the theme's. To bundle a font inside the theme instead, add its woff2 files to assets/fonts/, add matching @font-face rules at the top of assets/css/screen.css and point --font-display or --font-body at it.
Small style changes that survive updates
Put CSS overrides in Settings → Code injection → Site header rather than editing screen.css. Injected CSS survives theme updates; direct edits do not.
Troubleshooting
/architecture/ shows a 404
The section pages come from the routes file. Upload routes.yaml under Settings → Labs → Routes, and check that a tag with the slug architecture exists.
A section row is missing from the homepage
Each row lists stories whose primary tag is that section — the first tag on the post, not just any tag. Check the tag order in post settings, and that Show category sections is on.
Editors' Picks is missing
It lists posts marked Featured in post settings. With none, the rail is hidden rather than left empty.
Most Popular shows my featured stories
That is the fallback when no posts carry the internal tag #popular. Add the tag to the five stories you want listed; internal tags start with a hash and never appear publicly.
The video hero does not play
Check that Hero style is set to Image with video and that the URL points straight at an .mp4 or .webm file. Devices set to reduce motion show the feature image instead, by design.
The newsletter band and Subscribe button are missing
They need members enabled with signups open to everyone, under Settings → Membership, and Show newsletter signup turned on for the band.
My fonts did not change
A font chosen in Ghost's Brand settings overrides the theme's font settings. Set Ghost's heading and body fonts back to Theme default to use Fraunces, Newsreader or Inter from the theme.
Page two looks different from the homepage
Expected. Ghost uses one template for the front page and another for the pages after it, so page two onwards is a plain archive.
I cannot find the theme settings panel
Hamptons must be the active theme, not merely uploaded. Activate it under Settings → Design & branding → Change theme, then reload Ghost Admin. Custom themes also require Ghost(Pro) Publisher or higher, or a self-hosted install.
Still stuck?
Email [email protected] with your Ghost version, the page URL and a screenshot or the exact error. I aim to reply within two business days, and support covers installation, documented settings and confirmed defects.
For installation, updates and licensing, see the main documentation. For release notes, see the changelog.