Personnaliser l'apparence de chaque élément du widget

La section Style du widget divise le widget de la page produit en éléments individuels afin que vous puissiez personnaliser chacun d'eux séparément. Ouvrez-la dans l'éditeur de bundles pour trouver une série de panneaux accordéon, un par élément, qui vous permettent de contrôler les couleurs, les polices, les bordures, l'espacement, les badges et bien plus encore.

Fonctionnement de la section Style du widget

Ouvrez l'onglet Style du bundle et recherchez Style du widget. Cliquez sur l'en-tête d'un panneau pour afficher les commandes de l'élément correspondant. Lorsque vous survolez un en-tête, l'élément correspondant est mis en évidence dans l'aperçu. Certains panneaux apparaissent uniquement lorsque la fonctionnalité correspondante est disponible dans le bundle.

La plupart des panneaux partagent les mêmes éléments : un sélecteur de couleur, une taille de police et un sélecteur de style de police. Les panneaux qui personnalisent une boîte, comme la carte d'offre ou un badge, proposent également une couleur d'arrière-plan, une couleur de bordure, une largeur de bordure et un rayon d'angle. Vos modifications sont enregistrées avec le reste du bundle.

Les panneaux, élément par élément

En-tête

Contrôle la couleur du texte, la taille de police et le style de police de l'en-tête du widget. Saisissez le texte de l'en-tête plus haut dans l'onglet Style pour afficher Alignement de l'en-tête (Gauche, Centré, Ligne centrale barrée ou Droite). Lorsque l'alignement est défini sur Ligne centrale barrée, une commande supplémentaire apparaît dans ce panneau pour définir la couleur et l'épaisseur de la ligne.

Carte d'offre

Il s'agit de la boîte autour de chaque offre, ou niveau de quantité. C'est le panneau le plus important, car il couvre trois états visuels :

• Offre non sélectionnée : couleur d'arrière-plan, couleur de bordure et largeur de bordure pour l'état par défaut.
• Offre au survol : les trois mêmes contrôles appliqués lorsqu'un acheteur survole la carte.
• Offre sélectionnée : les trois mêmes contrôles pour l'offre actuellement sélectionnée.

