---
title: "Customize site design: colors and fonts"
description: "Change your box store colors, Google Fonts and CSS with the CSS variables in the Appearance tab of your Ciklik site, to match your brand identity."
url: https://www.ciklik.academy/en/personnalisation-site/personnaliser-le-design-de-son-site-couleurs-et-polices/
lang: en
lastUpdated: 2026-10-09
---

# Customize site design: colors and fonts

> Box store
>
> This page applies to box stores hosted by Ciklik. Using the PrestaShop module? [See the PrestaShop documentation](https://www.ciklik.academy/en/prestashop/).

## Colors and Design

From the [visual editor](https://www.ciklik.academy/en/contenu-pages/creer-sa-page-d-accueil-et-des-pages-de-contenu-avec-l-editeur-visuel/), you have a **color palette** (variables `--color1` to `--color11`) to customize the background colors of blocks and the color of your text. Your site declares 10 of them at installation.

To customize your color palette, enter your [HTML color codes](https://htmlcolorcodes.com/) at the end of the **CSS Variables** field in the **Appearance for** tab (followed by your site name), when you go to **Settings > Sites**, then click **Edit** (small pencil icon).

```css
--color1: #ABD7D1;
--color2: #121C38;
--color3: #43619A;
--color4: #7ad1b9;
--color5: #fafafa;
--color6: #4D9DE0;
--color7: #E15554;
--color8: #E1BC29;
--color9: #7768AE;
--color10: #ccc;
```

You also have the option to modify certain design elements of your site to match your brand guidelines, from the same **CSS Variables** field.

## Main CSS Variables

| Variables                                        | Notes                                   |
| ------------------------------------------------ | --------------------------------------- |
| `--primary`                                      | Main site color                         |
| `--texte`                                        | Text color                              |
| `--lien`                                         | Link color                              |
| `--fond`                                         | Background color                        |
| `--entete-fond`                                  | Header background                       |
| `--btn-fond` / `--btn-color`                     | Button background and text              |
| `--btn-secondary-fond` / `--btn-secondary-color` | Secondary button background and text    |
| `--footer-fond` / `--footer-texte`               | Footer background and text              |
| `--fond-mini-banner`                             | Background of the banner above the menu |
| `--police`                                       | Body font                               |
| `--police-titre`                                 | Title font                              |

## Fonts

You can change your site’s fonts using Google Fonts.

To do this, enter the font name (for example `Open Sans`) in the **Title Font** and **Body Font** fields of the **Appearance for** tab. Both fonts are then loaded automatically from Google Fonts.

> Caution
>
> Fill in both fields, with the family name only (letters, digits and spaces, no weight or quotes): otherwise no font is loaded. If your **CSS Variables** field already contains the `--police` or `--police-titre` variables, they take precedence: update or remove them.

## Advanced Customization

For more advanced customizations, you can add CSS in the **Custom CSS** field of the same tab.

Inspect the elements of your site with your browser’s developer tools to identify the CSS classes to target.

## See also

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

[Add a banner](https://www.ciklik.academy/en/personnalisation-site/ajouter-une-banniere/)

[Create your homepage and content pages with the visual editor](https://www.ciklik.academy/en/contenu-pages/creer-sa-page-d-accueil-et-des-pages-de-contenu-avec-l-editeur-visuel/)

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