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
• Social Links – Configure site-wide social links
• Footer Menus – Defined in src/config/menu.<lang>.json
• Ask AI Row – src/layouts/components/global/footer/FooterAi.astro. See 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:

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

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

{
  "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.

Customizing Brand Text

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

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

[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 />:

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