# Gérer la Configuration

## Aperçu

Sous *eCom \\ Einstellungen*, vous configurez le comportement de la boutique.

Quelles configurations existent, quelles valeurs elles peuvent prendre et ce qu'elles produisent, est décrit dans la description des fonctionnalités sur la page *Configuration en aperçu*. Cette page décrit uniquement la procédure et les endroits où l'on se trompe.

## Procédure

1. Ouvrir *eCom \\ Einstellungen*.
2. Modifier la configuration.
3. Enregistrer.
4. Mettre les données à disposition.
 

Un changement prend effet au plus tôt après le prochain intervalle de récupération de la boutique, donc après 15 ou 30 Minutes.

## Configurations qui ne fonctionnent qu'avec un autre endroit

C'est la source d'erreur la plus fréquente : la configuration est définie, mais le second endroit manque.

<table id="bkmrk-einstellung-braucht-"> <thead> <tr> <th>Configuration</th> <th>Nécessite en plus</th> </tr> </thead> <tbody> <tr> <td>Saisie de bon</td> <td>un bon créé sous *eCom \\ Gestion bons d'achat*</td> </tr> <tr> <td>Coûts d'expédition Article</td> <td>Coûts d'expédition et Limite franco de port comme valeurs mandants **avec indicateur eCom**</td> </tr> <tr> <td>Appliquer Valeur de commande minimale du Débiteur</td> <td>données Débiteur fournies ; sinon la valeur mandants s'applique</td> </tr> <tr> <td>Langue par défaut</td> <td>Textes d'article et textes de Groupe de produit dans la Langue choisie</td> </tr> <tr> <td>Pas encore Client, case décochée</td> <td>le Bloc de texte *Pas encore d'accès – Info* sous *eCom \\ Textes*</td> </tr> </tbody> </table>

## Changer les couleurs de la boutique via CSS

La coloration est disponible comme Texte libre dans le champ **CSS**. Les couleurs sont données comme variables CSS en notation HSL.

Pour passer à votre couleur maison, en général deux valeurs suffisent :

1. Définir `--primary` sur votre couleur maison — teinte foncée.
2. Définir `--primary-soft` sur le même angle de couleur, mais très clair.
 

La notation HSL est `hsl(angle de couleur saturation luminosité)`. Pour plus clair ou plus foncé dans la même couleur, vous ne changez que la **dernière** valeur. Les variables avec `var(--primary)` reprennent automatiquement la valeur de la couleur principale.

> **Attention :** Chaque couleur a une couleur `-foreground`, donc la couleur du texte dessus. Veillez à un contraste suffisant, sinon le texte dans la boutique devient illisible.

### Le fond de page

L'arrière-plan de la boutique est constitué d'un **dégradé de couleur d'arrière-plan** avec deux points d'extrémité : `--verlauf-warm` et `--verlauf-kalt`. De plus, il existe la variable `--shop-hintergrund` pour une couleur d'arrière-plan uniforme.

Dans l'état de livraison, les deux points d'extrémité pointent vers `--shop-hintergrund`, qui lui-même pointe vers `--primary-soft` :

```css
--shop-hintergrund: var(--primary-soft); --verlauf-warm: var(--shop-hintergrund); --verlauf-kalt: var(--shop-hintergrund); 
```

Parce que les deux points d'extrémité ont **la même** valeur, aucun dégradé n'est visible dans l'état de livraison — l'arrière-plan est uni. Et parce que la valeur dépend de `--primary-soft`, elle s'adapte automatiquement à la couleur principale : celui qui modifie `--primary-soft` obtient l'arrière-plan correspondant.

**Définir un autre arrière-plan uni.** Une seule ligne suffit :

```css
:root { --shop-hintergrund: hsl(0 0% 100%); } 
```

**Créer un dégradé.** Définissez `--verlauf-warm` et `--verlauf-kalt` individuellement sur deux couleurs **différentes** et laissez `--shop-hintergrund` inchangé. La boutique fera alors une transition entre les deux points d'extrémité. Exemple :

```css
:root { --verlauf-warm: hsl(27 87% 94%); --verlauf-kalt: hsl(215 100% 94%); } 
```

> **Info sur le choix des couleurs :** Une couleur vive paraît beaucoup plus intense sur une grande surface que sur un bouton. L'arrière-plan standard dépend de `--primary-soft`, donc de la nuance **claire**, et reste ainsi discrète. Vérifiez toujours le résultat avec vos propres couleurs sur la boutique terminée avant de les fixer définitivement.

### L'état de livraison et un contre-exemple

La boutique est livrée en **orange**. À côté, une palette bleue comme exemple de changement — les deux reposent sur **un** angle de couleur :

<table id="bkmrk-variable-orange-%28aus"> <thead> <tr> <th>Variable</th> <th>Orange (livraison)</th> <th>Bleu (exemple)</th> </tr> </thead> <tbody> <tr> <td><code>&#45;&#45;primary</code></td> <td><code>hsl&#40;27 87&#37; 49&#37;&#41;</code></td> <td><code>hsl&#40;215 100&#37; 25&#37;&#41;</code></td> </tr> <tr> <td><code>&#45;&#45;primary&#45;soft</code></td> <td><code>hsl&#40;27 87&#37; 94&#37;&#41;</code></td> <td><code>hsl&#40;215 100&#37; 94&#37;&#41;</code></td> </tr> <tr> <td><code>&#45;&#45;secondary</code></td> <td><code>hsl&#40;36 82&#37; 50&#37;&#41;</code></td> <td><code>hsl&#40;211 100&#37; 40&#37;&#41;</code></td> </tr> <tr> <td><code>&#45;&#45;accent</code></td> <td>comme <code>&#45;&#45;primary</code></td> <td>comme <code>&#45;&#45;primary</code></td> </tr> <tr> <td><code>&#45;&#45;ring</code></td> <td>comme <code>&#45;&#45;primary</code></td> <td>comme <code>&#45;&#45;primary</code></td> </tr> <tr> <td><code>&#45;&#45;shop&#45;hintergrund</code></td> <td><code>var&#40;&#45;&#45;primary&#45;soft&#41;</code></td> <td>librement choisissable</td> </tr> <tr> <td><code>&#45;&#45;verlauf&#45;warm</code>, <code>&#45;&#45;verlauf&#45;kalt</code></td> <td>les deux <code>var&#40;&#45;&#45;shop&#45;hintergrund&#41;</code></td> <td>les deux <code>hsl&#40;0 0&#37; 100&#37;&#41;</code> — blanc, donc pas de dégradé visible</td> </tr> </tbody> </table>

De `--primary` à `--primary-soft`, l'angle de couleur et la saturation restent **identiques** ; seule la **luminosité** change — pour l'orange de 49 à 94 pour cent, pour le bleu de 25 à 94. C'est exactement ainsi que la notation est conçue : une couleur, deux luminosités.

`--secondary` diffère légèrement dans les deux cas — quelques degrés dans l'angle de couleur et un niveau plus clair. Cela suffit pour que les éléments secondaires se détachent, sans introduire une deuxième couleur.

> **Info :** `--accent` et `--ring` reprennent la couleur principale. Qui ne veut pas explicitement une autre couleur n'a pas besoin de les définir. En pratique, il y a donc **trois** valeurs : `--primary`, `--primary-soft` et `--secondary`.

La liste complète des variables se trouve dans la description des performances sur la [Page Paramètres en un coup d'œil](https://wiki.dedesales.de/link/551#bkmrk-css).