Variantes Shopify sur une page bio : tailles, couleurs, stock et checkout

Une carte produit n'est pas prête à vendre simplement parce qu'elle affiche une photo et un prix. Si le produit Shopify existe en plusieurs tailles, couleurs, matières ou styles, la page bio doit conserver ces choix et transmettre la combinaison exacte à Shopify.

Dans le cas contraire, la personne doit recommencer sa sélection après avoir quitté la page ou arrive au checkout avec le mauvais article. Ces deux situations ajoutent de la friction au moment où l'intention d'achat est la plus forte.

Un bloc produit Shopify fiable doit :

1. Lire dans Shopify les noms et les valeurs des options.
2. Résoudre la combinaison choisie vers une vraie variante Shopify.
3. Mettre à jour le prix et la disponibilité de cette variante.
4. Ouvrir Shopify avec la variante exacte.

Ce guide présente le modèle de données, l'interface et les tests nécessaires pour rendre ce parcours fiable sur mobile.

Comprendre la différence entre une option et une variante #

Shopify utilise les options pour décrire des choix comme Taille ou Couleur. Une variante est une combinaison de ces choix qui peut être achetée.

Prenons un chandail avec :

• Taille : Petit, Moyen, Grand
• Couleur : Noir, Naturel

Ce catalogue peut contenir six variantes. Noir et Moyen constitue une variante. Naturel et Grand en constitue une autre. Chacune peut posséder son propre identifiant, son image, son prix, son UGS et son inventaire.

La page bio ne doit jamais construire une variante en assemblant les libellés et en supposant qu'elle existe. Elle doit sélectionner une variante réellement renvoyée par Shopify. Certaines combinaisons peuvent être absentes ou indisponibles.

Shopify reste la source de vérité pour :

• les libellés d'option;
• les valeurs;
• les combinaisons valides;
• les identifiants de variante;
• les prix;
• les images;
• la disponibilité.

La page ne présente ainsi pas une ancienne liste de tailles après une modification du catalogue.

Conserver les libellés compris par la clientèle #

Ne remplacez pas les libellés précis par des contrôles génériques. Si Shopify nomme une option Taille, affichez Taille. Si la boutique emploie Tour de taille, Fini, Parfum ou Format, conservez ces mots.

Cette règle devient essentielle lorsque le produit comporte plusieurs options. Une suite de valeurs comme M, Noir et Régulier est ambiguë sans les libellés Taille, Couleur et Coupe.

Les libellés doivent également respecter la langue et la terminologie choisies par la personne qui gère la boutique. La page bio constitue une surface de vente, pas un second catalogue qui renomme les produits en silence.

Choisir le bon contrôle selon la mise en page #

Les choix peuvent prendre la forme de boutons radio visuels ou de listes déroulantes. Le meilleur contrôle dépend de l'espace et du nombre de valeurs.

Boutons visibles pour une fiche détaillée #

Des boutons ou pastilles rendent les valeurs visibles et réduisent le nombre d'actions. Ils conviennent à une fiche consacrée à un produit lorsque la liste reste courte.

Exemples :

• TP, P, M, G, TG
• Noir, Blanc, Rouge
• 250 ml, 500 ml

Liste déroulante dans une surface dense #

Une liste déroulante convient mieux à un grand nombre de valeurs ou à un produit placé dans une boutique compacte ou un bloc à onglets. Elle économise de l'espace vertical, mais masque les choix jusqu'à son ouverture.

Aucun sélecteur pour une variante unique #

Si le produit ne possède qu'une seule variante achetable, n'affichez pas un contrôle contenant une valeur inutile. Gardez l'action directe.

Le contrôle peut changer selon la mise en page. Les données et le comportement du checkout doivent rester identiques.

Résoudre les combinaisons pendant la sélection #

À chaque choix, l'interface doit recalculer immédiatement les combinaisons encore valides.

Si la couleur Rouille existe seulement en Moyen et Grand :

1. Choisir Rouille doit désactiver Petit.
2. Choisir Moyen doit trouver la variante Rouille et Moyen.
3. Le prix, l'image et la disponibilité doivent changer si cette variante diffère.
4. Le bouton d'achat doit transmettre l'identifiant de cette variante.

Les valeurs indisponibles devraient être désactivées visuellement plutôt que disparaître sans explication. Une liste stable permet de comprendre que la valeur existe, mais ne peut pas être achetée actuellement.

Si une combinaison devient invalide après l'actualisation des données, la page doit exiger une nouvelle sélection valide au lieu de conserver un ancien identifiant.

Afficher le stock de la variante #

Écrire « En stock » pour le produit entier devient trompeur lorsqu'une seule taille demeure disponible. La disponibilité appartient à la variante sélectionnée.

Utilisez des états clairs :

• Disponible : la combinaison peut être achetée.
• Indisponible : la combinaison existe, mais ne peut pas être achetée actuellement.
• Sélection requise : une option obligatoire manque.
• Produit indisponible : Shopify ne renvoie plus de variante achetable.

Désactivez le bouton d'achat lorsque la sélection est incomplète ou indisponible. N'attendez pas le checkout Shopify pour révéler une erreur évitable.

L'inventaire peut changer entre l'affichage et le checkout. Shopify doit prendre la décision finale. La page bio fournit un aperçu fidèle, puis Shopify valide la commande.

Transmettre la variante exacte au checkout Shopify #

