ℹ️ Note: Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien.

L'onglet Design vous donne un contrôle complet sur la façon dont la barre d'upsell d'expédition gratuite ressemble et se sent dans votre magasin. Des couleurs et de l'espacement à la typographie, les animations, les boutons et les cartes de vente à la hausse — presque tous les aspects visuels peuvent être personnalisés pour correspondre à votre marque.

Nous avons fourni une large gamme de paramètres afin que vous puissiez:

• Lancement rapide à l'aide de modèles prêts à l'emploi
• Ou personnalisez profondément chaque détail pour correspondre parfaitement à votre vitrine

La plupart des paramètres liés aux couleurs comprennent:

• Un sélectionneur de couleurs
• Une entrée de code Hex

Cela facilite la sélection visuelle ou les couleurs exactes de la marque.

⚠️ Avant de commencer

Pour configurer les paramètres de conception :

→ Ouvrir une configuration d'upsell d'expédition gratuite existante
→ Ou créer une nouvelle configuration d'abord

Alors :

• Pour Sur la base du placement flux de travail

→ Ouvrir la Conception onglet

• Pour Sur la base des objectifs flux de travail

→ Ouvrir l'onglet placement que vous souhaitez personnaliser

ℹ️ Les paramètres de styling sont accessibles différemment selon le type de workflow utilisé.

🎨 Modèle

• Ce qu'il fait: Permet d'appliquer instantanément un style visuel pré-fait à votre barre d'upsell d'expédition gratuite.
• Comment utiliser: Choisissez parmi les modèles disponibles pour démarrer rapidement votre conception sans personnaliser manuellement chaque réglage.

👀 Visibilité

• Ce qu'il fait: Contrôles où apparaît la barre d'expédition gratuite.
• Options:
• • Bureau et mobile – Visible sur tous les appareils.
  • Bureau seulement
  • Mobile seulement

📏 Largeur de la barre

• Ce qu'il fait: Contrôle la largeur horizontale de la barre de livraison gratuite.
• Comment utiliser: Augmenter ou diminuer le pourcentage de largeur selon la façon dont compact ou large vous voulez que la section apparaît.

🖼️ Style de fond

• Ce qu'il fait: Change l'apparence de fond du Free Shipping Upsell Bar.
• Options disponibles :
• • Couleur unique – Appliquer une couleur de fond solide.
  • Gradient – Mélanger deux couleurs en douceur.
  • Modèles – Appliquer des motifs décoratifs.

🎨 Couleur unique

• Choisissez une couleur en utilisant la Récupérateur de couleurs ou entre manuellement Code Hex.

🌈 Gradient

• Degré d'angle progressif : Contrôle la direction de l'effet de gradient.
• Picker couleur 1 & 2: Sélectionnez les deux couleurs utilisées dans le dégradé.

✨ Modèles

• Active la Sélectionner le modèle option où vous pouvez choisir parmi une variété de modèles de fond intégrés.

📐 Frontières et coins

• Rayon frontalier (px): Contrôle l'aspect arrondi des coins de la section.
• Taille de la bordure (px): Ajuste l'épaisseur de la bordure.
• Couleur de bordure & #160;: Modifie la couleur de la bordure à l'aide de la touche de sélection ou de l'entrée hexagonale.

📏 Espacement

Cette section vous aide à contrôler l'espacement à l'intérieur et à l'extérieur de la barre d'upsell d'expédition gratuite.

• En haut / en bas : Ajoute l'espacement à l'extérieur de la section pour le séparer des éléments environnants.
• À l'intérieur du haut / du bas : Ajoute un espacement interne entre le contenu et les bords de la section.

Voici ce que signifie l'espacement extérieur/intérieur :

🎆 Ajouter des feux d'artifice

• Ce qu'il fait: Ajoute un effet d'animation feu d'artifice subtil lorsque les objectifs sont atteints.
• Options:
• • Afficher les feux d'artifice sur réalisation de chaque objectif.
  • Afficher les feux d'artifice seulement sur le but final.

🔤 Typographie

Cette section contrôle comment tous les éléments de texte apparaissent dans la barre d'upsell de livraison gratuite.

📝 Message Styling

• Taille du message : Ajuste la taille du message principal.
• Couleur du message : Modifie la couleur du message affiché au-dessus de la barre de progression.

🎉 Couleur du message du but

• Change la couleur du message de succès affiché après qu'un objectif soit atteint.

🔠 Police

• Choisissez parmi les polices disponibles ou sélectionnez Utiliser la police de votre thème pour correspondre automatiquement à votre thème de magasin.

💪 Poids de la police

• Contrôle comment le texte apparaît en gras ou en lumière.
• Vous pouvez également sélectionner Héritage pour suivre votre thème de poids de police existant.

💰 Style du texte des prix

Personnalisez comment le montant du prix apparaît dans le message.

• Taille: Contrôle la taille de la police du prix surligné.
• Couleur & #160;: Modifie la couleur du texte du prix.

✨ Animation de texte de prix

• Ajoute des effets d'animation au texte de prix pour l'aider à se démarquer davantage.

📊 Barre de progression

Cette section vous permet de personnaliser l'apparence et le comportement de la barre de progression.

👁️ Afficher la barre des progrès

• Basculer la visibilité de la barre de progression en marche ou en marche.

🎨 Couleur de fond

• Modifie la couleur de fond de la barre de progression non remplie.

🟩 Couleur de remplissage

• Contrôle la couleur de la section de progression remplie.

🎯 Marqueur de buts multiples

Choisissez comment plusieurs buts sont affichés dans la barre de progression.

