ℹ️ 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 votre Hoppy Bundles offre look et feel sur votre devant de magasin. Des polices et couleurs aux bordures, boutons, niveaux et cartes de produits – presque tous les aspects visuels de votre offre peuvent être personnalisés pour correspondre à votre marque.

Nous avons fourni un large éventail de paramètres afin que vous puissiez:

• Lancement rapide en utilisant des modèles et des thèmes 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 Picteur de Couleur (cliquez sur la montre couleur pour l'ouvrir)
• Une entrée de code Hex (typez votre couleur de marque exacte directement)

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 offre existante → Ou créer une nouvelle offre d'abord

Alors ouvrez le Conception onglet dans l'éditeur d'offre.

L'onglet Design est disponible pour tous les types d'offres Hoppy Bundles:

• Offre groupée
• Quantité Pause (Réduction sur le volume)
• Construisez votre propre bloc (BYOB)
• Additifs de produits
• Slider Upsell
• Catégorie Quantité Pause

ℹ️ L'onglet Design semble légèrement différent selon le type d'offre — ce guide couvre chaque section et souligne les différences au fur et à mesure.

👀 Comprendre l'onglet Design

📍 Où il vit

Ouvrez n'importe quelle offre et vous verrez des onglets en haut de l'éditeur — pour la plupart des types d'offres ce sont Généralités, Conceptionet Ciblage et placement. Cliquez sur Conception pour ouvrir les réglages de style.

• Pour BYOB offres, les onglets sont Généralités, Logique de sélection des produitset Conception.

🖥️ Aperçu en direct

Chaque éditeur d'offre comprend un panneau d'aperçu en direct à côté des paramètres, montrant à la fois un Aperçu du bureau et a Aperçu mobile. Comme vous changez n'importe quel paramètre de conception — une couleur, une police, une bordure — les mises à jour de prévisualisation instantanément, de sorte que vous savez toujours exactement comment votre widget va regarder avant d'enregistrer.

ℹ️ L'aperçu montre vos changements de style avec des exemples de produits. Vérifiez toujours le look final de votre boutique en direct après publication.

🎨 Modèles et thèmes (Quantité Break)

Quantité Les offres Break sont livrées avec des styles visuels prêts à l'emploi afin que vous n'ayez pas à concevoir à partir de zéro.

🖼️ Modèles d'offre

• Ce qu'il fait: Lorsque vous créez une nouvelle offre Quantité Break, vous commencez par choisir un modèle d'offre prêt à l'emploi sous Sélectionnez votre offre préférée. Chaque modèle est livré avec son propre design pré-style (couleurs, tailles et styles) que vous pouvez personnaliser entièrement après.
• Modèles disponibles :
• • Ensemble & Enregistrer – applique une vert thème couleur.
  • Offre à durée limitée – applique une chaleur orange thème couleur.
  • Vente Flash Madness ! – applique un gras rose thème couleur.
  • Ouais ! C'est BOGO ! – applique une dynamique violet thème couleur.
• Comment utiliser: Sélectionnez un modèle et cliquez Appliquer le modèle sélectionné. La conception du modèle se charge dans l'éditeur, et vous pouvez modifier tout à partir de là.

📐 Présentation du modèle

• Ce qu'il fait: Contrôle la façon dont les niveaux de quantité sont disposés à l'intérieur du widget.
• Options:
• • Vertical – les niveaux sont empilés les uns sur les autres.
  • Horizontale – les niveaux sont côte à côte.

🎨 Choisir un thème

• Ce qu'il fait: Permet de changer le thème entier de la couleur du widget en un seul clic.
• Options: Bleu, _Rouge_ou Vert.
• Remarque: Cette option n'apparaît que lorsque Vertical La mise en page du modèle est sélectionnée.

⚠️ Choisir un thème remplace Tous de vos paramètres de conception actuels (couleurs, tailles, styles) avec les valeurs prédéfinies du thème. Si vous avez personnalisé des paramètres individuels, appliquez votre thème d'abord et peaufinez ensuite.

🔤 Typographie et couleur

C'est la carte design principale, disponible dans l'onglet Design de chaque type d'offre. Il s'effondre — cliquez sur la flèche dans le coin supérieur droit pour l'agrandir ou l'effondrer.

🔠 Police

• Ce qu'il fait: Définit la famille de polices utilisée dans tout le widget de l'offre.
• Comment utiliser: Choisissez parmi 60 polices intégrées — y compris des classiques comme Helvetica, Arial, Georgia et Impact, ainsi que des polices populaires comme Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display, et bien d'autres.
• Par défaut & #160;: Sélectionner Utiliser la police de votre thème hériter automatiquement de la police de votre thème de magasin — la façon la plus simple de faire fondre le widget dans votre magasin.

ℹ️ Les polices Google sont chargées automatiquement sur le front de magasin lorsque sélectionné — pas de configuration manuelle nécessaire.

📝 Style de texte (taille / style / couleur)

En dessous de la police, chaque élément texte du widget obtient son propre bloc de style. Chaque bloc comporte trois paramètres :

• Taille (px): Contrôle la taille de la police de cet élément.
• Style : Contrôle le poids et l'importance du texte. Options:
• • Lumière
  • Régulière
  • italique
  • Moyenne
  • Italique moyen
  • Semibold
  • Poêle
  • Italique gras
• Couleur & #160;: Modifie la couleur du texte à l'aide du sélectionneur de couleurs ou de l'entrée hexagonale.

⚠️ La taille ne peut pas être supérieure à 20px — si vous entrez une valeur plus grande, vous verrez une erreur de validation.

Les éléments disponibles dépendent du type d'offre:

📦 Offre de groupe et additifs de produit:

• Titre du groupe – le titre principal du widget.
• Nom du produit – les titres de produit à l'intérieur du paquet.
• Prix du produit – le prix indiqué pour chaque produit.
• Étiquette en évidence – le texte du badge (par exemple "Combo") sur les produits surlignés.
• Pied de page – le texte au bas du widget.
• Prix total – le prix du forfait combiné.
• Bouton – le texte du bouton "Ajouter au panier".

🏷️ Quantité Break :

• Titre du bloc – le cap principal au-dessus des niveaux.
• Titre de l'offre – le titre de chaque niveau (par exemple « 2 paires »).
• Étiquette de réduction – le texte de réduction sur chaque niveau (par exemple "Acheter 2 Get 1").
• Prix – le prix réduit.
• Comparer le prix – le prix d'origine percuté.
• Balise – le texte du badge sur un niveau (p. ex.
• Sous-titre – le texte du sous-titre sur un niveau.
• Étiquette cadeau / Prix cadeau / Couleur de l'étiquette cadeau – le texte utilisé pour les articles cadeaux gratuits (lorsqu'un cadeau gratuit est configuré).
• Pied de page – le texte du pied de page sous les niveaux.
• Étiquette en évidence – le texte mis en surbrillance.
• Bouton – le texte du bouton.
• Prix total – l'affichage du prix total.

🧺 Construisez votre propre bloc (BYOB):

• Titre du bloc – l'en-tête de la page.
• Désignation des marchandises – le texte de description sous le titre.
• Titre de l'offre – les noms de produits dans le paquet.
• Prix – les prix des produits.
• Texte à barres collantes – le message de progression dans la barre collante (par exemple "Besoin d'au moins 3 de ce groupe").
• Bouton – le texte principal du bouton "Ajouter un ensemble au panier".
• Bouton produit – le bouton "Ajouter" sur chaque carte produit.
• Prix total – le total du paquet de course.

🛍️ Slider Upsell :

• Titre du bloc – le titre du curseur (par exemple «Fréquentement achetés ensemble»).
• Titre du produit – les noms de produits dans le curseur.
• Prix – les prix des produits.
• Bouton – le texte du bouton "Ajouter au panier".

🗂️ Catégorie Quantité Pause :

• Mêmes éléments de texte que Quantité Break (titre de bloc, titre de l'offre, étiquette de réduction, prix, étiquette, sous-titre, pied de page, bouton, prix total), sans le cadeau et comparer-prix options de style.

🌈 Couleurs du widget (Quantité Break & Catégorie Quantité Break)

Cette section contrôle l'arrière-plan et met en évidence les couleurs des barres de niveau. Chaque option est un sélectionneur de couleur unique avec une entrée hexagonale.

• Couleur de la bordure & #160;: La couleur de bordure du niveau actuellement sélectionné — fait le choix actif se démarquer.
• Couleur de fond & #160;: La couleur de fond du niveau sélectionné.
• Barre non sélective : La couleur de fond de tous les niveaux non sélectionnés.
• Couleur de fond de l'étiquette & #160;: Le fond derrière le label de réduction sur chaque niveau.
• Couleur de fond de l'étiquette : L'arrière-plan du badge (p. ex. « Plus populaire »).
• Couleur de fond du cadeau : Le fond des lignes cadeaux gratuites (Quantity Break seulement).
• Cadeau Couleur de fond de l'étiquette : Le fond de la balise cadeau gratuite (Quantity Break seulement).

💡 Conseil : Utilisez un contraste subtil entre les arrière-plans de barre sélectionnés et non sélectionnés — cela aide les acheteurs à voir instantanément quel niveau ils ont choisi.

📏 Taille de la variante (quantité)

• Ce qu'il fait: Contrôle la taille du sélecteur de variante affiché sur chaque niveau lorsque le produit a des variantes.
• Options: Petites, _Moyenne_ou Grandes — cliquez simplement sur un badge pour le sélectionner.

📐 Frontière

Disponible dans l'onglet Design de chaque type d'offre.

• Largeur de bordure (0–10px): Ajuste l'épaisseur de la bordure autour du widget (et les barres de niveau pour Quantité Break). Réglez-le à 0 pour un look plat sans bordure.
• Rayon frontalier (0–50px): Contrôle l'aspect arrondi des coins. Les valeurs inférieures donnent un aspect net et moderne; les valeurs supérieures donnent un aspect doux et arrondi.

🖌️ Couleurs de fond et de bordure (cartes, pied de page, étiquettes et boutons)

Disponible pour Offre groupée, Additifs de produits, Slider Upsellet BYOB. Ces blocs vous permettent de mettre les deux Couleur de la bordure et a Couleur de fond pour les blocs visuels clés du widget.

📦 Offre de groupe et additifs de produit:

• Produit – les cartes produit à l'intérieur du paquet.
• Pied de page – la zone de pied au bas du widget.
• Étiquette en évidence – le badge en surbrillance.
• Bouton – le bouton "Ajouter au panier".

🛍️ Slider Upsell :

• Produit – les cartes produit dans le curseur.
• Bouton – le bouton "Ajouter au panier".

🧺 BYOB :

• Bouton – le bouton principal "Ajouter le paquet au panier".
• Bouton produit – le bouton "Ajouter" sur chaque carte produit.

💡 Conseil : Pour les boutons, définissez la couleur d'arrière-plan à la couleur principale de votre marque et correspondez à la couleur de bordure pour un bouton propre et solide.

⚙️ Toggles d'apparence (Quantité Break – Onglet général)

Quelques options visuelles pour Quantité Break Généralités onglet sous Paramètres → Apparence et looks plutôt que l'onglet Conception:

• Afficher le prix unitaire: Affiche le prix unitaire à l'intérieur de chaque niveau, de sorte que les clients peuvent voir exactement ce que chaque article coûte.
• Afficher le prix total: Affiche le prix total pour chaque niveau.
• Cacher les lignes d'en-tête et de pied de page : Supprime les lignes de diviseur en haut et en bas du widget pour un look plus propre et plus minimal.

ℹ️ BYOB offres ont également une Modèle option dans l'onglet général (Choix de la tablette ou Séparer la sélection) qui modifie la mise en page globale de la page groupée.

📌 Remarques importantes

• ⚠️ Les thèmes écrasent le style personnalisé. Appliquer un modèle ou changer de thème (Quantity Break) réinitialise vos paramètres de conception aux préréglages du thème. Toujours appliquer les thèmes d'abord, puis personnaliser.
• ⚠️ Taille limite du texte. Les éléments de texte individuels ne peuvent pas dépasser 20px — des valeurs plus grandes déclenchent une erreur de validation.
• ℹ️ La police s'applique à l'ensemble du widget. Le paramètre Police affecte tout le texte du widget ; utilisez le paramètre Style per-element (Bold, Italic, etc.) pour souligner des éléments spécifiques.
• ℹ️ La police thème est le choix le plus sûr. "Utilisez la police de votre thème" garantit que le widget correspond à votre typographie boutique avec aucun effort.
• ℹ️ Les paramètres de conception sont par offre. Chaque offre a son propre design indépendant — le style une offre n'affecte jamais vos autres offres.
• ℹ️ Aperçu par rapport à la vitrine. L'aperçu en direct utilise des données d'échantillon. Après l'enregistrement et la publication, vérifiez l'offre sur une page de produit réelle pour confirmer l'espacement et les polices apparaissent à l'intérieur de votre thème.

💡 Exemples et cas d'utilisation

• Faites correspondre votre marque exactement : Entrez les codes hexagonaux de votre marque dans les couleurs Bouton, Block Title et Highlight, puis définissez la police au correspondant le plus proche de votre police thématique.
• Faites le meilleur niveau pop (Quantity Break): Donnez à votre niveau "Most Popular" un style Tag audacieux, une couleur contrastante de fond Tag, et une forte couleur Border donc les yeux des acheteurs aller directement à elle.
• Visage minimal propre: Définissez la largeur de bordure à 0, masquez les lignes d'en-tête/pieds, et utilisez "Utilisez votre police de thème" pour un widget qui semble natif de votre thème.
• Boutons à contraste élevé: Fond de bouton foncé + blanc Texte de bouton + correspondant Couleur de bordure = un bouton qui est cliqué.
• Ambiance douce et amicale : Bump Border Radius up (20–50px) et choisir une couleur de fond pastel pour le niveau sélectionné.

🚀 Résultat final

Une fois configuré avec succès, le Conception et style les paramètres vous aident à créer des offres qui ressemblent à une partie naturelle de votre magasin — pas un widget vissé.

Avec un style approprié en place:

✅ Offrez des widgets se sentent pleinement alignés avec votre marque de magasin ✅ Les niveaux de rabais et les économies groupées deviennent plus faciles à analyser et à comprendre ✅ Les boutons CTA et niveau de la meilleure valeur se distinguent visuellement ✅ Des cadeaux gratuits et des étiquettes surlignées attirent l'attention des acheteurs ✅ Offres look poli et cohérent sur le bureau et mobile ✅ Les clients bénéficient d'une expérience d'achat plus fluide et plus fiable

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