Apparence et modèles de widgets

Personnalisez l'apparence des widgets, les modes d'affichage et les options de visibilité, et gérez les modèles HTML/CSS de chaque type de widget.

Tableau de bord → Paramètres → Apparence

Apparence et modèles de widgets

Contrôlez l’apparence et le comportement de chaque widget Umbrella sur votre vitrine. Sélectionnez un type de widget dans la barre latérale, puis configurez-le à l’aide de trois onglets :

  • Paramètres — activer des fonctionnalités, choisir les modes d’affichage, gérer la visibilité
  • Modèle — modifier le HTML et le CSS dans l’éditeur de code
  • Langues — gérer les chaînes de traduction pour la prise en charge multilingue

Types de widgets

Page produit (PDP)

  • Widget PDP — carte principale d’offre de garantie sur les pages produit
  • Widget OEM PDP — informations sur la garantie constructeur
  • Fenêtre de sélection — fenêtre contextuelle de sélection des options de garantie
  • Fenêtre d’information — fenêtre contextuelle présentant le détail de la protection

Panier

  • Panier protégé — carte de statut pour les articles bénéficiant d’une protection de garantie
  • Panier non protégé — carte de vente additionnelle pour les articles sans protection de garantie

Statut de commande

  • Widget de statut de commande — détails de la garantie sur les pages de confirmation et de statut de commande
  • Fenêtre de statut de commande — fenêtre détaillée de la garantie depuis la page de statut de commande

Après-achat

  • Carte après-achat — vente additionnelle de garantie sur les pages de statut de commande pour les produits non couverts
  • Fenêtre après-achat — fenêtre de sélection pour les ventes additionnelles après achat

Protection de livraison

  • Widget Protection de livraison — offre de protection de livraison sur la page panier
  • Fenêtre Protection de livraison — fenêtre d’information sur la protection de livraison

Paramètres du widget PDP

L’offre de garantie principale sur les pages de détail produit. Activez ou désactivez Activer la carte PDP pour l’afficher ou la masquer.

Mode d’affichage

ModeDescription
IntégréLes options de garantie apparaissent directement sur la page sous forme de cartes sélectionnables
FenêtreUn bouton ou une bannière ouvre une fenêtre contenant les options de garantie
IndividuelChaque option de garantie s’affiche dans sa propre carte autonome

Options du mode Intégré uniquement

  • Choix obligatoire — obliger les clients à sélectionner une option de garantie avant d’ajouter au panier
  • Présélectionner la première option — présélectionner le premier plan (les clients peuvent le modifier ou y renoncer)
  • Afficher l’option « Sans couverture » — afficher une option « Non merci » pour refuser explicitement

Options supplémentaires

  • Ouvrir la fenêtre à l’ajout au panier — si aucune garantie n’est sélectionnée, afficher une fenêtre avant l’ajout de l’article
  • Sélecteur d’injection personnalisé — sélecteur CSS qui détermine l’emplacement du widget sur votre page
  • Position d’injection personnalisée — Au-dessus (extérieur), En haut (intérieur), En bas (intérieur) ou En dessous (extérieur)
  • Utiliser un modèle personnalisé — utiliser votre propre HTML/CSS à la place du design par défaut
  • Masquer la marque Umbrella — supprimer le pied de page « Powered by Umbrella »

Paramètres du widget OEM PDP

Affiche les informations de garantie constructeur (OEM) sur les pages produit, séparément des offres d’extension de garantie.

  • Activer le widget OEM — afficher/masquer le widget OEM
  • Masquer les détails de couverture — masquer la description détaillée de la couverture
  • Masquer la durée de garantie — masquer l’affichage de la durée de garantie
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres de la fenêtre de sélection

Fenêtre contextuelle qui affiche les options de garantie. Elle s’ouvre depuis le widget PDP, le panier ou lors de l’ajout au panier.

  • Activer la fenêtre de sélection
  • Mode d’affichage — Intégré (cartes sélectionnables) ou Individuel (cartes autonomes)
  • Choix obligatoire — exiger une sélection avant la fermeture
  • Présélectionner la première option — présélectionner la première option (mode Intégré uniquement)
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres de la fenêtre d’information

Affiche le détail de la protection de garantie lorsque les clients cliquent sur le bouton d’information/de détails.

  • Activer la fenêtre d’information
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres du widget Panier protégé