Le panneau définit également les propriétés communes aux cartes : le rayon des angles, l'espacement entre les cartes, les marges intérieures horizontales et verticales, ainsi qu'une option Radio permettant d'afficher ou de masquer le bouton radio. L'effet d'arrière-plan animé se configure séparément avec le bouton Décoration plus haut dans l'onglet Style (Bulles, Anneaux, Cœurs, Explosion d'étoile, Pourcentage, Étoiles, Horloge ou Argent), et apparaît uniquement sur l'offre sélectionnée. Les couleurs des cartes d'offre contrôlent également l'apparence du bouton radio.

Titre et sous-titre de l'offre

Deux panneaux distincts, chacun avec une couleur, une taille de police et un style de police pour la ligne du titre et celle du sous-titre de l'offre.

Libellé de remise

Définit la couleur du texte, la couleur d'arrière-plan, la taille de police et le style de police du libellé de remise. Notez que ces paramètres s'appliquent également aux badges supplémentaires des cadeaux.

Image de l'offre

Contrôle la taille de l'image de l'offre, le rayon de ses angles, la couleur et la largeur de sa bordure, ainsi qu'une Ombre (Aucune, Petite, Moyenne ou Grande). Définit également le mode d'affichage de l'image :

• Original : conserve les proportions natives de l'image.
• Carré : recadre l'image au format carré.
• Carré (haut) : recadre l'image au format carré en conservant sa partie supérieure.
• Carré (ajusté) : ajuste l'image entière dans un carré sans la recadrer.

Badge de quantité

Définit le style du petit nombre de quantité qui peut apparaître sur l'image de l'offre. Vous pouvez définir sa couleur de texte, sa couleur d'arrière-plan, le rayon de ses angles, sa taille de police, son style de police et sa Position (en haut à droite, en haut à gauche, en bas à droite ou en bas à gauche). Ce nombre s'affiche sur l'image de l'offre lorsque l'option « Afficher le badge de quantité » est activée.

Libellé de variante

Définit la couleur, la taille de police et le style de police des titres des options de variante (par exemple, Taille ou Couleur) et de leurs numéros de ligne.

Menu déroulant

Pour les menus déroulants de variantes, utilisez le panneau Menu déroulant distinct afin d'ajuster le texte, l'arrière-plan, la bordure, les angles et les marges intérieures.

Badge de l'offre

Le badge est le message d'accroche (comme « Le plus populaire ») affiché sur une offre. En plus de la couleur du texte, de la couleur d'arrière-plan, de la taille de police et du style de police habituels, ce panneau propose un sélecteur de Forme du badge avec de nombreux préréglages :

• Par défaut, Plié, Pastille
• Flèche droite, Flèche gauche
• Carré
• Bannière, Bannière arrondie
• Ruban d'angle, Ruban latéral, Ruban latéral alternatif, Ruban latéral arrondi

Prix

Le panneau Prix regroupe trois styles de texte, chacun avec sa propre couleur, taille de police et style de police :

• Prix principal : le prix de vente actif.
• Prix de comparaison : l'ancien prix barré.
• Texte par article : le texte du prix unitaire.

Bundle

Les bundles de produits disposent également d'un panneau Bundle pour le texte du titre du produit, la bordure entre les articles du bundle et le signe plus entre les produits.

Avantages

Définit le style de la liste à puces des avantages. Vous pouvez y définir une taille de police et un style de police communs, ainsi qu'une Couleur du texte et une Couleur de l'icône distinctes afin de différencier les icônes du texte.

Cadeau et upsell

Définit le style du bloc de cadeau gratuit dans deux états, chacun avec une couleur d'arrière-plan, une couleur de titre, une taille de police et un style de police :

• Cadeau de l'offre sélectionnée : le bloc de cadeau de l'offre choisie.
• Cadeau d'une offre non sélectionnée : le bloc de cadeau des autres offres.

Un troisième groupe, Image du cadeau, contrôle la largeur et le rayon des angles de l'image du cadeau.

Images des fenêtres contextuelles de cadeaux et de mix & match

Ouvrez Style > Style de la fenêtre modale > Fenêtre modale du cadeau et recherchez Ajustement de l'image. Vous pouvez également accéder à ces contrôles depuis Personnaliser le style de la fenêtre modale à côté d'un sélecteur de cadeau ou de mix & match. Choisissez Original pour conserver les proportions de la photo entière ou Carré pour obtenir des miniatures uniformes. Le paramètre est partagé par les fenêtres contextuelles de sélection de cadeaux et de pool de bundles au sein de cette remise ; les images du widget principal utilisent les contrôles distincts de l'image de l'offre.

Pied de page

Définit la couleur, la taille de police et le style de police du texte du pied de page du widget.

Conteneur et largeur maximale

Le panneau Conteneur contrôle la largeur globale du widget grâce au paramètre Largeur maximale :

• Par défaut Shopify (44rem) : limite le widget à 44rem dans l'espace disponible.
• Pleine largeur (100 %) : permet au widget de s'étendre sur toute la largeur de son conteneur.
• Personnalisée : affiche un champ Largeur dans lequel vous saisissez une valeur en pixels.

Ce panneau comprend également une Couleur d'alerte utilisée pour le texte d'alerte signalant un stock faible.

Utilisez Marge supérieure et Marge inférieure ici pour ajuster l'espace autour du widget de cette remise avant d'ajouter du CSS personnalisé.

La pleine largeur remplit le conteneur parent du widget. Elle ne peut pas élargir une colonne étroite d'informations produit dans votre thème.

Conseils de modification

• Observez l'aperçu en direct pendant vos modifications. Comme le survol du titre d'un panneau met en évidence l'élément correspondant, vous pouvez vérifier que vous modifiez la bonne partie avant de changer une valeur.
• Définissez ensemble les trois états de la carte d'offre (non sélectionnée, survolée et sélectionnée) afin que l'état sélectionné se distingue clairement des autres.
• Si vous avez besoin d'un style que les panneaux ne proposent pas, le panneau CSS personnalisé situé en bas de la section vous permet d'ajouter du CSS pour remplacer les styles du widget.