Pricing Cards, Plan Comparison and Price Calculator widget settings

Three widgets in the Business group of the Add panel show prices. Pricing Cards shows each plan as a card, with an optional monthly / annual switch. Plan Comparison is a table of plans against features. Price Calculator walks visitors through a few choices and adds up an estimate.

Every panel ends with Spacing and Animations & Effects (see Widget design panel basics and Animations and effects). Title and text sections use the standard text controls explained there.

When Zeus fills a template for a client, Pricing Cards and Plan Comparison take their plans and prices from the client's price list in Business extras, word for word. See Fill a template with Zeus.

Pricing Cards

How to add it

1. Click Add, open Business, and drag Pricing Cards onto the page. It starts with Basic, Professional (featured) and Enterprise.
2. Click Manage Plans.
3. Pick a plan on the left to edit it. Use Add plan, Move up, Move down, Duplicate and Delete to change the list.
4. Click Save.

Manage Plans

For the whole widget:

• Title: the switch and text. Default "Choose Your Plan", shown.
• Monthly / annual switch: on by default. Then the two labels (default "Monthly" and "Annual") and Show monthly first or Show annual first.
• Currency: default "$".
• Monthly suffix (after monthly prices): default "/month".
• Annual suffix (after annual prices): default "/year".

For each plan:

• Plan name and Subhead ("For small teams").
• Monthly price (called Price with the switch off): a number, or words like "Free" or "Custom".
• Annual price and Annual savings note ("Save 20%"): show with the switch on.
• Featured plan: highlights the card with a border and a badge. Badge text defaults to "Most popular".
• Button text: default "Get started".
• Button link (monthly) and Button link (annual) (just Button link with the switch off). Click Use the monthly link to drop a separate annual link. See Link picker.
• Features (one per line): each line gets a check mark.

Layout

• Plans per row: 1 to 6, per screen size. Default 3 desktop, 2 tablet, 1 phone.
• Gap: 0 to 64 px, per screen size. Default 24.

Cards

• Card background: default white.
• Border: 0 to 6 px. Default 1.
• Border color: shows when the border is above 0. Default light gray.
• Corner radius: 0 to 40 px. Default 12.
• Featured border & badge: default the theme's primary color.
• Badge text: default white.
• Check marks: default green.
• Savings note: default green.

Buttons

Starts closed. Plans (default Secondary) and Featured plan (default Primary), each Primary or Secondary from the site theme.

Title, Plan Name, Price and Features

Text controls. Title shows only when the title is on (default 35 px bold, centered). Plan Name default 22 px bold. Price up to 96 px (default 44 desktop, 36 phone, bold). Features up to 28 px (default 15).

Plan Comparison

A real table: plans across the top, features down the side, each cell a ✓, ✗, text or blank. On phones it shows one plan at a time with tabs, or scrolls sideways.

How to add it

1. Drag Plan Comparison from Business onto the page. It starts with Basic, Pro (highlighted) and Business.
2. Click Manage Comparison and edit the table. Click Save.

Manage Comparison

• Title and Show: default "Compare plans", hidden.
• Phones: one plan at a time (default) or Phones: scroll sideways.
• Plan columns: type the Plan name. Move left, Move right, Delete plan (you need at least one), Highlight to tint one plan's column, and Add plan (the + button).
• Rows: the Feature or section name, Move up, Move down, Delete row. A section heading row spans the table.
• Each cell: ✓, ✗, Text (then type it, like "25" or "Unlimited") or — (blank).
• Add feature and Add section heading at the bottom.

Table

