> For the complete documentation index, see [llms.txt](https://docs.tebex.io/creators/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tebex.io/creators/tebex-control-panel/webstore/appearance.md).

# Appearance

{% hint style="info" %}
Full HTML & CSS Editing is currently unavailable on new stores using our [new storefronts system](/creators/tebex-control-panel/storefronts.md) - we're working on bringing this functionality back soon.

[Information for Legacy Webstore template users.](/creators/tebex-control-panel/storefronts.md#legacy-webstores)
{% endhint %}

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.

***