Personnaliser le design (CSS)

Le configurateur doit ressembler à votre boutique : couleurs, police, coins, aspect des champs de sélection. Vous adaptez tout cela avec du CSS, sans aucun JavaScript. Cette page s'applique au moteur frontend V3. Legacy génère un HTML différent : les variables et classes ci-dessous n'y ont aucun effet.

Ce que le configurateur reprend déjà de la boutique

Dans une boutique – via un plugin de boutique ou l'extrait HTML – le configurateur reprend la police, la taille de police et la couleur du texte de votre thème. Vous n'avez rien à faire pour cela. Vous n'adaptez que ce que le configurateur apporte lui-même : couleur d'accentuation, bordures, arrière-plans, coins.

Si vous l'intégrez avec data-configento-embed-mode="admin-preview", il affiche lui-même le titre, le prix et le récapitulatif et utilise aussi ses propres couleurs pour les textes. Même dans ce cas, il hérite la police de la page.

Où placer votre CSS

Vous avez deux emplacements :

• Le thème de votre boutique – le bon choix si tous les configurateurs doivent avoir le même aspect.
• CSS personnalisé dans les Paramètres du composant, section Design – le bon choix pour un seul composant. Il est chargé avec le configurateur, dans la boutique et dans l'aperçu de l'admin.

Placez [data-configento] devant les règles pour des éléments individuels, p. ex. [data-configento] .cfg-toggle-item__price. Le configurateur charge son propre CSS après votre thème ; grâce à ce préfixe, votre règle l'emporte quand même. Ce n'est pas nécessaire pour les variables ci-dessous.

Couleurs, police et coins

L'adaptation la plus simple : définir des variables sur :root. Elles agissent dans tout le configurateur, ainsi que dans la vue agrandie des images et dans les fenêtres d'information, qui s'ouvrent en dehors du configurateur.

:root {
  --configento-color-accent: #1d3c78;
  --configento-color-border: #c8d0e0;
  --configento-radius-md: 0;
}

Les noms de ces variables restent identiques dans toutes les versions 3.x.

Couleur active : si une Couleur active est définie dans les paramètres du composant, section Design, elle s'applique à ce composant à la place de --configento-color-accent. Laissez le champ vide si la couleur doit venir de votre CSS.

Autre police : si le configurateur doit utiliser une autre police que la page, définissez-la sur l'élément portant data-configento. La police doit être chargée sur la page, par exemple via votre thème.

[data-configento] { font-family: 'Source Sans 3', sans-serif; }

Mettre en forme des éléments individuels

Pour aller au-delà des variables, il existe des classes et des attributs que nous garantissons : ils restent identiques dans toutes les versions 3.x et ne changent qu'avec un nouveau premier chiffre de version. Les autres classes et le reste de la structure HTML peuvent changer.

Cadre de chaque caractéristique

Boutons radio et cases à cocher

L'état sélectionné s'atteint via l'input, p. ex. .cfg-toggle-item__label:has(input:checked).

Champs de saisie et listes de sélection

Si le CSS ne suffit pas parce qu'une caractéristique doit avoir un aspect et un comportement tout autres – par exemple comme une plaque d'immatriculation –, vous la dessinez en JavaScript avec un rendu personnalisé.

Le plus simple pour cibler une caractéristique précise est une classe propre : saisissez-la dans l'éditeur, dans le champ Classe CSS de la caractéristique ; elle se retrouve sur l'élément .cfg-char.

Exemples

Boutons radio personnalisés – cercle en CSS au lieu du style par défaut du navigateur, ligne choisie mise en évidence :

[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--configento-color-accent);
  border-radius: 50%;
}
[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input:checked {
  background: radial-gradient(var(--configento-color-accent) 45%, transparent 50%);
}
[data-configento] .cfg-toggle-item__label:has(input:checked) {
  background: var(--configento-color-accent-soft);
}

Pour cela, définissez --configento-color-accent et --configento-color-accent-soft sur :root, comme indiqué plus haut.

Afficher les erreurs plus clairement :

[data-configento] .cfg-char[data-configento-invalid] .cfg-char__title { color: var(--configento-color-error); }
[data-configento] .cfg-char[data-configento-invalid] .cfg-input { border-color: var(--configento-color-error); }

Masquer les suppléments, par exemple si votre boutique les affiche autrement :

[data-configento] .cfg-toggle-item__price { display: none; }

Dépannage

Étapes suivantes

• Paramètres du composant – Couleur active et CSS personnalisé
• Intégration extrait HTML
• Interface JavaScript (V3) – si vous voulez intervenir au-delà de l'aspect visuel
• Moteur frontend : Legacy ou V3