Comment adapter le widget aux couleurs de votre thème

Bundlex peut adapter votre widget de bundle à l'apparence de votre boutique en quelques clics. Le panneau Préréglages de couleurs du widget lit les jeux de couleurs de votre thème Shopify et suggère des combinaisons prêtes à l'emploi, afin que vos offres s'intègrent naturellement à la page au lieu de sembler ajoutées après coup.

Où trouver les préréglages de couleurs

Ouvrez un bundle dans l'éditeur et accédez à l'onglet Style. Le panneau Préréglages de couleurs du widget se trouve au-dessus des commandes détaillées de Style du widget. Utilisez les préréglages pour tout définir en une fois, puis ajustez les couleurs des éléments individuellement dans la section Style du widget située en dessous, si vous le souhaitez.

Choisir une couleur principale

La ligne Couleur principale sert de point de départ à toute la palette. Vous pouvez la définir de quatre façons :

• Nuanciers suggérés - les nuanciers colorés proviennent directement des jeux de couleurs de votre thème Shopify, notamment les couleurs des boutons, du texte et des arrière-plans. Cliquez sur l'un d'eux pour l'appliquer.
• Couleurs par défaut - le nuancier gris foncé situé après ceux de votre thème rétablit les couleurs noire et blanche par défaut du widget.
• Couleur personnalisée - cliquez sur le nuancier avec l'icône plus pour ouvrir un sélecteur de couleur et choisir n'importe quelle valeur hexadécimale. Appuyez sur Entrée après avoir saisi la valeur hexadécimale et vérifiez que l'aperçu est modifié.
• Couleur aléatoire - cliquez sur le nuancier d'actualisation pour générer une couleur aléatoire si vous souhaitez simplement explorer les possibilités.

Quel que soit votre choix, Bundlex reconstruit instantanément le reste des couleurs du widget autour de celui-ci et applique le résultat à l'aperçu en direct.

Choisir une couleur d'accent secondaire

La couleur secondaire est utilisée comme accent pour les badges, les états actifs et les éléments mis en évidence. Bundlex la génère automatiquement pour l'harmoniser avec votre couleur principale et propose plusieurs options d'harmonie sous forme de nuanciers sur lesquels vous pouvez cliquer.

Si vous préférez définir vous-même l'accent, vous disposez des deux mêmes options de remplacement que pour la ligne principale :

• Couleur d'accent personnalisée - le nuancier plus ouvre un sélecteur permettant de saisir une valeur hexadécimale précise.
• Couleur d'harmonie aléatoire - le nuancier d'actualisation choisit sur le cercle chromatique une couleur contrastante qui reste compatible avec votre couleur principale.

Interrupteur des offres transparentes

À côté de la couleur principale, vous trouverez un interrupteur Transparent qui contrôle l'arrière-plan des cartes d'offres non sélectionnées :

• Désactivé - les arrière-plans des offres non sélectionnées prennent une couleur unie, une teinte claire de vos couleurs lorsqu'elle provient d'un préréglage, afin que chaque niveau apparaisse comme une carte distincte.
• Activé - les arrière-plans des offres non sélectionnées restent transparents pour un rendu plus épuré et plus plat, qui se fond dans la page.

Le changement de l'interrupteur modifie uniquement la transparence de l'arrière-plan de l'offre non sélectionnée. Les arrière-plans sélectionnés et survolés, le texte, le badge et les couleurs de bordure restent inchangés. Le désactiver rend à nouveau l'arrière-plan entièrement opaque. Les nuanciers sur lesquels vous cliquez lorsqu'il est activé appliquent la version transparente de ce préréglage.

La suggestion « Appliquer le rayon de bordure »

Les couleurs ne sont pas la seule chose que Bundlex peut reprendre de votre thème. S'il détecte que le rayon des angles de votre thème diffère de celui des angles actuels du widget, une bannière Appliquer le rayon de bordure apparaît avec la note « Adapter les angles du widget à votre thème. »

1. Cliquez sur Appliquer dans la bannière pour appliquer le rayon des angles de votre thème aux cartes d'offres, aux images des offres et aux images de ventes croisées du widget.
2. Vous pouvez aussi la fermer avec l'icône de fermeture si vous préférez conserver vos angles actuels.

La suggestion peut être absente parce qu'aucune différence n'a été détectée, que le thème ne fournit pas de rayon utilisable ou que vous l'avez fermée. Vous pouvez toujours définir vous-même les angles sous Style du widget.

Ajuster les éléments individuellement

Après avoir choisi votre palette, développez un élément sous Style du widget. Carte d'offre vous permet d'ajuster séparément son rayon de bordure, son espacement et ses états sélectionné, survolé et non sélectionné. Dans cet exemple, nous avons défini le rayon de la carte sur 8 pixels. Appliquez d'abord les préréglages, puis effectuez ces derniers ajustements, car le choix d'un autre préréglage peut remplacer les choix de couleurs individuels.

Enregistrer et vérifier votre boutique

Cliquez sur Enregistrer. Testez une remise active sur la page produit ciblée. Sélectionnez chaque offre, vérifiez le contraste du texte et du badge, choisissez les variantes et utilisez Ajouter au panier. Vérifiez la page sur ordinateur et sur mobile, car l'aperçu de l'éditeur ne peut pas afficher tous les arrière-plans de thème ni toutes les tailles d'écran.

Notre exemple conserve les mêmes règles de remise sur quantité : deux trousses Ivoire Petite ont un sous-total de marchandises de 43,20 $ après une remise de 10 %. La mise en forme modifie la présentation, mais pas le calcul de la remise. Vérifiez le panier et le paiement dans le cadre de votre contrôle final.

Comment les suggestions sont générées

Bundlex lit les paramètres de couleur de votre thème et en déduit des nuances assorties. Les suggestions dérivées du thème sont reproductibles avec les mêmes paramètres de thème. Les commandes Couleur aléatoire et Couleur d'harmonie aléatoire génèrent volontairement de nouveaux choix.

Conseils

• Les préréglages constituent un point de départ rapide. Après en avoir appliqué un, vous pouvez toujours ajuster la couleur de chaque élément dans Style du widget.
• Si aucun nuancier suggéré n'apparaît, Bundlex n'a pas pu lire les valeurs de couleur de votre thème actif. Vous pouvez toujours utiliser les options personnalisée et aléatoire.
• Utilisez l'aperçu en direct pour vérifier le contraste, en particulier lorsque l'interrupteur Transparent est activé, afin que les badges et le texte restent lisibles sur l'arrière-plan de votre page.