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:
```yaml
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](/ecozen/customization/common-changes/#button-options), 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
```yaml
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
```text
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.
```