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:

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. 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:

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.

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:

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 (Ctrl + Shift + F) 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.