Aller au contenu principal

Générateur d'Affichage : Concevez Votre Widget de Date de Livraison

Le Générateur d'Affichage est l'endroit où vous décidez exactement comment les informations de livraison s'affichent pour vos clients. D'un compte à rebours dynamique à une simple ligne de date sobre et minimaliste — vous contrôlez l'apparence, le style et le contenu de chaque widget qui s'affiche sur vos pages produit et panier.

Ce qui rend cette section particulièrement puissante, c'est l'Aperçu en Direct : chaque modification que vous apportez met à jour l'aperçu en haut de la page en temps réel. Vous voyez le résultat immédiatement, sans enregistrer ni actualiser. Vous pouvez donc expérimenter librement jusqu'à ce que le widget corresponde exactement à votre boutique.

Pour ouvrir le Générateur d'Affichage, rendez-vous dans Back Office → Modules → Estimated Delivery → Design.

L'onglet Design avec l'Aperçu en Direct et le sélecteur de Style d'Affichage

Premiers Pas avec l'Aperçu en Direct​

L'Aperçu en Direct se trouve en haut de l'onglet Design et sert de canevas. Il affiche une simulation réaliste du widget tel qu'il apparaîtra dans votre boutique, selon vos paramètres actuels.

Chaque modification que vous apportez dans la barre latérale gauche — style d'affichage, couleurs, bordure, icône, format de texte — se reflète dans l'aperçu dès que vous l'ajustez. Vous n'avez pas besoin d'enregistrer pour voir le résultat.

Cela fait du Générateur d'Affichage un outil idéal pour itérer rapidement. Vous pouvez commencer avec un preset proche de ce que vous souhaitez, ajuster la couleur de la bordure, modifier l'espacement, et regarder l'aperçu évoluer vers exactement le style qu'il vous faut. Lorsque vous êtes satisfait du résultat, cliquez sur Enregistrer pour appliquer la configuration.

Choisir un Style d'Affichage​

Le sélecteur de Style d'Affichage est la décision la plus importante que vous prendrez dans cette section. Il détermine quelles informations sont affichées dans le widget et comment elles sont structurées. Six modes sont disponibles.

Tous les Transporteurs​

Ce mode liste tous les transporteurs disponibles pour le produit en cours, chacun avec sa propre date de livraison estimée. Les clients peuvent voir d'un coup d'œil quels transporteurs sont plus rapides et ce que chaque option coûte.

C'est le bon choix lorsque vous proposez plusieurs méthodes d'expédition et souhaitez offrir une transparence totale à vos clients. Il fonctionne particulièrement bien pour les boutiques où la rapidité de livraison est un facteur décisif — électronique, cadeaux, commandes de dernière minute.

Compte à Rebours​

Le mode Compte à Rebours affiche une minuterie qui décompte jusqu'à l'heure limite de commande — le moment à partir duquel les commandes passées aujourd'hui seront expédiées demain.

Cela crée une sensation naturelle d'urgence sans recourir à des artifices. Lorsqu'un client voit "Commandez dans 2h 14m pour une livraison jeudi", il comprend exactement ce qui est en jeu. Utilisez ce mode lorsque vous avez une heure limite journalière clairement définie et souhaitez encourager des décisions plus rapides.

Heure Limite de Préparation​

Similaire au Compte à Rebours, mais au lieu d'afficher l'heure limite d'expédition, ce mode indique aux clients quand leur commande sera préparée en entrepôt. Il est plus orienté vers l'interne — utile si votre entrepôt a un planning de préparation qui affecte les délais de livraison et que vous souhaitez être transparent à ce sujet.

Jour d'Expédition​

Ce mode affiche le jour spécifique où la commande devrait être expédiée, plutôt que la date de livraison. Il convient aux boutiques dont les clients se soucient davantage du moment où le colis quitte l'entrepôt — par exemple lorsqu'ils doivent coordonner avec un chantier ou un lieu de livraison.

Double Affichage​

Le Double Affichage présente deux lignes d'informations de livraison côte à côte. Cela est utile lorsque vous souhaitez mettre en avant, par exemple, à la fois la date de livraison prévue et le transporteur, ou afficher deux transporteurs différents de façon proéminente.

Personnalisé​

Le mode Personnalisé vous donne un contrôle total sur le message du widget en vous permettant d'écrire votre propre modèle avec des variables. Vous pouvez composer n'importe quel message combinant noms de transporteur, dates, prix et conditions contextuelles.

C'est l'option la plus flexible, celle à utiliser lorsque les modes intégrés ne correspondent pas exactement à ce que vous souhaitez dire. Par exemple : "Livraison gratuite avec DHL — arrivée avant le {date}", ou un message qui change selon la disponibilité du stock.

Pour une explication complète de la rédaction de modèles personnalisés, consultez le guide Modèles de Message.

Démarrage Rapide : Presets de Design​

Si vous ne savez pas par où commencer visuellement, la section Apparence propose 22 presets de design en un clic. Chaque preset applique une configuration visuelle complète — bordure, style des coins, ombre, espacement, couleur de fond — en un seul clic.

Presets de design dans la section Apparence

Les presets disponibles sont :

