How the pricing page works
The pricing page is built from several components that share the visitor’s choices. When a visitor picks a customer segment or a payment interval in one component, every other pricing component on the page updates.
The components
Section titled “The components”| Component | What it does |
|---|---|
| Pricing Page Header | Page title, short highlights and the segment picker (Studios or Sport centres). |
| Pricing Controls | A title with a tooltip, and the payment interval switch (yearly or monthly). |
| Pricing Tier Cards | The row of pricing cards. In the Advanced variant it also shows add-ons and a price summary. |
| Pricing Card | One plan inside Pricing Tier Cards. |
| Pricing Add-on Card | An optional add-on offered with a plan. |
| Feature Comparison | The table of features per plan, with collapsible groups. |
A typical page has them in this order: Pricing Page Header, Pricing Controls, Pricing Tier Cards, Feature Comparison.
The visitor’s choices
Section titled “The visitor’s choices”Segment: Studios or Sport centres
Section titled “Segment: Studios or Sport centres”The segment picker in the Pricing Page Header switches between Studios and Sport centres. The other components then show their Studios or Sport centres content: different cards, disclaimers, tooltip texts and feature rows.
- Without a segment picker on the page, every component shows its Studios content.
- The selected segment is added to the page address as
?segment=studiosor?segment=sport-centres. A link with this parameter opens the page with that segment selected, so you can link straight to the Sport centres prices. - A market that sells only one segment can hide the picker with Offered segments in the Pricing Page Header. See Offer only one segment.
Payment interval: yearly or monthly
Section titled “Payment interval: yearly or monthly”The switch in Pricing Controls chooses which price every card shows. Yearly is selected when a visitor first arrives. The choice is remembered while the browser tab stays open.
Selected plan and add-on
Section titled “Selected plan and add-on”In the Advanced variant of Pricing Tier Cards, visitors select a plan by clicking a card and then choose an add-on. The summary adds up both prices. The Feature Comparison table uses the selected plan’s name as its column heading.
Prices
Section titled “Prices”- Every price is rounded to a whole number.
- A Discount (%) on a card shows the old price crossed out, the discounted price and a badge such as
-20%. The summary uses the discounted price. - For a plan without a fixed price, such as an enterprise plan, enter a Price text like
On requestand set both prices to0.