Utilisez ce guide lorsque les thèmes par défaut sont proches, mais pas suffisamment. Chaque exemple ci-dessous vous fournit un ensemble de CSS personnalisé prêt à coller.
Le moyen le plus rapide est de copier l’un des thèmes d’exemple, de le coller dans votre outil de chat IA préféré et de demander des ajustements tels que « Rends-le moins arrondi, la couleur principale doit être violette. »
Premiers pas
- Dans l’administration Shopify, accédez à Boutique en ligne > Thèmes.
- Cliquez sur Personnaliser sur le thème que vous souhaitez modifier.
- Ouvrez un modèle de produit.
- Ajoutez le bloc Sélection de garantie PDP près de votre formulaire produit.
- Sauvegardez vos modifications.
- Prévisualisez la page produit et confirmez que les options de garantie apparaissent à l’endroit attendu.
Meilleure approche de démarrage rapide : choisissez d’abord l’un des thèmes intégrés, puis utilisez des variables CSS personnalisées uniquement si vous souhaitez plus de contrôle.
Référence des paramètres
Thème
Choisissez l’un des préréglages intégrés. Par défaut : Minimal.
- Minimal
- Ambar
- Dark
- Brand Colors
- Mint
- Ocean
- Caramel Latte
- Valentine
- Retro
Brand Colors extrait automatiquement les valeurs de couleur de votre thème Shopify. Il lit les variables du thème telles que --color-accent-1, --color-accent-2, --color-background et --color-foreground. Vous n’avez pas besoin de coller ces valeurs dans les variables CSS personnalisées.
Arrondi
Contrôle le style général des coins du widget. Par défaut : 12px. Ce paramètre alimente automatiquement les valeurs de rayon des cartes, options, couvertures et badges du widget.
Afficher le badge « Le plus populaire »
Affiche ou masque le badge Le plus populaire sur les options déjà marquées comme telles dans vos données de plan de garantie. Par défaut : activé. Si cette option est activée mais qu’aucune option n’est marquée comme la plus populaire, le badge n’apparaîtra pas.
Description de la garantie
Contrôle le texte descriptif affiché sous l’en-tête du widget. Par défaut : Prolongez votre garantie et profitez d’une tranquillité d’esprit avec une couverture complète.
Afficher les avantages
Affiche ou masque la zone des avantages pour chaque option. Par défaut : activé. Lorsqu’il est activé, les clients peuvent voir les détails de couverture des plans sélectionnés.
Titre des avantages
Contrôle le texte d’en-tête affiché au-dessus de la liste des avantages. Par défaut : Ce qui est couvert :.
Style de liste des avantages
Contrôle comment chaque avantage est affiché. Par défaut : Coches.
- Coches
- Points
- Tirets
Afficher le badge « Offre spéciale »
Affiche ou masque le badge supérieur de l’en-tête du widget. Par défaut : activé.
Texte du badge Offre spéciale
Contrôle le texte affiché dans le badge Offre spéciale. Par défaut : Offre spéciale.
Variables CSS personnalisées
Utilisez ce champ pour un style avancé. Saisissez uniquement des déclarations de variables CSS séparées par des points-virgules. Les blocs CSS complets ne sont pas pris en charge.
--cv-primary: #0f766e; --cv-border: #99f6e4; --cv-badge-special-bg: #0f766e;Important :
- Utilisez uniquement des variables
--cv-*dans ce champ. - Ne collez pas de sélecteurs CSS complets ni de blocs de règles.
- Les noms non pris en charge sont ignorés.
Exemples de personnalisations
Chaleur Terracotta
& {
--cv-primary: #c2410c;
--cv-border: #f97316;
--cv-border-muted: #fdba74;
--cv-background: #fffbf5;
--cv-background-gradient: linear-gradient(180deg, #fffbf5 0%, #ffedd5 60%, #fed7aa 100%);
--cv-card-shadow: 0 10px 18px -8px rgb(140 60 10 / 0.18), 0 4px 8px -6px rgb(140 60 10 / 0.1);
--cv-icon: #ea580c;
--cv-text: #431407;
--cv-muted-text: #9a3412;
--cv-option-hover-border: #fb923c;
--cv-option-selected-bg: #ffedd5;
--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 6px 10px -6px rgb(140 60 10 / 0.2);
--cv-option-title: #431407;
--cv-option-title-selected: #c2410c;
--cv-price: #431407;
--cv-price-selected: #ea580c;
--cv-badge-special-bg: #ea580c;
--cv-badge-special-text: #fff7ed;
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #c2410c;
--cv-badge-popular-border: #fdba74;
--cv-coverage-bg: #fed7aa;
--cv-coverage-title: #c2410c;
--cv-coverage-text: #431407;
--cv-coverage-icon: #ea580c;
--cv-footer-text: #9a3412;
--cv-footer-brand: #ea580c;
--cv-radio-accent: #ea580c;
--cv-radius-card: 18px;
--cv-radius-option: 12px;
--cv-radius-badge: 999px;
--cv-radius-coverage: 8px;
}Pop Conversion
& {
--cv-primary: #7c3aed;
--cv-primary-contrast: #ffffff;
--cv-border: #a78bfa;
--cv-border-muted: #c4b5fd;
--cv-background: #faf5ff;
--cv-background-gradient: linear-gradient(160deg, #ede9fe 0%, #ddd6fe 40%, #f5f3ff 95%);
--cv-card-shadow: 0 12px 20px -8px rgb(60 20 120 / 0.22), 0 4px 8px -6px rgb(60 20 120 / 0.12);
--cv-icon: #7c3aed;
--cv-text: #2e1065;
--cv-muted-text: #5b21b6;
--cv-option-hover-border: #a78bfa;
--cv-option-selected-bg: #ede9fe;
--cv-option-selected-shadow: 0 0 0 2px #c4b5fd, 0 6px 10px -6px rgb(60 20 120 / 0.2);
--cv-option-title: #2e1065;
--cv-option-title-selected: #6d28d9;
--cv-price: #2e1065;
--cv-price-selected: #7c3aed;
--cv-badge-special-bg: #6d28d9;
--cv-badge-special-text: #f5f3ff;
--cv-badge-popular-bg: #ede9fe;
--cv-badge-popular-text: #5b21b6;
--cv-badge-popular-border: #c4b5fd;
--cv-coverage-bg: #ddd6fe;
--cv-coverage-title: #2e1065;
--cv-coverage-text: #3b0764;
--cv-coverage-icon: #7c3aed;
--cv-footer-text: #5b21b6;
--cv-footer-brand: #7c3aed;
--cv-radio-accent: #7c3aed;
--cv-radius-card: 0px;
--cv-radius-option: 0px;
--cv-radius-badge: 999px;
--cv-radius-coverage: 0px;
}Minimal / Neutre
Utilisez ceci si vous souhaitez un aspect plus épuré et à faible contraste.
--cv-border: #e5e7eb;
--cv-border-muted: #e5e7eb;
--cv-background: #ffffff;
--cv-background-gradient: #ffffff;
--cv-card-shadow: 0 8px 20px -12px rgb(15 23 42 / 0.2);
--cv-primary: #111111;
--cv-icon: #111111;
--cv-text: #0f172a;
--cv-muted-text: #64748b;
--cv-option-hover-border: #111111;
--cv-option-selected-bg: #f8fafc;
--cv-option-selected-shadow: 0 0 0 1px #e2e8f0, 0 10px 16px -12px rgb(15 23 42 / 0.25);
--cv-option-title: #0f172a;
--cv-option-title-selected: #111111;
--cv-price: #0f172a;
--cv-price-selected: #111111;
--cv-badge-special-bg: #111111;
--cv-badge-special-text: #ffffff;
--cv-coverage-bg: #f3f4f6;
--cv-coverage-title: #111111;
--cv-coverage-text: #111111;
--cv-coverage-icon: #111111;
--cv-footer-text: #475569;
--cv-footer-brand: #111111;
--cv-radio-accent: #111111;Sombre / Contraste élevé
Utilisez ceci si votre boutique utilise un design de page produit sombre.
--cv-border: #374151;
--cv-border-muted: #1f2937;
--cv-background: #0f172a;
--cv-background-gradient: linear-gradient(135deg, #111827 0%, #0f172a 65%);
--cv-card-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.6);
--cv-primary: #fbbf24;
--cv-icon: #fbbf24;
--cv-text: #f9fafb;
--cv-muted-text: #9ca3af;
--cv-option-hover-border: #4b5563;
--cv-option-selected-bg: #1f2937;
--cv-option-selected-shadow: 0 0 0 2px #374151, 0 10px 16px -12px rgb(0 0 0 / 0.7);
--cv-option-title: #f9fafb;
--cv-option-title-selected: #fef3c7;
--cv-price: #f9fafb;
--cv-price-selected: #fbbf24;
--cv-badge-special-bg: #fbbf24;
--cv-badge-special-text: #111827;
--cv-coverage-bg: #111827;
--cv-coverage-title: #e5e7eb;
--cv-coverage-text: #cbd5f5;
--cv-coverage-icon: #fbbf24;
--cv-footer-text: #9ca3af;
--cv-footer-brand: #fbbf24;
--cv-radio-accent: #fbbf24;Aligné sur la marque
Utilisez d’abord le thème Brand Colors, puis ajoutez quelques substitutions si vous souhaitez un accent plus fort ou des coins plus doux.
--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 8px 12px -10px rgb(154 52 18 / 0.2);
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #9a3412;
--cv-badge-popular-border: #fdba74;
--cv-radius-card: 18px;
--cv-radius-option: 14px;
--cv-radius-coverage: 10px;
--cv-radius-badge: 999px;Si vous souhaitez un contrôle total plutôt que des couleurs pilotées par le thème, quittez Brand Colors et définissez directement les valeurs --cv-* pertinentes.
Référence des variables CSS
Palette principale et surface
| Variable | Description |
|---|---|
--cv-primary | Couleur d’accentuation principale pour les états sélectionnés et les mises en évidence |
--cv-primary-contrast | Couleur de contraste associée à la couleur principale. Présente dans le mappage de thème, mais pas encore utilisée directement |
--cv-border | Couleur de bordure pour la carte de garantie externe |
--cv-border-muted | Couleur de bordure par défaut pour les lignes d’options de garantie |
--cv-background | Couleur de fond pour chaque ligne d’option de garantie |
--cv-background-gradient | Arrière-plan ou dégradé pour la carte de garantie principale |
--cv-card-shadow | Ombre autour de la carte de garantie principale |
--cv-icon | Couleur de l’icône du widget près de l’en-tête |
--cv-text | Couleur de texte principale dans tout le widget |
--cv-muted-text | Couleur de texte secondaire pour les descriptions et le contenu atténué |
États des options
| Variable | Description |
|---|---|
--cv-option-hover-border | Couleur de bordure lorsque le client survole une option de garantie |
--cv-option-selected-bg | Couleur de fond pour l’option de garantie sélectionnée |
--cv-option-selected-shadow | Ombre ou contour pour l’option de garantie sélectionnée |
--cv-option-title | Couleur par défaut du titre de l’option de garantie |
--cv-option-title-selected | Couleur du titre pour l’option de garantie sélectionnée |
--cv-price | Couleur de prix par défaut |
--cv-price-selected | Couleur de prix pour l’option de garantie sélectionnée |
--cv-radio-accent | Couleur d’accentuation du bouton radio |
Badges
| Variable | Description |
|---|---|
--cv-badge-special-bg | Couleur de fond pour le badge Offre spéciale supérieur |
--cv-badge-special-text | Couleur du texte pour le badge Offre spéciale supérieur |
--cv-badge-popular-bg | Couleur de fond pour le badge Le plus populaire |
--cv-badge-popular-text | Couleur du texte pour le badge Le plus populaire |
--cv-badge-popular-border | Couleur de bordure pour le badge Le plus populaire |
Section couverture
| Variable | Description |
|---|---|
--cv-coverage-bg | Couleur de fond pour le panneau d’avantages ou de couverture |
--cv-coverage-title | Couleur de l’en-tête des avantages |
--cv-coverage-text | Couleur du texte de la liste des avantages |
--cv-coverage-icon | Couleur des puces, coches ou marqueurs de liste des avantages |
Pied de page
| Variable | Description |
|---|---|
--cv-footer-text | Couleur du texte du pied de page |
--cv-footer-brand | Couleur du texte de marque Coverly dans le pied de page |
Typographie et substitutions avancées
| Variable | Description |
|---|---|
--cv-font-family | Substitution de la famille de polices pour le widget |
--cv-text-color | Substitution de la couleur de texte de niveau supérieur. Peut servir de solution de repli plus large |
Substitutions de rayon
| Variable | Description |
|---|---|
--cv-radius-card | Rayon des coins pour la carte de garantie externe |
--cv-radius-option | Rayon des coins pour chaque ligne d’option de garantie |
--cv-radius-coverage | Rayon des coins pour le panneau d’avantages ou de couverture |
--cv-radius-badge | Rayon des coins pour les badges |
Remarques
--cv-radiusest défini en interne à partir du paramètre Arrondi, mais les styles actuels du widget utilisent les variables de rayon plus spécifiques listées ci-dessus.--cv-primary-contrastexiste dans le mappage de thème, mais il ne modifie pas actuellement les styles visuels du widget par lui-même.
Dépannage
Mes modifications ne s’appliquent pas
Vérifiez d’abord ces points :
- Confirmez que vous avez collé les valeurs dans Variables CSS personnalisées.
- Confirmez que chaque entrée commence par
--cv-. - Confirmez que les déclarations sont séparées par des points-virgules.
- Supprimez tous les sélecteurs tels que
.class { ... }— le champ accepte uniquement des variables.
Le badge Le plus populaire n’apparaît pas
Les deux conditions doivent être vraies :
- Afficher le badge « Le plus populaire » est activé.
- Au moins une option de garantie est marquée comme
most_populardans vos données de plan de garantie.
Les avantages n’apparaissent pas
Vérifiez d’abord ces points :
- Afficher les avantages est activé.
- L’option de garantie sélectionnée inclut des données d’avantages.
- Titre des avantages et Style de liste des avantages sont configurés comme prévu.
Le thème Brand Colors ne semble pas différent
Le préréglage Brand Colors dépend des variables de couleur déjà disponibles dans votre thème Shopify. Si votre thème n’expose pas de valeurs fortes pour ces couleurs, le widget peut ressembler à un style neutre. Essayez :
- Passer à un autre thème intégré.
- Ajouter des substitutions explicites
--cv-*dans les variables CSS personnalisées.
Les modifications d’arrondi sont trop subtiles
L’arrondi met à jour plusieurs valeurs de rayon internes à la fois. Si vous souhaitez plus de contrôle, substituez --cv-radius-card, --cv-radius-option, --cv-radius-coverage et --cv-radius-badge individuellement.
Commencez avec un préréglage de thème intégré, puis superposez des variables CSS personnalisées uniquement là où c’est nécessaire. Cela offre la configuration la plus rapide et la maintenance la plus facile.