Techlo Theme Documentation

Customizing the Footer

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

• Logo & Brand Text – Controlled by site.logo and site.logoText
• Social Links – Configure site-wide social links
• Footer Menus – Defined in src/config/menu.en.json / menu.fr.json
• Subscription – Set up the subscription form
• Copyright & Footer Description – See below

Customizing Copyright Text and Footer Description

Techlo reads its footer copy from the i18n files by default:

Example: English (en.json)

"footer": {
  "description": "We partner with growing organizations to plan, build, secure, and support reliable technology systems for everyday business operations.",
  "quickLinksTitle": "Quick Links",
  "servicesTitle": "Services",
  "informationTitle": "Information",
  "copyright": "Copyright © 2026 Your Company. All rights reserved."
}

1. Open src/i18n/en.json or src/i18n/fr.json.
2. Locate the "footer" object.
3. Update "description" and "copyright".

Note: If you are not using the multilingual feature, you can set these directly in config.toml.

src/config/config.toml

footerDescription = ""

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

When footerDescription / settings.copyright.text are left empty, Techlo falls back to the i18n values shown above.

Customizing Footer Menu Columns

The footer link columns live in src/config/menu.en.json under the footer array. Each object is a column with a label and a list of links:

{
  "footer": [
    {
      "label": "Quick Links",
      "list": [
        { "enable": true, "name": "About Us", "url": "/about/" },
        { "enable": true, "name": "Our Team", "url": "/team/" },
        { "enable": true, "name": "Pricing Plans", "url": "/pricing/" }
      ]
    },
    {
      "label": "Services",
      "list": [
        { "enable": true, "name": "Web Development", "url": "/services/service-02/" }
      ]
    }
  ]
}

Set enable: false on any link to hide it without deleting the entry.

Customizing Brand Text

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

src/config/config.toml

[site]
  logo     = "/images/logo.svg"
  logoText = "Techlo"

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

Footer Dark Background

Pages can render the footer on a dark background by passing hasFooterDarkBackground through the page frontmatter or <Base />:

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

This is how the default homepage (Home 01) renders its dark footer.