# Common Changes (Cookbook)

## Common Changes

**Skill level:** Beginner unless marked

Quick recipes for the changes people ask about most. Each one names the file and the exact lines.

### Button Options
Every button in Ecozen's content files (hero, sections, packages, call to action, quote form) uses the same options, defined as `sharedButton` in `src/sections.schema.ts`:

```yaml
button:
  enable: true
  label: "Get a free quote"
  url: "/contact/"           # a page on your site, a full https:// address, tel:, or mailto:
  variant: "fill"            # fill | outline | text | circle
  hoverEffect: "creative-fill"  # text-flip | creative-fill | magnetic | magnetic-text-flip (leave the line out for none)
  target: ""                 # "_blank" opens in a new tab (links to other sites do this on their own)
  rel: ""                    # for example "nofollow"
  class: ""                  # "btn-accent" (accent color), "btn-light" (white), or other CSS classes
  icon:
    enable: true
    name: "ArrowUpRight"     # any Lucide icon name in PascalCase
    position: "right"        # left | right
```

Set `enable: false` to hide a button without deleting it. Lists of buttons (`buttons:` in the hero and the call to action) take the same options per item.

### Hide A Section
- **Everywhere:** `enable: false` at the top of `src/content/sections/english/<section>.md`.
- **On one page:** add its block to the page file, for example `faqSection:` with `enable: false` under it. This works where the route passes the block to the section: see the table in [Sections](/ecozen/customization/sections/#blocks-each-page-reads). The main homepage reads only a `ctaSection` block (it ships with the call to action off), so for its other sections remove the section's line from `src/pages/[...lang]/index.astro` instead.

### Reorder The Homepage *(light code)*
Open `src/pages/[...lang]/index.astro` and move the section lines inside `<Base>`. Top to bottom in the file is top to bottom on the page.

### Change The Hero Photo
The main homepage's `photo` hero ships with three `slides` that crossfade, each with its own photo, headline, and text. In `src/content/sections/english/hero-section.md`, change `image` and `imageAlt` of each slide:

```yaml
slides:
  - label: "Rooftop solar"                    # name of the tab under the photo
    title: "Clean solar power for homes and businesses"
    description: "..."
    image: "/images/photos/my-roof.jpg"       # src/assets/images/photos/my-roof.jpg
    imageAlt: "Solar panels on a family home at sunset"
```

For one still photo, set `slides: []` and use the top-level `image` and `imageAlt` (with `title` and `description`) instead. `options.interval` sets how long each slide stays, in milliseconds. The `photo` hero also shows a row of `facts` along the bottom; the other hero layouts (`split`, `panel`, `form`) use other fields. See [Section Layouts](/ecozen/customization/section-layouts/#hero).

### Change The Rating Line
The "4.9 ★★★★★ From 600+ customer reviews" line in the hero and on the about page is `rating` in `hero-section.md` and `about-intro-section.md`: the stars, a `value`, and a `label`. Use a real figure from a review platform, or set `value: ""` to hide the line.

### Add, Remove, Or Reorder Items In A List
Packages, FAQ questions, benefits, statistics, logos, and form fields are YAML lists. Each item starts with `- `. Copy a whole item (from its `-` to the line before the next `-`) to add one, delete it to remove one, and move it to reorder. Keep the indentation exactly as in the other items.

### Show The Phone Number In The Call To Action
Set `showPhone: true` in `src/content/sections/english/cta-section.md` (or in a page's `ctaSection` block). The number comes from `[settings.contactInfo] phone`.

### Add A Video To The Benefits Photo
In `benefits-section.md`, add a `video` block. A play button appears over the wide photo:

```yaml
video:
  src: "your-youtube-id"
  provider: "youtube"     # youtube | vimeo | html5
  id: "benefits-video"
```

### Change The 404 Page
Edit `notFound` in each file in `src/i18n/`: the page title, the heading, the text, and the button label.

### Change The Number Of Posts Per Page
`pagination` in `[settings]` of `config.toml`.

### Hide A Page Without Deleting It
Add `draft: true` to its frontmatter. It stays visible in `npm run dev` so you can keep working on it.

### Remove The "Ecozen" Name Everywhere
Change `[site] title`, `tagline`, `description`, and `[seo] author` in `config.toml`, and `footer.copyright` in each file in `src/i18n/`. Then search the whole project (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>) for `Ecozen` and change what is visible text. Replace the logo files too: the shipped ones contain the name.

### Change Wording That Isn't In Any Content File
Labels such as "Read more", "Call us", "min read", "Share", the header button, and form messages live in `src/i18n/<language>.json`. Search those files for the word you see.

<Aside type="tip">
  Can't find something? See [Find Where Any Text Comes From](/ecozen/getting-started/how-ecozen-works/#find-where-any-text-comes-from),
  or ask your AI assistant: "Which file sets the text '[TEXT]' on the page [URL]?"
</Aside>