Les permaliens de panier Shopify peuvent ajouter une variante et une quantité précises, puis diriger la personne vers le panier ou le checkout.[1] L'identifiant de variante est le lien fiable entre les deux systèmes.

Le parcours attendu est :

1. La personne choisit toutes les options obligatoires.
2. La page trouve l'identifiant de variante Shopify correspondant.
3. Elle touche le bouton d'achat.
4. Shopify s'ouvre avec cette variante et cette quantité.
5. Shopify gère la livraison, les taxes, le paiement, les rabais et la confirmation.

Klyqme ne remplace pas le checkout pour un produit Shopify. La plateforme fournit la surface produit mobile et transmet l'article choisi au parcours d'achat de la boutique.

Consultez le guide pour ajouter des produits Shopify à une bio Instagram afin de voir toute la configuration.

Synchroniser le prix et l'image #

Une variante peut modifier autre chose que le stock. Shopify permet d'associer un prix ou une image différente à certaines variantes.

Lorsque ces données existent, mettez l'affichage à jour après la sélection. Une personne qui choisit le produit rouge ne devrait pas continuer à voir le noir si Shopify fournit une image rouge. Un ensemble plus cher ne devrait pas conserver le prix de base.

Utilisez l'image générale du produit uniquement si Shopify ne fournit pas d'image propre à la variante. N'inventez ni prix, ni promotion, ni état de stock dans la configuration de la page bio.

Concevoir pour le pouce #

Une page de commerce social est souvent ouverte sur un téléphone. Les sélecteurs doivent donc proposer :

• une surface tactile suffisamment grande;
• des états sélectionné, disponible, désactivé et focus visibles;
• des libellés qui ne reposent pas uniquement sur la couleur;
• du texte qui revient à la ligne;
• un contraste suffisant en thème clair et sombre;
• un bouton d'achat lisible sur une faible largeur.

Une pastille de couleur devrait aussi posséder un libellé textuel ou accessible. Le mot « Naturel » communique davantage qu'un cercle beige et reste utilisable par les personnes qui distinguent difficilement certaines couleurs.

Évitez le défilement horizontal pour quelques tailles. Si la boutique contient des dizaines de valeurs, choisissez une liste déroulante ou une grille qui revient à la ligne.

Adapter la variante du bloc à la décision d'achat #

Chaque mise en page soutient un niveau de détail :

• Vedette ou fiche : un produit prioritaire avec ses options et un bouton bien visible.
• Carte ou bandeau : une présentation avec les renseignements essentiels.
• Ligne : un produit secondaire compact avec image, nom, prix et action.
• Grille ou liste de collection : plusieurs produits à découvrir.

Le produit vedette doit exposer les choix nécessaires à l'achat. Un élément compact peut mener vers une fiche plus complète ou vers Shopify si l'interface d'options ne tient pas correctement.

Pour concevoir le reste de la page, consultez le comparatif des liens bio Shopify et le guide de vente depuis un lien en bio.

Tester chaque branche importante #

Tester uniquement la taille par défaut ne suffit pas. Préparez une matrice qui couvre la logique du catalogue.

Pour un produit à deux options, testez :

• la première combinaison disponible;
• une autre taille dans la même couleur;
• une autre couleur dans la même taille;
• une combinaison indisponible;
• une variante ayant une autre image;
• une variante ayant un autre prix, le cas échéant;
• la destination du checkout pour chaque choix testé.

Testez aussi :

• un produit à variante unique;
• un produit à une option;
• un produit à plusieurs options;
• un produit devenu indisponible;
• un long libellé traduit;
• une récupération Shopify lente ou échouée.

Dans Shopify, confirmez que le panier contient le produit, la variante, la quantité et le prix attendus. Sur une boutique en production, arrêtez le test avant le paiement.

Erreurs courantes #

Écrire les tailles et les couleurs en dur #

La page devient obsolète dès que la boutique modifie Shopify.

Transmettre le produit au lieu de la variante #

La personne doit recommencer son choix ou reçoit le mauvais article.

Masquer les libellés d'option #

Les valeurs deviennent ambiguës, surtout lorsque plusieurs groupes sont présents.

Confondre le stock du produit et celui de la variante #

Une seule taille disponible peut faire paraître toutes les autres achetables.

Laisser le bouton actif avec un choix invalide #

L'erreur est repoussée dans Shopify et la confiance diminue.

Rogner l'image pour respecter une hauteur fixe #

Une photo produit contient souvent des détails utiles. Sauf exigence explicite de la mise en page, conservez son ratio avec une largeur complète et une hauteur automatique.

Liste de contrôle #

• Les données viennent de la boutique Shopify connectée.
• Chaque option affiche son libellé Shopify.
• Seules les combinaisons réelles peuvent être choisies.
• Le prix, l'image et le stock suivent la variante sélectionnée.
• Les valeurs indisponibles sont clairement désactivées.
• Le bouton reste désactivé tant que le choix n'est pas valide.
• L'URL du checkout contient la variante résolue.
• Les surfaces tactiles et le retour à la ligne ont été testés.
• Shopify confirme le bon panier avant le paiement.

Lorsque ces règles sont respectées, la page bio ne se contente plus de promouvoir un produit. Elle conserve la décision d'achat jusqu'à Shopify.

Sources #

1. Documentation Shopify : créer des permaliens de panier
2. Centre d'aide Shopify : variantes de produit