Quick Start

Make Ecozen Yours In 30 Minutes

Skill level: Beginner · Time: 30 minutes · You need: the site running with npm run dev (Installation)

This page walks through the ten changes almost every site needs, in order. Each step names one file and the exact lines to edit. Save the file and the browser shows the change, config.toml included. In the Tina and Sanity editions, most of these values have a form: see Editable In Tina and Editable In Sanity.

Name your site and set its address

Open src/config/config.toml and edit the [site] block:
```
[site]
  title       = "Acme Solar"
  description = "Solar panels, batteries, and EV chargers for homes and businesses."
  tagline     = "Solar installer"
  baseUrl     = "https://www.your-domain.com"
```
A tagline or description set here is used for every language. Leave them empty to use each language’s own, in src/i18n/<lang>.json.

baseUrl is your live address. The theme ships with the placeholder https://example.com, and npm run build prints a [site] warning until you change it. Canonical URLs, the sitemap, robots.txt, the RSS feed, llms.txt, structured data, and social previews all use it, so set it before you launch.
Decide on languages

Ecozen ships every page in English, French, and Arabic. If you only need English, set enable = false under [settings.multilingual] in the same file. The other language files stay on disk but are no longer built. See Internationalization to add or remove languages for good.

Add your logo

Put your logo files in src/assets/images/ and point the [site] keys at them:

[site]
  logo          = "/images/my-logo.svg"         # dark logo, for light backgrounds
  logoAlternate = "/images/my-logo-light.svg"   # light logo, for the footer and the homepage hero
  logoText      = ""                            # text next to the logo, if your logo has no name in it
  logoWidth     = "132px"
  logoHeight    = "32px"

Then set [site.favicon] image to a square version of your logo and run npm run generate-favicons. Details: Site Identity & Logo.

Set your brand colors

Open src/styles/theme.css and change the brand colors at the top:

--color-primary: #DDEB3B;      /* accent: buttons on photos, icons, highlights */
--color-primary-deep: #4F5A0A; /* the accent as text on light backgrounds */
--color-secondary: #1E4A44;    /* deep green */
--color-accent: #EFF3EC;       /* soft surface behind cards and bands */

Every button, icon, and highlight in the theme updates. Details: Colors & Fonts.

Add your contact details

The phone number, email, address, and opening hours are set once in config.toml and used in the header’s contact row, the mobile menu, the footers, the contact page, and the structured data search engines read:
```
[settings.contactInfo]
  address = "12 Example Road, Your Town"
  email   = "[email protected]"
  phone   = "+1 555 000 0000"
  hours   = "Mon–Fri, 8:00–18:00"
```
Also replace the sample towns in [seo.localBusiness] areaServed with the places you install in.
Pick your homepage and write its hero

Ecozen has four homepages: residential solar (/), commercial and farm (/home-two/), renewable energy developer (/home-three/), and EV charging and batteries (/home-four/). Open each one and keep the one that fits your business. If it isn’t /, follow Use another homepage as your main one. Then delete the other routes in src/pages/[...lang]/ and their files in src/content/homepage/, in every language folder.

For the main homepage, open src/content/sections/english/hero-section.md. Its hero shows slides: change each slide’s label (the tab under the photo), title, description, image, and imageAlt, or set slides: [] to show one still photo from the top-level title, description, image, and imageAlt. Then change the button in buttons, the rating line (value and label; avatars takes real customer portraits, or stays empty), and the facts along the bottom. Do the same in the french/ and arabic/ copies of the file if you kept those languages.
Point the header button and menus at your pages

The header button is in config.toml:
```
[settings.navigationButton]
  enable = true
  label  = ""           # empty uses "Get a free quote" from src/i18n/en.json
  url    = "/contact/"
```
The menu links are in src/config/menu.en.json (and the file for each other language). Set "enable": false on anything you don’t need. The Pages menu (with the four homepages and the Components page inside it) exists to show off the demo, so most sites turn it off. Details: Menus.
Connect the quote form

The quote form on /contact/ posts to a placeholder address until you change it in config.toml. Until you do, npm run dev and npm run build print a yellow [forms] line, and on the dev server a “Dev only · form not connected” note appears inside the form after you submit it:
```
[settings]
  contactFormAction   = "https://formsubmit.co/[email protected]"
  contactFormProvider = "formsubmit.co"   # formsubmit.co | formspree | netlify
```
If you use the newsletter footer, set action and provider under [settings.newsletter] the same way. Details: Forms.
Set your prices and calculator figures

Packages and prices are in src/content/sections/english/pricing-section.md. The savings calculator’s tariff, sun hours, installed cost, and currency are in src/content/sections/english/calculator-section.md. Use figures that are true for your region. Details: Pricing and Savings Calculator.
Change the footer text, then check and build

The footer text is in src/i18n/en.json under footer (and the file for each other language): statement for the default wordmark footer, band for the call-to-action band of the newsletter and cta footers, description, and copyright. In copyright, {{ year }} becomes the year of the build. Social links are in src/config/social.json. Details: Footer.

Then stop the dev server and run:
Terminal window
```
npm run astro-check
npm run build
```
Fix anything astro-check reports. Read the yellow lines in the build output: [site] means baseUrl is still the placeholder (step 1), and [forms] means a form still posts to a placeholder address (step 8). Then follow the Deployment guide.

What Next?

Replace the demo content page by page: Pages lists every page and its file.
Replace the demo photos with your own: Icons & Images.
Try the other layouts of your sections: Section Layouts.
Let an AI assistant do the repetitive work: Prompt Library.