Pricing

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

Ecozen pricing page

The pricing page (/pricing/) shows, from top to bottom: the page header, the packages with the pay upfront / pay monthly toggle, a benefits grid (“Every package includes”), a pricing FAQ, and the call to action.

Packages

Edit src/content/sections/english/pricing-section.md. Each item of list is one package card:

list:
  - enable: true            # required: a package without it is hidden
    featured: true          # dark card with a label
    featuredLabel: "Most popular"
    eyebrow: "For family homes"
    name: "Home"
    description: "A 7 kWp system sized for a family home with daytime and evening use."
    price:                  # shown in "Pay upfront" mode
      prependValue: "$"
      value: "11,400"
      appendValue: ""
    priceNote: "One payment, fully installed"
    monthlyPrice:           # shown in "Pay monthly" mode
      prependValue: "$"
      value: "109"
      appendValue: "/ month"
    monthlyNote: "Over 10 years, no deposit"
    featuresTitle: "Everything in Starter, plus"
    features:
      - "18 panels, about 7 kWp"
      - "Hybrid inverter, battery ready"
    button:
      enable: true
      label: "Get a quote"
      url: "/contact/"
      variant: "fill"
      class: "btn-accent"
    buttonNote: "or book a free roof survey"

Field	What it does
`enable`	`true` shows the package. Unlike most lists, a package without `enable: true` is hidden
`featured`, `featuredLabel`	Highlights the package with a dark card and a label. Use it on one package
`eyebrow`, `name`, `description`	The small label, the package name, and a one-line summary
`price`	The upfront price. `value` is text, so write it as you want it shown (`"11,400"`). `prependValue` and `appendValue` go before and after it, for a currency symbol or “from”
`priceNote`	The line under the upfront price
`monthlyPrice`, `monthlyNote`	The monthly price and its line, shown when the visitor picks Pay monthly
`featuresTitle`, `features`	The heading and checklist on the card
`button`, `buttonNote`	Any button option, and the small text under it

note (above list) is the small print under all the cards. Use it for the terms behind your example prices and monthly plans.

The Upfront / Monthly Toggle

paymentToggle:
  enable: true
  label: "Choose how to pay"      # accessible name of the switch
  upfrontLabel: "Pay upfront"
  monthlyLabel: "Pay monthly"

The toggle shows only when at least one package has a monthlyPrice. Remove every monthlyPrice, or set enable: false, for upfront prices only.
It starts on Pay upfront.
Without JavaScript, the toggle stays hidden: each card shows the upfront price, with the monthly price as a second line.

The Pricing Page File

src/content/pricing/english/-index.md sets the page header and the page’s own blocks:

pricingSection clears the section’s badge, title, and description, because the page header already shows them.
benefitsSection replaces the benefit list with “Every package includes” items and hides the wide photo (image: "") and the marquee.
faqSection holds the pricing questions.

The pricing files have no schema, so npm run astro-check doesn’t report a typo in them. Check /pricing/ in the browser after each change.

Prices In AI Files

With [seo.ai] markdownPages = true, the build writes /pricing.md: each package with its prices and features, then the pricing FAQ. llms-full.txt includes the same text. Both update when you rebuild.

Do It With AI

Update pricing for my business. Packages: [NAME: UPFRONT PRICE, MONTHLY PRICE AND TERM, FEATURES;
...]. Make [PACKAGE] featured with the label "Most popular". Currency symbol "[SYMBOL]". Edit
src/content/sections/english/pricing-section.md, keep enable: true on each package, and update
the note to: [TERMS]. Then do the other language folders.