---
title: "Appearance tab of the Site record"
description: "Field-by-field guide to your site's Appearance tab: logos, email color, shop banner, favicon, fonts, CSS and tags added to the page head."
url: https://www.ciklik.academy/en/personnalisation-site/apparence-de-la-fiche-site/
lang: en
lastUpdated: 2026-10-09
---

# Appearance tab of the Site record

> Box store
>
> This page applies to box stores hosted by Ciklik. The **Email Logo** and **Email Color** fields are also used for the emails Ciklik sends for a PrestaShop store. Using the PrestaShop module? [See the PrestaShop documentation](https://www.ciklik.academy/en/prestashop/).

The **Appearance for** tab (followed by your site name) holds the visual settings of your store and of your emails.

1. Go to **Settings > Sites**.

2. Click the **Edit** icon (pencil) of your site.

3. Open the **Appearance for** tab (followed by your site name), change the fields, then click **Update**.

## Tab fields

| Field                         | Purpose                                                                                                                                                                                                                   |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Logo**                      | Your site logo, in jpg, jpeg, png or svg. See [Add a logo](https://www.ciklik.academy/en/personnalisation-site/ajouter-un-logo/).                                                                                         |
| **Email Logo**                | Logo at the top of your emails, in jpg, jpeg or png, shown 150 px wide. When empty, emails use the **Logo**, which is a problem with an svg logo that many email clients do not display.                                  |
| **Email Color**               | Background color around the content of your emails. Without a value, a default blue is used.                                                                                                                              |
| **E-Shop Banner Title**       | Title of your shop page (`/shop`). Without a value, the title is “Shop”.                                                                                                                                                  |
| **E-Shop Banner Description** | Text shown below that title.                                                                                                                                                                                              |
| **E-Shop Banner**             | Image shown at the top of the shop page, in jpg, jpeg or png. No text is placed over the image.                                                                                                                           |
| **Composition Description**   | Text shown at the top of the box composition page (`/shop/compose`).                                                                                                                                                      |
| **Favicon**                   | Browser tab icon, in jpg or png, cropped then resized to 64 x 64 px. It can be replaced, not deleted.                                                                                                                     |
| **Title Font**                | Name of the font for titles, for example `Lato`.                                                                                                                                                                          |
| **Body Font**                 | Name of the font for text.                                                                                                                                                                                                |
| **Custom CSS**                | Your CSS rules, added to every page of the site.                                                                                                                                                                          |
| **CSS Variables**             | The variables that set the site’s colors and style (`--primary`, `--color1`…). See [Customize site design](https://www.ciklik.academy/en/personnalisation-site/personnaliser-le-design-de-son-site-couleurs-et-polices/). |
| **Extra tags in the head**    | HTML code added to the `<head>` section of every page of the site, for example a domain verification tag.                                                                                                                 |

The **Custom CSS**, **CSS Variables** and **Extra tags in the head** fields are not shown when the site is created, only when editing.

## Fonts

Ciklik loads both fonts from Google Fonts automatically when both names are plain family names: letters, digits and spaces, such as `Open Sans`. If either one contains anything else (`Work+Sans:wght@300`, a comma, quotes), no font is loaded and the site uses the fallback font.

Both fields feed the `--police` and `--police-titre` variables. If you also declare these variables in **CSS Variables**, those values win.

## Tags in the head

> Caution
>
> The code in **Extra tags in the head** applies to the whole site. A `<meta name="robots" content="noindex">` tag placed here removes all your pages from search engines. A `<meta name="description">` tag replaces the default description of pages that have none.

For a tracking tool (Google, Facebook, TikTok, Affilae), use the dedicated fields in the **Marketing Parameters** and **Advanced trackers** tabs instead: see [Marketing Parameters and Advanced trackers tabs](https://www.ciklik.academy/en/parametres-marketing/onglets-parametres-marketing-et-trackers-avances/).

## See also

[Add a logo](https://www.ciklik.academy/en/personnalisation-site/ajouter-un-logo/)

[Customize site design: colors and fonts](https://www.ciklik.academy/en/personnalisation-site/personnaliser-le-design-de-son-site-couleurs-et-polices/)

[Visual checklist](https://www.ciklik.academy/en/personnalisation-site/check-list-visuels/)

[Automated emails and their variables](https://www.ciklik.academy/en/contenu-mails/gestion-des-templates-des-mails-transactionnels/)