---
title: "Personnaliser le design de son site : couleurs et polices"
description: "Changez les couleurs, les polices Google Fonts et le CSS de votre boutique box avec les variables CSS de l'onglet Apparence de votre site Ciklik."
url: https://www.ciklik.academy/fr/personnalisation-site/personnaliser-le-design-de-son-site-couleurs-et-polices/
lang: fr
lastUpdated: 2026-10-09
---

# Personnaliser le design de son site : couleurs et polices

> Boutique box
>
> Cette page concerne les boutiques box, hébergées par Ciklik. Vous utilisez le module PrestaShop ? [Voir la documentation PrestaShop](https://www.ciklik.academy/fr/prestashop/).

## Couleurs et Design

Depuis l’[éditeur visuel](https://www.ciklik.academy/fr/contenu-pages/creer-sa-page-d-accueil-et-des-pages-de-contenu-avec-l-editeur-visuel/), vous disposez d’une **palette de couleurs** (variables `--color1` à `--color11`) pour personnaliser les couleurs de fond des blocs et la couleur de votre texte. Votre site en déclare 10 à l’installation.

Pour personnaliser votre palette de couleurs, renseignez vos [codes couleurs html](https://htmlcolorcodes.com/fr/) à la fin du champ **Variables CSS** de l’onglet **Apparence pour** (suivi du nom de votre site), quand vous allez dans **Paramètres > Sites**, puis cliquez sur **Éditer** (petite icône du crayon).

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

Vous avez aussi la possibilité de modifier certains éléments de design de votre site pour respecter votre charte graphique, depuis ce même champ **Variables CSS**.

## Variables CSS principales

| Variables                                        | Notes                                 |
| ------------------------------------------------ | ------------------------------------- |
| `--primary`                                      | Couleur principale du site            |
| `--texte`                                        | Couleur du texte                      |
| `--lien`                                         | Couleur des liens                     |
| `--fond`                                         | Couleur de fond                       |
| `--entete-fond`                                  | Fond de l’en-tête                     |
| `--btn-fond` / `--btn-color`                     | Fond et texte des boutons             |
| `--btn-secondary-fond` / `--btn-secondary-color` | Fond et texte des boutons secondaires |
| `--footer-fond` / `--footer-texte`               | Fond et texte du pied de page         |
| `--fond-mini-banner`                             | Fond du bandeau au-dessus du menu     |
| `--police`                                       | Police du texte                       |
| `--police-titre`                                 | Police des titres                     |

## Polices

Vous pouvez changer les polices de votre site en utilisant les Google Fonts.

Pour cela, renseignez le nom de la police (par exemple `Open Sans`) dans les champs **Police des titres** et **Police du texte** de l’onglet **Apparence pour**. Les deux polices sont alors chargées automatiquement depuis Google Fonts.

> Attention
>
> Renseignez les deux champs, avec uniquement le nom de la famille (lettres, chiffres et espaces, sans graisse ni guillemets) : sinon aucune police n’est chargée. Si votre champ **Variables CSS** contient déjà les variables `--police` ou `--police-titre`, ce sont elles qui s’appliquent : mettez-les à jour ou supprimez-les.

## Personnalisation avancée

Pour des personnalisations plus poussées, vous pouvez ajouter du CSS dans le champ **CSS Personnalisé** du même onglet.

Inspectez les éléments de votre site avec les outils de développement de votre navigateur pour identifier les classes CSS à cibler.

## Voir aussi

[Ajouter un logo](https://www.ciklik.academy/fr/personnalisation-site/ajouter-un-logo/)

[Ajouter une bannière](https://www.ciklik.academy/fr/personnalisation-site/ajouter-une-banniere/)

[Créer sa page d'accueil et des pages de contenu avec l'éditeur visuel](https://www.ciklik.academy/fr/contenu-pages/creer-sa-page-d-accueil-et-des-pages-de-contenu-avec-l-editeur-visuel/)

[Check-list visuels](https://www.ciklik.academy/fr/personnalisation-site/check-list-visuels/)