Skip to main content

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.

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

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 :

--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 :

: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 :

: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 :

Variable Orange (livraison) Bleu (exemple)
--primary hsl(27 87% 49%) hsl(215 100% 25%)
--primary-soft hsl(27 87% 94%) hsl(215 100% 94%)
--secondary hsl(36 82% 50%) hsl(211 100% 40%)
--accent comme --primary comme --primary
--ring comme --primary comme --primary
--shop-hintergrund var(--primary-soft) librement choisissable
--verlauf-warm, --verlauf-kalt les deux var(--shop-hintergrund) les deux hsl(0 0% 100%) — blanc, donc pas de dégradé visible

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.