# Appearance

The [**Appearance**](https://creator.tebex.io/appearance) section of the Tebex Control Panel allows you to customize the **visual layout**, **styling**, and **behavior** of your store. From templates and themes to visibility settings, branding, and customer experience, this page is your one-stop-shop for customizing how your store looks and feels.

> 📍 Navigate to: [**Webstore** → **Appearance**](https://creator.tebex.io/appearance) (in the left-hand sidebar)

***

### **Understanding Templates and Themes**

| Concept      | Description                                                                                                                                                        |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Template** | Controls the **structure and layout** of your store. It's based on HTML. Templates define how components (like headers, product grids, and sidebars) are arranged. |
| **Theme**    | Controls the **styling and color scheme** of your store. It's based on CSS. Themes change fonts, colors, and visual polish.                                        |

> 💡 Tebex's default free template is **Exo**, which includes several free themes like “Space.”

***

### **Key Appearance Options**

#### Visibility Controls

Limit who can view your store during setup or private testing:

* Click **Visibility** beneath your template name.
* Enable the toggle to **make your store private**.
* Add **IPv4 addresses** to whitelist access. Separate multiple IPs with commas (e.g. `8.8.8.8,8.8.4.4`).
* View your IP [here](https://nordvpn.com/what-is-my-ip/).

> Note: If your store isn't appearing online, check your **Dashboard** to ensure your store has passed the **Store Review** process.

***

Branding (Logo & Favicon)

Customize your store's branding:

* **Logo**: Replaces your store's name text.
  * PNG or WEBP, max 5MB, min width: 500px.
* **Favicon**: Appears in the browser tab.
  * PNG or WEBP, minimum size: 25px x 25px.

***

#### Customer Experience Settings

Control the behavior when customers interact with packages:

* After adding a product to the basket:
  * Redirect to the basket (default)
  * Redirect to the category page
  * Redirect directly to checkout

Control **package visibility** for guest users:

* Allow guests to view packages (default)
* Require login to view packages

***

### Template Options

If you're using a supported template (e.g., **Exo**), you may see extra configuration fields under **Template Options**, such as:

* Store layout style
* Header layout
* Sale banner text
* Store-wide display preferences

> Options vary by template. If you want to change something not available here, contact the original template creator. Tebex Support cannot assist with template customizations.

***

### Managing Templates

#### Change Your Template

1. Go to **Appearance** → **Change Template**
2. Preview and select from the following:
   * **Exo** – Default (Free)
   * **Night, Dusk, Noon, Combat, Flow** – Premium (£24.99 each)
3. Click **Activate** to apply your chosen template

> Premium templates include a variety of color themes and are licensed per store. If you haven't edited the code, future updates will apply automatically.

***

#### Create a Custom Template *(Tebex Plus required)*

1. Go to **Appearance** → **Change Template**
2. Click **Create Custom Template**
3. Name your template and select a base (we recommend **Exo**)
4. Click **Create** to access the code editor
5. Use the **Twig** templating language to build your layout
6. Click **Save as Draft** or **Save and Publish**

> Learn more about [Twig](https://twig.symfony.com/) templating. Tebex does not provide support for custom code.

***

### Managing Themes

#### Change Your Theme

1. Go to **Appearance** → **Change Theme**
2. Browse and preview available themes for your selected template
3. Click **Activate** to apply the theme

***

#### Create a Custom Theme *(Tebex Plus required)*

1. Go to **Appearance** → **Change Theme**
2. Click **Create Custom Theme**
3. Name your theme and paste or write your CSS
4. Click **Create**, then **Preview**
5. Click **Activate** to publish the theme

> You can also use third-party themes by pasting their CSS into the editor. Tebex does not support installing or debugging custom themes.

***

### Support Limitations

* Tebex does **not support** editing, troubleshooting, or maintaining custom template/theme code.
* Deprecated templates like **Flat** and **Abstract** are no longer supported or updated.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tebex.io/creators/tebex-control-panel/webstore/appearance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.