ℹ️ 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 Upsell & Cross Sell widget regarde et se sent sur votre devant de magasin. Des couleurs de fond et de l'espacement à la typographie et au style des boutons — chaque partie visuelle du widget peut être personnalisée pour correspondre à votre marque.

Chaque configuration de upsell (Page produit, Page panier, Tiroir de panier ou Position personnalisée) a son propres paramètres de conception indépendants, donc vous pouvez styler un widget de tiroir de panier différemment d'un widget de page de produit ✨

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

• Un visuel Récupérateur de couleurs
• A Code Hex entrée

Cela rend facile si vous préférez choisir des couleurs visuellement ou coller vos couleurs de marque exacte.

⚠️ Avant de commencer

Pour configurer les paramètres de conception :

→ Ouvrir un existant Upsell & Cross Sell configuration → Ou créez une nouvelle configuration d'abord

Alors ouvrez le Conception onglet en haut de la page de configuration.

ℹ️ Les paramètres de conception ne changent que la façon dont le widget regarde. Ce que dit le widget (titres, texte bouton) est configuré dans l'onglet Contenu, et peut être traduit dans Traduction.

👀 Aperçu en direct

Pendant que vous travaillez dans l'onglet Design, un Aperçu en direct est affiché à côté des paramètres. Chaque changement que vous faites est reflété dans l'aperçu immédiatement — aucune sauvegarde nécessaire pour voir comment les choses semblent.

• Aperçu du bureau – Affiche comment le widget apparaît sur les écrans de bureau.
• Aperçu mobile – Affiche le widget à l'intérieur d'un cadre de taille mobile, de sorte que vous pouvez vérifier la lisibilité sur les petits appareils.

💡 L'aperçu utilise vos produits, titre et texte de boutons, donc ce que vous voyez est très proche de ce que les clients verront sur votre devant de magasin.

🖼️ Historique

• Ce qu'il fait: Contrôle l'apparence en arrière-plan de la section widget upsell.
• Options disponibles :
• • Couleur unique – Appliquer une couleur de fond solide.
  • Gradient – Mélanger deux couleurs en douceur.

🎨 Couleur unique

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

🌈 Gradient

• Degré d'angle du gradient: Contrôle la direction du gradient (0–360°).
• Sélection des couleurs initiales et finales : Sélectionnez les deux couleurs utilisées dans le dégradé.

💡 Un dégradé subtil peut aider la section upsell à se démarquer du reste de la page sans entrer en conflit avec votre thème.

📏 Espacement

Cette section contrôle l'espacement à l'intérieur et à l'extérieur du widget de vente.

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

Toutes les valeurs sont définies dans pixels (px).

💡 Utilisation Extérieur espacement pour créer un espace de respiration entre le widget et des éléments comme le bouton Ajouter au panier, et À l'intérieur espacement pour garder le contenu de toucher les bords de la section.

🔤 Typographie

Cette section contrôle comment tous les éléments de texte apparaissent dans le widget upsell.

🏷️ Titre de la vente

• Taille du titre de la vente : Contrôle la taille de l'en-tête de la section de mise à niveau (p. ex. Acheté fréquemment ensemble) .
• Upsell Couleur du titre : Change la couleur de l'en-tête de section.

ℹ️ Le texte même du titre de la vente est édité dans le Contenu Tab, pas ici.

📦 Titre du produit

• Taille du titre du produit: Contrôle la taille de chaque nom de produit dans le widget.
• Couleur du titre du produit: Change la couleur du titre du produit.

💰 Prix

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

➡️ Flèche

• 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.

ℹ️ Les flèches de navigation apparaissent uniquement lorsque le widget contient plus d'un produit pour glisser à travers.

🔘 Bouton

Cette section personnalise le bouton d'appel à l'action (p. ex. Ajouter au panier) pour chaque produit.

🎨 Couleur du bouton

• Modifie la couleur de fond du bouton. La bordure du bouton utilise automatiquement la même couleur.

🔤 Taille et couleur du texte du bouton

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

⭕ Coin Rayon & Style du bouton

• Rayon du coin: Définit comment arrondi les coins des boutons apparaissent, en pixels.
• Style de bouton: Commuter rapidement entre Carré, _arrondi_et Entièrement arrondi.

ℹ️ Ces deux paramètres restent automatiquement synchronisés :

• Choisir une Style de bouton applique un rayon d'angle correspondant.
• Dactylographie Rayon du coin valeur met à jour le style — les valeurs basses deviennent Carré, les valeurs moyennes deviennent arrondi, et des valeurs élevées deviennent Entièrement arrondi.

💪 Poids de la police

• Contrôle comment gras ou allumer le texte du bouton apparaît.
• Sélectionner Héritage pour suivre votre thème de la police existante poids, ou choisir un poids spécifique de 100 (mince) à 900 (plus fort).

✍️ Style de police

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

💾 Sauver et publier votre conception

Les changements de conception ne sont pas en vie avant d'être sauvés.

1. Faites vos changements dans la Conception onglet — les mises à jour d'aperçu en direct instantanément.
2. Cliquez sur Enregistrer dans la barre de sauvegarde en haut de la page.
3. Assurez-vous que la vente est Publié Ainsi, le design mis à jour apparaît sur votre vitrine.

⚠️ Veuillez noter : Les valeurs de couleur saisies comme codes hexagonaux sont validées lors de l'enregistrement. Si un code hexagonal n'est pas valide (par exemple, # ou contenant des caractères invalides), l'enregistrement sera bloqué et un message d'erreur mettra en évidence le champ qui doit être corrigé.

ℹ️ Si votre conception est sauvegardée et publiée mais que le widget lui-même n'est pas visible sur le devant de la boutique, la cause est généralement liée à l'intégration d'applications, au placement ou au ciblage — voir Upsell & Cross Sell n'est pas montré sur mon magasin [Fixed].

🛍️ Comment les changements de conception réfléchissent sur le devant de la boutique

Lorsque vous enregistrez une configuration publiée, l'application met automatiquement à jour votre boutique. Le widget Storefront lit vos paramètres de conception et les applique partout où le widget rend :

• Historique → Remplit la section widget de votre couleur ou dégradé unique.
• Espacement → Applique votre rembourrage intérieur et les marges extérieures autour du widget.
• Typographie → Style le titre de vente à la hausse, les titres de produit, les prix et les flèches de navigation.
• Bouton → Styles chaque produit Ajouter au panier bouton, y compris le rayon d'angle, le poids de la police et le style de police.

Parce que chaque type de configuration (Page produit, Page panier, Tiroir de panier, Position personnalisée) stocke sa propre conception, changer une configuration n'affecte jamais l'apparence des autres.

🚀 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:

✅ Le widget upsell se sent aligné avec votre marque de magasin
✅ Les recommandations de produits deviennent plus visibles et plus engageantes
✅ Prix et titres de produits restent lisibles sur le bureau et mobile
✅ Les boutons CTA deviennent plus attrayants visuellement
✅ Chaque placement peut porter son propre look et se sentir
✅ Les clients ont une interface plus polie 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 : 15/09/2026