Pricing

Kivo Theme Documentation

Files: src/content/sections/english/plans-section.md, plan-comparison-section.md, src/content/pricing/english/-index.md · Skill level: Beginner

Kivo pricing page

The pricing page (/pricing/) shows, from top to bottom: the page header, the plans, the comparison table, a feature grid, the FAQ, and the call to action. The plans section also appears on all four homepages.

Plans

Edit src/content/sections/english/plans-section.md:

currency: "USD"          # ISO code, used in the structured data search engines read
currencySymbol: "$"      # shown before each price
monthlyLabel: "Monthly"
yearlyLabel: "Yearly"
yearlyNote: "Save 20%"
perLabel: "/ month"

plans:
  - name: "Team"
    badge: "Most popular"
    featured: true
    description: "For teams shipping production apps."
    monthly: 25           # price per month when billed monthly
    yearly: 20            # price per month when billed yearly
    features:
      - "Unlimited services"
      - "Preview environments"
    button:
      enable: true
      label: "Choose Team"
      url: "/signup/"
      variant: "fill"
  - name: "Enterprise"
    description: "For organizations with advanced needs."
    customPrice: "Custom"  # text instead of a number
    features:
      - "SSO and audit logs"
    button:
      enable: true
      label: "Talk to sales"
      url: "/contact/"
      variant: "outline"

Field	What it does
`monthly`, `yearly`	Prices as numbers (`yearly` is the monthly price when billed yearly). `0` shows as `$0`
`customPrice`	Text instead of a price, such as “Custom” or “Contact us”
`featured`	Highlights the plan. Use it on one plan
`badge`	Small label on the plan card
`features`	The checklist on the card
`button`	Any button option
`link`	The text link under the plans (“Compare all plans”). The pricing page hides it

The monthly/yearly toggle always shows in the default layout. In compact it shows when any plan has a different yearly price, in single when the plan shown does, and usage has no toggle.

Pricing Layouts

options:
  layout: "default"   # default | usage | single | compact

default: plan cards with the billing toggle.
usage: sliders for metered usage and a live monthly estimate on top of the featured plan’s price. Optional: /pricing/ uses default, and the API and AI demo homepages show usage.
single: the featured plan (or the first one) beside its feature checklist. Good for a single-plan product.
compact: every plan as one row of a table.

To change the layout on the pricing page only, edit the plansSection block in src/content/pricing/english/-index.md.

The pricing files (plans-section.md and pricing/english/-index.md) have no schema, so npm run astro-check doesn’t report a misspelled layout or a price written as text. Check /pricing/ in the browser after each change.

Usage Estimator (Optional Layout)

The usage layout is not used on /pricing/ by default. To use it, set layout: "usage" and edit the sample meters in usage.meters of plans-section.md. Each meter is one slider:

usage:
  title: "Estimate your monthly bill"
  totalLabel: "Estimated monthly cost"
  includedLabel: "First {amount} free"   # {amount} becomes the meter's included value and unit
  meters:
    - label: "Requests"
      unit: "M requests"
      price: 0.4       # price per unit
      min: 0
      max: 500
      step: 5
      value: 50        # starting value
      included: 1      # free units each month (optional)

The estimate is the featured plan’s monthly price plus each meter’s (value − included) × price.

Comparison Table

src/content/sections/english/plan-comparison-section.md holds the table below the plans:

plans:                         # the columns, in order
  - name: "Starter"
  - name: "Team"
    featured: true
  - name: "Enterprise"

groups:
  - name: "Deploys"
    rows:
      - label: "Web services"
        values: ["1", "Unlimited", "Unlimited"]   # one value per column
      - label: "Preview environments"
        values: [false, true, true]               # true = check, false = dash

On phones, a table with three or more plans shows one plan at a time, starting with the featured one.

Do It With AI

Update pricing for my product. Plans: [NAME: monthly PRICE, yearly PRICE, FEATURES; ...].
Make [PLAN] featured with the badge "Most popular". Currency [ISO CODE], symbol "[SYMBOL]".
Edit src/content/sections/english/plans-section.md, then rebuild the comparison table in
plan-comparison-section.md with the same plan names and one value per column. Then the French files.