• Colors: Plan header background (default the theme's primary), Plan header text (white), Feature column, Cells, Section headings, Highlighted plan, Borders, Included ✓ (green) and Not included ✗ (gray).
• Alternating row color: off by default. Even rows sets its color.
• Keep the feature column visible when scrolling sideways: on by default.
• Corner radius: 0 to 24 px. Default 8.

Title, Plan Headers, Feature Labels and Cells

Text controls. Title shows only when the title is on (default 30 px bold, centered). Plan Headers up to 32 px (default 17 bold). Feature Labels and Cells up to 28 px (default 15).

Price Calculator

Visitors pick options step by step, see a running total, and finish on a summary with an estimated total and a button. It's an estimate only. It doesn't take payment or send a submission.

How to add it

1. Drag Price Calculator from Business onto the page. It starts with three example steps (Project, Features, Timeline).
2. Click Edit Calculator.
3. Click a step's tab to edit it, or + Add step… to add one. The last tab is Summary & Button.
4. Click Save.

Steps

Each step is one of three kinds:

• Choose one: visitors pick one option.
• Choose several: visitors tick any number.
• Number × price: visitors enter a number, multiplied by a Unit price. Set the Unit name, Minimum, Maximum and Starting value.

For every step:

• Progress label: a short word under the step number.
• Title and Subtitle.
• Visitors must choose before continuing (Choose one) or Visitors must tick at least one (Choose several).
• Options: each has an Icon (emoji), Option name, Description (optional), a Price, and Price text (automatic if empty, or your own like "from $800"). On a Choose one step, each option also has × total, which multiplies the whole estimate: 1.5 for a rush fee, 0.9 for a 10% saving, 1 for no change. Reorder with the arrows, remove with ×, and add with + Add option.
• ← Move step earlier, Move step later → and Delete step.

Summary & Button

• Currency symbol (default "$"), Symbol position ($100 or 100 €) and Cents (None or .00).
• Progress label (default "Estimate"), Summary title ("Your Estimate") and Summary subtitle.
• Total label (default "Estimated Total") and Show "Starting at" before the total.
• Note / disclaimer: default "Final pricing may vary based on project details."
• Button text: default "Get Your Quote". Leave it empty to hide the button.
• Button link: + Add link (e.g. your contact page or a popup), or Remove link.
• Next button, Back button, Start over button and Running total label: the wording for those parts.

Layout

• Option columns (desktop): 1 to 4. Default 3.
• Progress steps: the numbered steps along the top. On by default.
• Running total: on by default.

Cards & Colors

Starts closed.

• Accent (selected, progress, total): default the theme's primary.
• Card background: default white.
• Corners: 0 to 32 px. Default 12.
• Primary button or Secondary button: default Primary.

Step Titles and Text

Text controls. Step Titles up to 60 px (default 28 bold, centered). Text up to 32 px (default 15).

Examples

• A web studio: Pricing Cards with three plans, the middle one featured, and the switch showing annual first with "Save 20%".
• A gym: Plan Comparison with sections for Classes and Extras, and phones showing one plan at a time.
• A fence company: Price Calculator with Fence type (Choose one), Length in feet (Number × price) and Gates (Choose several), ending on a "Book a site visit" button linked to a popup.

Limits and what it can't do

• None of the three take payment. For a payment button, see Coupon, Countdown and PayPal Button.
• Price Calculator doesn't save or email what visitors chose. Link its button to a page with a Contact Form if you need the details.
• Pricing Cards has one currency and two price periods (monthly and annual).
• Plan Comparison is typed in; it can't read from a collection.
• None of these can be connected with Connect to Data.

Who can use it

Anyone with the Mount Olympus tool. Client people need Editor to add these widgets or change their design, and Widget content to change plans, prices and steps.

Troubleshooting

• "Select or add a plan." in Manage Plans: click a plan on the left, or Add plan.
• The annual price doesn't show: turn on Monthly / annual switch in Manage Plans.
• The annual button goes to the monthly page: set Button link (annual), or check you didn't click Use the monthly link.
• No badge on a plan: turn on Featured plan and fill in Badge text.
• Can't delete the last plan in Plan Comparison: the table needs at least one plan.
• The comparison table is cramped on phones: choose Phones: one plan at a time.
• The calculator button doesn't show: fill in Button text on the Summary & Button tab.
• The total looks wrong: check each option's × total (1 means no change) and the Cents setting.