# Customizing Footer

## Customizing The Footer

**Files:** `src/config/config.toml`, `src/config/menu.<lang>.json`, `src/i18n/<lang>.json`, `src/layouts/components/global/Footer.astro` · **Skill level:** Beginner

In the Tina edition, you edit this in **Site settings** (under **Settings**), **Menus** (under **Footer**), **Social links**, and **Interface labels** (under **Footer**) at `/admin/`. In the Sanity edition, open **Site settings** in the Studio, and **Menus > Footer menu** and **Interface labels > Footer** under your language.

Techlo uses a single, shared footer, `src/layouts/components/global/Footer.astro`, and pulls most of its content from configuration and language files.

- **Logo & Brand Text** – Controlled by `site.logo` and `site.logoText`
- **Phone & Email** – Controlled by `[settings.contactInfo]`. See [Header](../header/)
- **Social Links** – [Configure site-wide social links](../social/)
- **Footer Menus** – Defined in `src/config/menu.<lang>.json`
- **Ask AI Row** – `src/layouts/components/global/footer/FooterAi.astro`. See [AI Links & llms](../../features/ai-links-llms/)
- **Copyright & Footer Description** – See below
- **Theme Credit** – See below

### Customizing Copyright Text And Footer Description
Techlo reads its footer copy from each language file by default. In `src/i18n/en.json`:

```json
"footer": {
  "description": "We partner with growing organizations to plan, build, secure, and support reliable technology systems for everyday business operations.",
  "copyright": "Copyright © 2026 Your Company. All rights reserved."
}
```

1. Open `src/i18n/en.json`, then the same file for each of your other languages, `src/i18n/fr.json` and `src/i18n/ar.json`.
2. Locate the `"footer"` object.
3. Update `"description"` and `"copyright"`.

A value in `config.toml` replaces the text in every language, so leave these empty unless you want that:

```toml
# src/config/config.toml
[settings]
  footerDescription = ""

  [settings.copyright]
    enable = true
    text   = ""
```

### Customizing Footer Menu Columns
The footer link columns live in `src/config/menu.<lang>.json` under the `footer` list. Each object is a column with a `label` and a `list` of links. The sample has three columns: **Quick Links**, **Services**, and **Company**.

```json
{
  "footer": [
    {
      "label": "Quick Links",
      "list": [
        { "enable": true, "name": "About Us", "url": "/about/" },
        { "enable": true, "name": "Our Team", "url": "/team/", "active": true },
        { "enable": true, "name": "Pricing Plans", "url": "/pricing/" }
      ]
    }
  ]
}
```

Set `enable: false` on any link to hide it without deleting the entry. `active` highlights a link. A column with no links left is hidden. See [Menus](../menus/).

### Customizing Brand Text
Techlo does not use a separate `brandName` setting. The visible text next to the footer logo comes from `site.logoText`:

```toml
# src/config/config.toml
[site]
  logo     = "/images/logo.svg"
  logoText = "Techlo"
```

That value is rendered by `src/layouts/components/global/Logo.astro`.

### Theme Credit
The footer has a small line with the theme credit, rendered by `src/layouts/components/global/footer/FooterCredit.astro`. You can edit it in `config.toml`:

```toml
# src/config/config.toml
[settings.themeCredit]
  enable = true
  text   = "..."
  url    = "..."
```

The same text is the last line of `llms.txt`. It isn't translated, so it reads the same in every language.

### Footer Dark Background
Pages can render the footer on a dark background with `hasFooterDarkBackground`, in the page's frontmatter or on `<Base />`:

```astro
<Base {...homepageContent?.data} hasFooterDarkBackground={true}>
  <!-- sections -->
</Base>
```

The routes of Home 01, contact, FAQ, pricing, and testimonials set it on `<Base />`, and a value there wins over the frontmatter. Home 03 sets it in its frontmatter, so in the Tina and Sanity editions it is a switch in that page's form. Other pages have the light footer.