> ## Documentation Index
> Fetch the complete documentation index at: https://afrizon-admin.tunzaa.co.tz/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize tenant branding, logos, and storefront

> Set colors, upload logos, manage promotional banners, configure legal links, and toggle feature modules for each tenant storefront in Meneja.

Each tenant in Meneja has its own branding configuration that controls how the storefront looks and what information it presents to shoppers. You can set the color palette, upload logos, manage promotional banners, provide legal and support links, and toggle feature modules — all from the Tenant settings page.

## Theme and colors

The theme section controls the visual appearance of the tenant storefront. Colors are specified as hex values (e.g., `#4285F4`).

### Color fields

| Field                         | Description                                               |
| ----------------------------- | --------------------------------------------------------- |
| `colors.primary`              | Primary brand color, used for buttons and key UI elements |
| `colors.secondary`            | Secondary brand color, used for accents and highlights    |
| `colors.accent`               | Accent color for calls to action and badges               |
| `colors.text.primary`         | Main body text color                                      |
| `colors.text.secondary`       | Subdued or secondary text color                           |
| `colors.background.primary`   | Main page background color                                |
| `colors.background.secondary` | Secondary background for cards and panels                 |
| `colors.border`               | Color used for dividers and input borders                 |

### Logo fields

| Field            | Description                                                            |
| ---------------- | ---------------------------------------------------------------------- |
| `logo.primary`   | Full-size primary logo, shown in the header                            |
| `logo.secondary` | Alternative logo variant, such as a light version for dark backgrounds |
| `logo.icon`      | Small icon or favicon used in compact contexts                         |

All logo values are URLs pointing to hosted image assets.

## Metadata

The metadata section holds informational and legal content for the storefront.

| Field              | Description                                          |
| ------------------ | ---------------------------------------------------- |
| `terms_conditions` | URL to the tenant's terms and conditions page        |
| `privacy_policy`   | URL to the tenant's privacy policy page              |
| `support_email`    | Contact email displayed to shoppers                  |
| `support_phone`    | Contact phone number displayed to shoppers           |
| `banners`          | Array of promotional banners shown on the storefront |

### Banners

Each entry in the `banners` array has the following fields:

| Field           | Required | Description                                                                |
| --------------- | :------: | -------------------------------------------------------------------------- |
| `title`         |    Yes   | Display title for the banner                                               |
| `image_url`     |    Yes   | URL of the banner image                                                    |
| `alt_text`      |    No    | Descriptive text for accessibility                                         |
| `display_order` |    Yes   | Integer that controls the order banners appear; lower numbers appear first |

<Note>
  `alt_text` is optional in the data model but providing it improves accessibility for shoppers using screen readers.
</Note>

## Modules

The modules section lets you enable or disable features for a specific tenant. Each module is a boolean toggle.

| Module     | Field        | Description                                            |
| ---------- | ------------ | ------------------------------------------------------ |
| Payments   | `payments`   | Enables the payments feature for the tenant storefront |
| Promotions | `promotions` | Enables promotional campaigns and discount codes       |
| Inventory  | `inventory`  | Enables inventory tracking and stock management        |

Setting a module to `false` hides the related features from that tenant's dashboard and storefront without deleting any existing data.

## Update tenant branding

<Steps>
  <Step title="Open the tenant">
    Go to **Tenants** in the sidebar and click on the tenant you want to update.
  </Step>

  <Step title="Navigate to the Branding tab">
    Inside the tenant detail view, select the **Branding** tab.
  </Step>

  <Step title="Set colors">
    Enter hex color codes for each color field. The preview updates as you type, so you can confirm the palette looks correct before saving.
  </Step>

  <Step title="Upload logos">
    Provide URLs for the primary, secondary, and icon logo fields. Make sure each URL is publicly accessible.
  </Step>

  <Step title="Add or reorder banners">
    Under **Banners**, click **Add banner** to create a new entry. Fill in the title, image URL, and optional alt text. Set `display_order` to control the sequence — for example, `1` for the first banner, `2` for the second.
  </Step>

  <Step title="Update metadata">
    Switch to the **Metadata** tab and enter URLs for the terms and conditions and privacy policy pages. Add the support email and phone number that shoppers can use to contact the tenant.
  </Step>

  <Step title="Toggle modules">
    Under **Modules**, switch the payments, promotions, and inventory toggles to match what the tenant's plan includes.
  </Step>

  <Step title="Save changes">
    Click **Save** to apply all changes. The updated branding takes effect immediately on the tenant's storefront.
  </Step>
</Steps>

<Warning>
  Disabling a module (for example, setting `inventory` to `false`) hides inventory features from the tenant's dashboard immediately. Re-enabling the module restores access to the existing data.
</Warning>

<Tip>
  Use `display_order` values with gaps (e.g., `10`, `20`, `30`) rather than sequential integers. This makes it easier to insert new banners between existing ones later without renumbering everything.
</Tip>