S’affiche sur les articles du panier qui bénéficient déjà d’une protection de garantie.

  • Activer la carte Panier protégé
  • Afficher le bouton de la fenêtre d’information — permettre aux clients de consulter les détails de la garantie
  • Afficher le bouton Retirer la protection — permettre aux clients de retirer la protection de garantie
  • Masquer la ligne d’extension de garantie dans le panier — n’afficher les détails de la garantie que dans la carte produit
  • Masquer le palier de prix de la ligne d’extension de garantie — masquer le palier de prix sur la ligne de garantie
  • Masquer les détails de la ligne d’extension de garantie — masquer les informations détaillées de garantie sur la ligne
  • Ajouter au total de la ligne protégée — cumuler le prix de la garantie avec le total affiché du produit
  • Désactiver les interactions avec la ligne de garantie — empêcher la modification de la quantité sur la ligne de garantie
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres du widget Panier non protégé

S’affiche sur les articles du panier sans protection de garantie et propose aux clients d’ajouter une couverture.

  • Activer la carte Panier non protégé
  • Mode d’affichage — Fenêtre, Intégré ou Individuel
  • Mode Intégré uniquement : Choix obligatoire, Présélectionner la première option, Afficher l’option « Sans couverture »
  • Afficher le bouton de la fenêtre d’information
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres du widget de statut de commande

Affiche les informations de la police de garantie sur les pages de confirmation et de statut de commande.

  • Activer le widget de statut de commande
  • Masquer le bouton d’information / Masquer le bouton de réclamation / Masquer l’indicateur de statut / Masquer la durée de garantie / Masquer les informations sur le délai de réclamation
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres de la fenêtre de statut de commande

Fenêtre détaillée présentant l’intégralité de la police de garantie, accessible depuis le widget de statut de commande.

  • Activer la fenêtre de statut de commande
  • Masquer l’ID de police / Masquer la date de début / Masquer la date de fin / Masquer le bouton Voir la police / Masquer le bouton Déposer une réclamation
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Paramètres de la carte et de la fenêtre après-achat

Carte après-achat — vente additionnelle de garantie sur les pages de statut de commande pour les produits non couverts. Activez Activer le widget après-achat.

Fenêtre après-achat — fenêtre de sélection qui s’ouvre depuis la carte de vente additionnelle. Activez Activer la fenêtre après-achat.

Les deux prennent en charge Utiliser un modèle personnalisé et Masquer la marque Umbrella.


Paramètres du widget Protection de livraison

Offre de protection de livraison sur la page panier.

  • Activer le widget Protection de livraison
  • Mode d’affichage — Choix par boutons (deux boutons : ajouter/refuser) ou Case à cocher (une seule bascule)
  • Options du mode Choix par boutons : HTML personnalisé du bouton de paiement (prend en charge {{{total}}} et {{{price}}}) et Texte personnalisé « Continuer sans »
  • Utiliser un modèle personnalisé / Masquer la marque Umbrella

Fenêtre Protection de livraison — fenêtre d’information sur la protection de livraison. Activez Activer la fenêtre Protection de livraison.


Éditeur de modèles

Chaque widget dispose de son propre modèle HTML et CSS. Accédez-y via l’onglet Modèle.

  • Éditeur HTML — utilise la syntaxe Handlebars ({{variable}} pour le texte échappé, {{{variable}}} pour le HTML brut). Les variables disponibles sont listées dans le panneau Instructions.
  • Éditeur CSS — styles limités au widget sélectionné pour éviter les conflits avec votre thème.
  • Panneau d’aperçu — rendu en direct avec des données fictives. Basculez entre mode clair et sombre, nombre d’options, état sélectionné et états d’expiration.

Cliquez sur Rétablir le modèle par défaut pour restaurer le modèle d’origine si vos personnalisations posent problème.

Avertissement La réinitialisation d'un modèle est irréversible. Sauvegardez tout code personnalisé que vous souhaitez conserver avant de réinitialiser.

Onglet Langues

Gérez les chaînes de traduction de chaque widget pour prendre en charge les boutiques multilingues. Vous pouvez consulter, ajouter et modifier les clés de traduction pour chaque langue prise en charge.


Voir aussi

Réserver une démo

Découvrez comment myUmbrella peut transformer votre programme de garantie

Choisissez un créneau

Choisissez un créneau qui vous convient pour votre démo personnalisée

ESC

Commencez à taper pour rechercher dans tout le contenu

Aucun résultat

Essayez un autre terme de recherche