# Quick Start

## Make Ecozen Yours In 30 Minutes

**Skill level:** Beginner · **Time:** 30 minutes · **You need:** the site running with `npm run dev` ([Installation](/ecozen/getting-started/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](../../features/what-is-editable-tina/) and [Editable In Sanity](../../features/what-is-editable-sanity/).

<Aside type="tip">
  Before you start, save a copy of the untouched theme (or commit it with git) so
  you can always compare or go back. See [Editing Safely](/ecozen/beginner/editing-safely/).
</Aside>

<Steps>

1. **Name your site and set its address**

   Open `src/config/config.toml` and edit the `[site]` block:

   ```toml
   [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.

2. **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](/ecozen/customization/internationalization/) to add or remove languages for good.

3. **Add your logo**

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

   ```toml
   [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](/ecozen/customization/site-identity-logo/).

4. **Set your brand colors**

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

   ```css
   --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](/ecozen/customization/colors-fonts/).

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

   ```toml
   [settings.contactInfo]
     address = "12 Example Road, Your Town"
     email   = "hello@your-domain.com"
     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.

6. **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](/ecozen/customization/homepages/#pick-your-homepage-and-delete-the-others). 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.

7. **Point the header button and menus at your pages**

   The header button is in `config.toml`:

   ```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](/ecozen/customization/menus/).

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

   ```toml
   [settings]
     contactFormAction   = "https://formsubmit.co/you@your-domain.com"
     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](/ecozen/customization/forms/).

9. **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](/ecozen/customization/pricing/) and [Savings Calculator](/ecozen/customization/savings-calculator/).

10. **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](/ecozen/customization/footer/).

    Then stop the dev server and run:

    ```bash
    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](/ecozen/deployment/) guide.

</Steps>

### What Next?
- Replace the demo content page by page: [Pages](/ecozen/customization/pages/) lists every page and its file.
- Replace the demo photos with your own: [Icons & Images](/ecozen/customization/icons-images/).
- Try the other layouts of your sections: [Section Layouts](/ecozen/customization/section-layouts/).
- Let an AI assistant do the repetitive work: [Prompt Library](/ecozen/ai-customization/prompt-library/).