Modern Card · Classic · Bold Green · Minimal · Subtle · Airy · Floating · Elegant · Fresh · Compact Pro · Pill Badge · Dashed · Warm · Left Accent · Top Bar · Urgent · Highlight · Statement · Double Line · Outlined · Dark Mode · Navy Accent

L'Aperçu en Direct se met à jour dès que vous cliquez sur un preset, vous pouvez donc les parcourir rapidement et voir lequel se rapproche le plus du style de votre boutique. Une fois que vous avez trouvé un bon point de départ, vous pouvez modifier des paramètres individuels — couleurs, coins, espacement — sans toucher au reste.

Une note sur les presets et les couleurs personnalisées : sélectionner un preset écrase tous les paramètres d'apparence, y compris les couleurs personnalisées que vous avez saisies. Si vous souhaitez utiliser un preset comme base tout en conservant vos couleurs de marque, appliquez d'abord le preset, puis saisissez vos valeurs de couleurs personnalisées par la suite.

Personnaliser l'Apparence​

Une fois que vous avez choisi un preset (ou si vous préférez partir de zéro), la section Apparence vous permet d'affiner chaque détail visuel.

Bordure​

La bordure donne au widget un contour défini qui l'aide à se démarquer du reste de la page produit. Vous pouvez choisir le style de bordure (Aucune, Simple, Pointillée ou Double), son épaisseur (Fine, Normale ou Épaisse) et les côtés sur lesquels elle apparaît (Tous les côtés, Gauche uniquement, Haut uniquement, ou Haut et Bas).

Une bordure sur le côté gauche uniquement est un choix populaire — elle donne au widget une mise en valeur subtile qui semble moderne sans dominer la page. Une bordure pointillée peut apporter une touche plus douce et informelle.

Coins​

L'arrondi des coins contrôle l'aspect anguleux ou lissé des bords du widget. Les coins nets donnent un aspect structuré et précis. Les coins doux sont plus accueillants. Les coins ronds donnent un aspect de carte. Les coins en pilule font ressembler le widget à un badge — accrocheur et compact.

Adaptez cela à l'esthétique générale de votre thème. Si vos boutons et vos fiches produit ont des coins arrondis, harmoniser le widget avec eux crée une cohérence visuelle.

Ombre​

Une ombre soulève légèrement le widget de la page, lui donnant une profondeur de type carte. Aucune le maintient plat. Légère ajoute la plus infime suggestion de profondeur. Élevée donne un effet clairement surélevé. Flottante crée une ombre portée forte qui fait ressortir le widget.

Utilisez les ombres avec parcimonie — elles fonctionnent mieux lorsque le reste de votre page produit est relativement plat.

Espacement et Taille du Texte​

L'espacement contrôle le rembourrage interne du widget. Serré (4px / 8px) convient aux mises en page compactes. Confortable (8px / 14px) convient à la plupart des boutiques. Spacieux (14px / 20px) donne de l'air au widget et lui confère un aspect premium.

La taille du texte est séparée : Petit (12px) pour les designs minimalistes, Moyen (14px) par défaut, Grand (16px) lorsque vous souhaitez que la date de livraison soit l'élément le plus proéminent de la page produit.

Marge​

La marge contrôle l'espace entre le widget et les éléments qui l'entourent — généralement le bouton Ajouter au panier et la description du produit. Normale (10px en haut et en bas) est une valeur par défaut fiable. Généreuse (20px) donne plus de visibilité au widget. Nulle (0) supprime l'écart entièrement, utile lorsque votre thème gère déjà l'espacement.

Couleurs et Mise en Forme du Texte​

La section Couleurs & Format vous permet de définir une couleur personnalisée et un style de texte pour chacun des quatre éléments qui peuvent apparaître dans le widget.

Section Couleurs & Format

Les quatre éléments sont :

  • Dates de livraison — la date d'arrivée estimée ou la plage de dates
  • Compte à rebours — le décompte affiché en mode Compte à Rebours
  • Nom du transporteur — le nom du transporteur
  • Prix du transporteur — le coût d'expédition associé au transporteur

Pour chaque élément, vous pouvez définir :

Couleur — une valeur de couleur hexadécimale. Elle remplace la couleur de texte par défaut du widget pour cet élément uniquement. Utile pour attirer l'attention sur la date de livraison (votre message principal) tout en gardant le nom et le prix du transporteur dans un ton plus neutre.

Mise en forme du texte — Gras, Italique et Souligné, dans n'importe quelle combinaison. Ces options utilisent un masque de bits en interne : Gras = 1, Italique = 2, Souligné = 4. En pratique, vous les définissez via des cases à cocher dans l'interface — les chiffres ne sont que la façon dont le module stocke vos choix en coulisses. Vous pouvez les combiner librement : Gras + Italique donne par exemple une forte emphase à la date.

Une approche courante consiste à mettre la date de livraison en Gras et à lui donner la couleur d'accent de votre marque, tout en laissant le nom du transporteur dans le style par défaut. Cela attire d'abord l'œil du client sur l'information la plus importante.

Positionnement​

