Aller au contenu

Sélecteur de variantes

Afficher les variantes de produit avec des listes déroulantes, des pastilles et des échantillons de couleur ou d’image en option.

Utilisez ce bloc pour afficher les options de variante d’un produit dans un format qui convient le mieux au produit. Il s’affiche uniquement lorsque des options de variante existent, et vous pouvez combiner un style de sélecteur standard avec des échantillons de couleur ou d’image en option pour un choix plus visuel. Documentation Company XYZ sur le sélecteur de variantes Pour une vue d’ensemble plus large du fonctionnement des blocs dans les thèmes Shopify, consultez documentation Shopify sur les sections et les blocs

Choisissez le style principal du sélecteur en fonction du nombre d’options à présenter et du degré de mise en avant visuelle que vous souhaitez donner au formulaire produit. Liste déroulante convient bien aux mises en page compactes ou aux produits avec de nombreuses valeurs, tandis que Pastilles facilite la lecture et la sélection de petits ensembles d’options.

Ce style principal sert également de solution de secours pour tous les types d’options qui ne sont pas configurés en tant qu’échantillons.

Utilisez des échantillons de couleur lorsque les clients peuvent identifier les choix de manière fiable par la seule couleur. Cela fonctionne mieux pour les options courantes basées sur la couleur, et vous pouvez affiner davantage le résultat avec des définitions de couleur personnalisées dans les paramètres de votre thème. Guide de démarrage Company XYZ sur les variantes de produit

Pour afficher des échantillons de couleur, saisissez les noms d’options pertinents exactement tels qu’ils sont utilisés dans la configuration du produit. Utilisez des noms comme Color, et non des valeurs comme Black ou Navy. La forme d’échantillon sélectionnée ainsi que les comptes de colonnes sur ordinateur/mobile déterminent si la grille d’options paraît dense ou aérée.

Les échantillons de couleur s’appliquent uniquement aux noms d’options que vous indiquez ici. Si le nom ne correspond pas exactement, cette option utilisera à la place le style de sélecteur habituel.

Utilisez des échantillons d’image lorsque les choix de variante ont besoin d’une vraie miniature plutôt que d’un simple repère de couleur. Cela est particulièrement utile pour les motifs, les finitions, les offres groupées ou d’autres options où un aperçu visuel améliore la confiance avant la sélection. Guide de démarrage Company XYZ sur les variantes de produit

Les échantillons d’image dépendent du fait que des images soient attribuées aux options de variante pertinentes. Si une option n’a pas d’image associée, son échantillon apparaît vide. Si des échantillons d’image et de couleur sont tous deux activés pour le même nom d’option, les échantillons d’image sont prioritaires.

Ces paramètres n’affectent que les échantillons de couleur et d’image. Les bordures peuvent rendre les échantillons plus faciles à distinguer, surtout lorsque les choix sont clairs, peu contrastés ou affichés sur un arrière-plan de page similaire.

L’option active affiche toujours une bordure afin que la sélection en cours reste claire. Si vous laissez les couleurs de bordure personnalisées vides, le bloc revient au style de bordure du bouton principal de votre thème pour un rendu plus cohérent.

Utilisez les contrôles de visibilité pour décider si ce bloc apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez une disposition du formulaire produit différente sur les petits écrans. Documentation Company XYZ sur les paramètres de visibilité

  1. Faites correspondre exactement les noms d’options. Le comportement des échantillons dépend de l’intitulé exact de l’option, alors utilisez le nom de l’option lui-même plutôt que des valeurs individuelles.
  2. Choisissez le bon type d’échantillon. Utilisez des échantillons de couleur pour des choix de couleur simples et des échantillons d’image lorsque les clients ont besoin d’un véritable aperçu visuel.
  3. Vérifiez la couverture des images. Avant d’utiliser des échantillons d’image, assurez-vous que chaque option de variante pertinente possède une image assignée afin d’éviter des échantillons vides.
  4. Gardez un style de solution de secours prévisible. Laissez les couleurs ou bordures personnalisées non définies lorsque vous souhaitez que les échantillons héritent de l’apparence par défaut du thème, et ajoutez des valeurs explicites uniquement lorsque vous avez besoin que le bloc se distingue.
  5. Vérifiez les deux affichages. Les contrôles sur ordinateur et sur mobile peuvent se comporter différemment en matière d’espacement, d’alignement, de visibilité et de présentation des médias, alors vérifiez le bloc dans les deux tailles avant de le publier.
  6. Facilitez la lecture sur mobile. Utilisez des comptes de colonnes et des formes d’échantillons qui laissent suffisamment d’espace pour un tapotement confortable sur les petits écrans.