Membership Page

The Membership page is a full pricing-and-signup page built entirely from your native Ghost tiers. It reads each tier's name, description, monthly and yearly price, benefits and free-trial length straight from Settings → Tiers, formats the prices in your currency, and wires every button to Ghost's Portal checkout.

There are no theme settings to fill in. Set your tiers up in Ghost and the page builds itself, staying in step as you change prices or plans.

It ships in two layouts — a plan comparison and a compact order form — supports free trials, and puts whatever you write in the page body below the plans.

Set it up

Tiers in Ghost Admin

Set the page URL to join

Your tiers drive everything

Change a tier in Settings → Tiers and the page updates on the next load. No pricing copy lives in the theme.

• Prices are formatted in each tier's own currency, and the Monthly / Yearly switch changes every price, every saving and every checkout link at once.
• Benefits are the list under each plan, straight from that tier's Benefits field.
• Descriptions are that tier's Description field.
• "Most popular" is stamped on your lowest-priced paid tier automatically.
• The Free tier always appears. Give it benefits too, so its column isn't empty.
• Checkout hands off to Ghost's Portal for the chosen plan and billing period; Ghost handles the card and the trial.

The saving on yearly plans

When a tier's yearly price is genuinely cheaper than twelve monthly payments, the page works out the saving from your own numbers and shows it under that plan's price, as or $50 a year · save 17%.

The line always advertises the other billing period, and it's clickable: a reader viewing monthly prices can tap or $50 a year · save 17% to flip the whole page to yearly, and tap or $5 a month to flip back.

If a yearly price isn't actually cheaper, its line simply doesn't appear: you'll never see "save 0%".

Two layouts

The page has two presentations. The default lays your plans out side by side; switch to the compact order form by adding one internal tag to the page.

Default — Plan cards

With no tag, the page opens on a full-width ink hero — your headline, excerpt and the billing switch on the theme's dark band — and a row of plan cards lifts up over its edge: one clean bordered card per plan, big lining figures for the prices, and the most popular plan framed in your accent colour with a "Most popular" stamp. Beneath the cards a slim reassurance line notes that plans cancel anytime, checkout is handled by Stripe, and access is instant.

The row lays itself out for the number of plans you sell and never leaves a stray card stranded on its own row:

Prices, trials and benefit lists line up across every card, whether or not a given plan offers a trial.

Compact — Join Card

#compact-tier-picker

Add the internal tag #compact-tier-picker to the page (type #compact-tier-picker into the tag field — the leading # keeps it internal, so it never shows publicly) and the plans become a conversion-focused order form under the same ink hero: a ruled plan picker on the left, each row with an expandable "What's included", and an order summary beside it — with the checkout button — that updates as you switch plans and billing period.

Pick the Free plan and a signup form appears in place of the checkout button, so a reader can join without leaving the page. Paid plans hand off to Portal.

Both layouts read the same tiers — the tag only changes the presentation, so you can switch back and forth freely.

Free trials

Set a trial length on a paid tier in Settings → Tiers and the page picks it up:

• the plan's button reads "Start your N-day trial" instead of "Choose plan";
• the plan shows a "Free trial for N days" line;
• in the order form, the summary reads "You pay today — $0" with "Free trial for N days, then $5." beneath it.

Portal applies the trial at checkout, so there is nothing else to set up.

The page body

Anything you add to the page body renders below the plans, styled to match. Author it with native Ghost cards:

• FAQ — add Toggle cards, one per question. The theme restyles them as a flat, ruled accordion with a slim + that turns into a ×.
• A reader quote — a Quote card.
• Where your membership goes — Callout cards, or plain headings and paragraphs.

The Subscribe button across your site

Once the join page exists, the theme points the site's signup actions at it instead of opening the Portal popup:

• the masthead Subscribe button;
• the Subscribe button in the hamburger menu;
• Become a member at the end of a story;
• Become a member / Upgrade on the paywall of a members-only story;
• Compare plans in the Membership CTA band above the footer.

Delete or unpublish the page and every one of them quietly falls back to Ghost's Portal signup, so your site always has a working signup path with or without the page.

Good to know

• No theme settings. The whole page comes from your tiers and the page body; there is nothing to configure under Design & branding.
• Hidden until ready. No join page or a draft, and the page doesn't exist. With members turned off site-wide, the page renders as an ordinary page — headline, excerpt and body — with no plans and no billing switch.
• Keep the URL join. Both the template and the site-wide Subscribe routing key off it.
• The Membership CTA band doesn't appear here. Your plans are the offer on this page; the band would repeat a price beneath them. It carries on as normal everywhere else.
• The reassurance line is honest by design. It claims only what is true of any Ghost site — self-serve cancellation, Stripe checkout, instant access on signup — and appears only when paid plans are purchasable. Don't want it? Add the internal tag #hide-trust-strip to the page and it's gone.
• Member-aware. Signed-in readers see "Change plan" and "My account" instead of signup buttons, and the page greets them by email.
• Built for keyboards and screen readers. The plan picker is a real radio group — native browser controls, so arrow keys move between plans exactly as they do in any form — the billing switch announces its state, every control has a visible focus ring, and motion respects "reduce motion".
• Prints sensibly. The plans print as a single column; the switch, the summary and the buttons don't.
• Styling hooks. Restyle any part from Code injection — [data-region="membership"], [data-component="tier-card"], [data-component="plan-row"], [data-component="order-summary"] and more. See the Hook reference.

Troubleshooting