La section Positionnement contrôle l'endroit de la page produit où le widget apparaît. Les options incluent généralement au-dessus du bouton Ajouter au panier, en dessous, ou dans une position de hook spécifique définie par votre thème.

Choisissez le positionnement en fonction du flux de lecture naturel de vos clients. La plupart des boutiques constatent que placer le widget directement au-dessus ou en dessous du bouton Ajouter au panier fonctionne le mieux — il apparaît au moment où le client décide d'acheter, ce qui est exactement le moment où les informations de livraison sont les plus convaincantes.

CSS Personnalisé​

Le champ CSS Personnalisé en bas de la barre latérale est destiné aux utilisateurs avancés qui ont besoin d'un contrôle allant au-delà des paramètres visuels. Tout ce que vous saisissez ici est injecté dans la page aux côtés du widget, limité au conteneur du widget.

Vous pouvez l'utiliser pour appliquer des styles qui correspondent à des thèmes très personnalisés, ajuster le widget pour des points de rupture spécifiques, ou remplacer un détail de preset qui n'a pas de paramètre dédié.

Si vous maîtrisez le CSS, ce champ vous offre une liberté totale. Sinon, les paramètres visuels seuls couvriront les besoins de la grande majorité des boutiques.

Conseils pour un Rendu Professionnel​

Obtenir un widget qui semble natif à votre boutique — plutôt que rapporté — repose sur quelques choix cohérents.

Harmonisez le style des coins avec votre thème. Si vos boutons ont des coins arrondis, donnez également des coins arrondis au widget. La cohérence des formes crée un langage de design cohérent sur toute la page.

Utilisez la couleur d'accent de votre marque pour la date. La date de livraison est l'information la plus importante du widget. La mettre dans la couleur principale ou d'accent de votre boutique la rend intentionnelle plutôt que générique.

Gardez un espacement généreux. Un widget à l'étroit donne l'impression d'être une réflexion après coup. Un espacement Confortable ou Spacieux, combiné à une marge Normale ou Généreuse, donne au widget de l'air et lui permet d'être une vraie partie de la page.

Commencez avec un preset, puis ajustez. Même si aucun preset n'est parfait, ils offrent tous une bonne base visuelle. Il est plus rapide de partir de Minimal ou Subtle et de changer une ou deux choses que de construire depuis zéro.

Vérifiez sur un vrai produit. L'Aperçu en Direct montre le widget de façon isolée. Une fois satisfait, consultez une vraie page produit dans votre boutique pour voir comment il s'intègre aux images produit, à la description et aux boutons.

Foire Aux Questions​

L'Aperçu en Direct ne se met pas à jour quand je modifie les paramètres. Que faire ?

Essayez d'actualiser la page de l'onglet Design. Si l'aperçu ne se met toujours pas à jour, vérifiez que JavaScript est activé dans votre navigateur et qu'aucune extension ne bloque les scripts sur les pages du Back Office. L'Aperçu en Direct repose sur un petit écouteur JavaScript qui surveille les modifications de paramètres.

J'ai appliqué un preset et mes couleurs personnalisées ont disparu. Puis-je les récupérer ?

Les presets écrasent tous les paramètres d'apparence, y compris les couleurs personnalisées. Si vous avez appliqué un preset par erreur, vous pouvez ressaisir vos valeurs de couleurs dans la section Couleurs & Format sans avoir besoin d'annuler tout le preset. À l'avenir, appliquez toujours le preset en premier, puis définissez vos couleurs personnalisées.

Puis-je afficher un style de widget différent sur la page panier et sur la page produit ?

Le Générateur d'Affichage applique une configuration globale unique qui couvre tous les emplacements — page produit, page panier, et tout autre endroit où le widget apparaît. Si vous avez besoin d'un contenu significativement différent par type de page, le style d'affichage Personnalisé avec des modèles de message vous offre le plus de flexibilité grâce aux blocs conditionnels.

Que signifie le nombre de masque de bits dans la section Couleurs & Format ?

Le masque de bits est simplement la façon dont le module stocke vos choix de mise en forme de texte en coulisses. Vous n'avez pas besoin de saisir des chiffres — l'interface affiche des cases à cocher pour Gras, Italique et Souligné. Lorsque vous cochez plusieurs cases, le module additionne leurs valeurs (Gras = 1, Italique = 2, Souligné = 4). Par exemple, Gras + Italique est stocké comme 3. Cela n'est pertinent que si vous lisez des fichiers d'export de configuration ou définissez des valeurs via l'API.

Le Générateur d'Affichage affecte-t-il l'apparence des dates de livraison dans les e-mails de confirmation de commande ?

Non. Le Générateur d'Affichage contrôle uniquement le widget front-office sur les pages produit et panier. La mise en forme des dates de livraison dans les e-mails est configurée séparément via les paramètres des Variables E-mail.

Puis-je définir des styles de widget différents par transporteur ?

Le Générateur d'Affichage applique un style global unique à tous les transporteurs affichés dans le widget. Pour différencier les transporteurs visuellement ou textuellement, utilisez le style d'affichage Personnalisé avec des modèles de message, où vous pouvez écrire du contenu conditionnel basé sur le nom du transporteur ou d'autres variables.

En Lien​