• Montrer un seul but à la fois – Réinitialise la barre après avoir atteint un objectif pour se concentrer sur la suivante.
• Afficher tous les buts à la fois – Affiche toutes les étapes du but ensemble dans la même barre.

Exemple :

📦 Style de barre

• Sélectionnez parmi les styles visuels disponibles pour la barre de progression.

📐 Largeur

• Contrôle la largeur de la barre de progression elle-même.

⭕ Rayon d'angle

• Ajuste la façon dont les angles des barres de progression apparaissent arrondis.

📏 Hauteur

• Contrôle l'épaisseur/hauteur de la barre de progression.

Espace ci-dessus / ci-dessous

• Ajuste l'espacement au-dessus et au-dessous de la barre de progression.

🔘 Conception du bouton

Cette section personnalise le bouton CTA affiché à côté du message d'expédition gratuite.

Remarque: La présente section ne s'applique que lorsque Bouton est sélectionné comme le Appel à l'action dans l'onglet Objectif.

🎨 Couleur du bouton

• Modifie la couleur de fond du bouton CTA.

🔤 Taille et couleur du texte du bouton

• Contrôle la taille et la couleur du texte à l'intérieur du bouton.

⭕ Rayon d'angle

• Ajuste la façon dont les coins des boutons apparaissent.

📦 Style de bouton

• Changez rapidement entre les styles comme:
• • Carré
  • arrondi
  • Complètement arrondi

💪 Poids de la police

• Contrôle l'épaisseur du texte du bouton.

✍️ Style de police

• Entre :
• • Normal
  • italique
  • Sous-ligne

✨ Style d'animation du bouton

• Ajoute des effets d'animation continue au bouton.

🖱️ Effets du bouton Hover

• Ajoute des effets interactifs lorsque les utilisateurs survolent le bouton.

🛍️ Conception de la vente

Cette section personnalise l'apparence de la section Upsell.

Remarque: La présente section s'applique uniquement lorsqu'une option de vente à niveau autre que Pas de vente est sélectionné dans l'onglet Upsell/Placement.

🔤 Typographie

🏷️ Titre de la vente

• Titre Taille: Contrôle la taille du cap Upsell.
• Titre Couleur : Change la couleur du cap Upsell.

📦 Titre du produit

• Taille du titre du produit : Contrôle la taille du nom du produit.
• Titre du produit Couleur: Change la couleur du titre du produit.

💰 Prix

• Taille du prix: Contrôle la taille du texte du prix du produit.
• Couleur du prix: Change la couleur du prix du produit.

➡️ Arrow Styling

• Taille de la flèche & #160;: Contrôle la taille des flèches de navigation.
• Couleur de la flèche & #160;: Change la couleur de la flèche.

🔘 Ajouter au panier Styling bouton

• Couleur du bouton: Change la couleur de fond du bouton.
• Taille et couleur du texte du bouton: Contrôle l'apparence du texte.
• Rayon d'angle : Ajuste la rondeur du bouton.
• Style du bouton : Sélectionnez parmi les styles de boutons disponibles.
• Poids de la police: Contrôle l'épaisseur du texte.
• Style de police & #160;: Basculer entre différents styles de texte.

💻 CSS personnalisé (Pour les développeurs)

💡Fonctionnalité avancée: Si vous voulez ajouter un style complètement unique qui n'est pas disponible dans les paramètres standard, vous pouvez coller votre CSS personnalisé directement dans la boîte d'édition.

• Catégories cibles:
• • Conteneur d'insigne entier : .futureblink-free-shipping
  • Message d'avancement : .futureblink-free-shipping .futureblink-message
  • Icône au-dessus de la barre de progression: .futureblink-free-shipping .futureblink-icon
  • Bouton Appel à l'action : .futureblink-free-shipping .futureblink-cta-button
• Cliquez sur Appliquer pour tester vos styles immédiatement.

«⚠️ Veuillez noter: Si les styles ne sont pas appliqués après avoir cliqué sur Appliquer, veuillez réessayer en ajoutant !important à chaque déclaration.

🎯 Paramètres de l' icône

Ajouter et personnaliser une icône affichée au-dessus de la barre de progression.

🖼️ Sélectionner / supprimer l'icône

• Ouvrez la bibliothèque d'icônes intégrée pour choisir une icône.
• Supprimer l'icône actuellement sélectionnée à tout moment.

📤 Charger l'icône

• Téléchargez votre propre icône personnalisée pour une flexibilité complète.

📏 Taille et couleur de l'icône

• Ajustez la taille de l'icône et changez sa couleur.

🚀 Résultat final

Une fois configuré avec succès, le Conception et style Les cadres aident les marchands à créer une expérience d'achat plus visuelle, professionnelle et axée sur la conversion.

Avec une personnalisation de style appropriée en place:

✅ La barre de livraison gratuite se sent plus alignée avec votre marque de magasin
✅ Les messages importants deviennent plus visibles et plus engageants
✅ Le suivi des progrès se sent plus propre et plus facile à comprendre
✅ Les boutons CTA deviennent plus attrayants visuellement
✅ Les sections d'upsell se mélangent plus naturellement dans la vitrine
✅ Les clients vivent une interface plus polie et interactive
✅ Les commerçants acquièrent un meilleur contrôle sur l'apparence globale et l'expérience utilisateur

L'utilisation efficace de ces options de conception et de coiffage peut grandement améliorer l'engagement des clients, la présentation en vitrine et le potentiel global de conversion ✨

Mis à jour le : 10/09/2026