A pricing section lists the tiers of your Ghost site side by side, each with its name, price, description, benefits and a button to sign up for it. The prices and benefits come from Ghost each time a page loads, so the section stays right when you change a price in Ghost Admin, without publishing the theme again.
Before you start
Your tiers are set up in Ghost Admin, under Settings > Membership > Tiers, with their prices, descriptions and benefits. Paid tiers need Stripe connected there.
Add the pricing section
Open your project in Fantasma.
Add a section where you want the prices, such as on the Homepage template, as Add a section to a page shows. The empty section shows a row of cards.
Click the All patterns card. The pattern picker opens, with categories on its left.
Select the Pricing category and click Membership Tiers. A section named Pricing appears, with a heading, a line of text and a card for each tier.
The Pricing category also has Tier Rows, the tiers as rows between thin lines, and Membership Split, the paid tiers beside a list of what members get. They hold the same blocks as the cards described below.
With demo data, the cards show three sample tiers: Free, Supporter and Patron. With your own site connected, they show your tiers. To change the heading or the line of text, click it on the canvas and type.
The section follows the pattern, so most settings of the blocks inside it are hidden. To change them, click the Pricing row in the Sections list in the left sidebar, then click Detach in its settings in the right sidebar. The section becomes a plain section, and every setting in the next two parts appears. Press ⌘Z, or CtrlZ on Windows, to undo it. How patterns work explains the difference.
Choose which tiers show
The cards sit in a Collection block named Tiers. In the Sections list, click the arrow next to Pricing, then click Tiers.
Setting
What it does
Include Free
On by default. Shows your free tier beside the paid ones. Turn it off for paid tiers only.
Limit
How many tiers show, 3 in the pattern.
Max columns
How many cards sit side by side, 3 in the pattern. On narrow screens the cards wrap to fewer columns.
Every card holds the same blocks, filled with each tier's data. Change one card, and every card changes. The blocks are rows under Tier in the Sections list.
Block
What it shows
Settings
Title
The tier's name.
Price
The tier's price, such as "$5".
Period: Monthly or Yearly. Free tier text shows in place of a price for the free tier, $0 in the pattern; left empty, the free tier shows no price. Show period adds "/ month" or "/ year" to the price itself.
Period
The tier's "/ month" or "/ year", in smaller text beside the price. A free tier shows none.
Period: Monthly or Yearly.
Excerpt
The tier's description from Ghost.
Benefits
The tier's benefits as a list.
Marker: Check, Dot or None before each line.
Tier Sign-up
A button that opens Ghost's sign-up window with this tier picked. Its row and its Label read Subscribe until you change them.
Period: the monthly or the yearly price is picked.
A card shows one period. To offer yearly prices, set Period to Yearly on Price, Period and Tier Sign-up. To show both prices, add a second Price block set to the other period.
To add one of these blocks to the card, click the + on the Tier row in the Sections list. They are under Data in the block picker, and only inside a Collection of tiers.
A pricing section lists the tiers of your Ghost site side by side, each with its name, price, description, benefits and a button to sign up for it. The prices and benefits come from Ghost each time a page loads, so the section stays right when you change a price in Ghost Admin, without publishing the theme again.
Before you start
Add the pricing section
The Pricing category also has Tier Rows, the tiers as rows between thin lines, and Membership Split, the paid tiers beside a list of what members get. They hold the same blocks as the cards described below.
With demo data, the cards show three sample tiers: Free, Supporter and Patron. With your own site connected, they show your tiers. To change the heading or the line of text, click it on the canvas and type.
The section follows the pattern, so most settings of the blocks inside it are hidden. To change them, click the Pricing row in the Sections list in the left sidebar, then click Detach in its settings in the right sidebar. The section becomes a plain section, and every setting in the next two parts appears. Press ⌘ Z, or Ctrl Z on Windows, to undo it. How patterns work explains the difference.
Choose which tiers show
The cards sit in a Collection block named Tiers. In the Sections list, click the arrow next to Pricing, then click Tiers.
Collection describes the rest of its settings.
Change what each card shows
Every card holds the same blocks, filled with each tier's data. Change one card, and every card changes. The blocks are rows under Tier in the Sections list.
$0in the pattern; left empty, the free tier shows no price. Show period adds "/ month" or "/ year" to the price itself.A card shows one period. To offer yearly prices, set Period to Yearly on Price, Period and Tier Sign-up. To show both prices, add a second Price block set to the other period.
To add one of these blocks to the card, click the + on the Tier row in the Sections list. They are under Data in the block picker, and only inside a Collection of tiers.
The section reaches your site when you publish the theme, as Publish your theme to Ghost shows.