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 et couleur principale : la couleur d'accentuation d'un configurateur provient de la première de ces sources qui est définie :

1. la Couleur active du composant (paramètres du composant → Design),
2. --configento-color-accent dans votre CSS,
3. la Couleur principale sous Paramètres → Charte graphique – elle s'applique aussi aux PDF et aux e-mails,
4. le bleu par défaut #2563eb.

Pour une couleur unique dans tous les composants, la couleur principale de la charte graphique suffit. La Couleur active n'est utile que si un composant doit s'en écarter ; elle s'applique alors aussi à la place 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). Les étiquettes longues passent à la ligne avec césure, le supplément reste sur une seule ligne. La taille des images se règle avec --cfg-value-image-size.

Champs de saisie et listes de sélection

Image combinée dans la vue 360°

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.

Champs côte à côte

Avec les classes de colonnes, vous placez les caractéristiques d'un groupe côte à côte, par exemple le prénom et le nom sur une même ligne. Saisissez la classe dans l'éditeur, dans le champ Classe CSS de la caractéristique. Aucun CSS personnel n'est nécessaire.

• Les caractéristiques remplissent la ligne dans leur ordre au sein du groupe. Deux caractéristiques consécutives avec cfg-col-6 partagent une ligne.
• Les caractéristiques sans classe de colonne dans le même groupe occupent toute la ligne.
• Si le groupe fait moins de 480 pixels de large, par exemple sur un smartphone, toutes les caractéristiques s'empilent de nouveau.
• Les classes n'agissent que dans les groupes qui en utilisent au moins une. Les groupes sans classe de colonne et les largeurs de votre thème (p. ex. grid12-6 de Magento) restent inchangés.
• Uniquement avec le moteur frontend V3.

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; }

Images plus grandes pour les valeurs et valeurs bloquées plus pâles :

:root { --cfg-value-image-size: 64px; }
[data-configento] .cfg-toggle-item[data-configento-disabled] { opacity: 0.4; }

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