> ## Documentation Index
> Fetch the complete documentation index at: https://reseller-docs.gfxtoolz.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance overview

> Nine areas of deep customization, with a live preview beside every control.

<Frame caption="Appearance — section tabs on the left, live preview on the right.">
  ![The Appearance index showing all nine customization sections](https://app.gfxtoolz.ai/docs-assets/reseller/appearance-index.png)
</Frame>

**Appearance** controls how your customer panel looks and behaves. The page header names the surface it affects — *"How yourname.gfxtoolz.ai looks to your customers."*

It is split into nine sections, reachable from the tab row: **All · Theme & colour · Layout · Navigation · Pages · Promotions · Sign-in page · Footer · Support · SEO**.

## The live preview

Every section has a preview column on the right, so you see the effect before committing.

| Control            | What it does                                                          |
| ------------------ | --------------------------------------------------------------------- |
| **Device toggles** | Desktop, tablet and mobile widths.                                    |
| **Dark toggle**    | Preview in the other colour mode.                                     |
| **Expand**         | Full-width preview.                                                   |
| **Page tabs**      | `Home` · `Tools` · `Tool` · `Pricing` · `Sign-in` — preview any page. |

The preview labels its own state: *"Unsaved — your customers see this after you save."*

<Note>
  Nothing is live until you save. **Open panel** (top right) opens your real customer panel in a new tab so you can compare.
</Note>

## The nine sections

<CardGroup cols={2}>
  <Card title="Theme & colour" icon="palette" href="/customize/appearance/theme">
    Preset, font, light/dark, palettes and all 25 colour tokens.
  </Card>

  <Card title="Layout" icon="table-columns" href="/customize/appearance/layout">
    Page frame, sidebar behaviour and the header.
  </Card>

  <Card title="Navigation" icon="bars" href="/customize/appearance/navigation">
    Rename, reorder, re-icon or switch off every menu entry.
  </Card>

  <Card title="Pages" icon="browser" href="/customize/appearance/pages">
    Home, tools and pricing layouts, and which home widgets appear.
  </Card>

  <Card title="Promotions" icon="bullhorn" href="/customize/appearance/promotions">
    Banner, sidebar offer card and popup.
  </Card>

  <Card title="Sign-in page" icon="right-to-bracket" href="/customize/appearance/signin">
    Layout, background pattern and testimonial.
  </Card>

  <Card title="Footer" icon="shoe-prints" href="/customize/appearance/footer">
    Links, copyright and where it appears.
  </Card>

  <Card title="Support" icon="comment-dots" href="/customize/appearance/support">
    The floating WhatsApp chat bubble.
  </Card>

  <Card title="SEO" icon="magnifying-glass" href="/customize/appearance/seo">
    How your public pages appear in search and link previews.
  </Card>
</CardGroup>

## Restore defaults

**Restore defaults** (top right) resets appearance to the platform default. You must **type `restore`** to confirm.

<Warning>
  This discards every appearance change you have made — all nine sections at once. It does not touch Branding, your domain, your pages or your pricing.
</Warning>

## A sensible order

<Steps>
  <Step title="Theme & colour">
    Everything else inherits from it.
  </Step>

  <Step title="Sign-in page">
    The first thing every customer sees.
  </Step>

  <Step title="Pages">
    Home and Tools layouts — where customers spend their time.
  </Step>

  <Step title="Navigation and Footer">
    Rename what does not fit your market; publish your links.
  </Step>

  <Step title="Promotions and SEO">
    Once the panel itself is right.
  </Step>
</Steps>

<Tip>
  Check your panel on a phone before calling it done. In most reseller markets, the majority of customers sign in on one.
</Tip>