Variantes & combinaisons

Les variantes permettent à un seul produit de couvrir plusieurs options — couleurs, tailles, capacités, marques, modèles. Le client voit un sélecteur clair sur la fiche produit, et vous gardez une seule fiche au lieu de dupliquer le produit par couleur. Cette page est la référence la plus détaillée de la section Vendre parce que les variantes sont la partie qui prend le plus de temps à configurer pour la mode, l'électronique et le digital.

Vidéo

Le vocabulaire

Concept	Ce que c'est
Groupe de variantes	Une dimension de choix — Color, Size, Storage, Brand. Un produit peut en avoir plusieurs.
Option de variante	Une valeur dans un groupe — Red, XL, 64GB, Apple.
Combinaison	Une paire spécifique entre deux groupes — Red + XL. À utiliser quand chaque paire a son propre SKU et son propre stock.
Pastille de prix	La petite étiquette de prix affichée sur l'option, calculée comme prix de base + ajustement de prix de l'option.

Un produit avec 3 couleurs × 4 tailles a jusqu'à 12 combinaisons. Vous n'êtes pas obligé d'utiliser les combinaisons — la plupart des produits suivent le stock au niveau de l'option ou au niveau du produit (voir §Modes de stock).

Les trois types de variantes

Chaque option porte un type qui contrôle son rendu sur la boutique :

Type	Ce que voit le client	À utiliser quand
Color	Un cercle rempli avec la couleur hex spécifiée	La couleur est toute l'histoire (Red, Blue, Black).
Text	Une pastille texte (S, M, L, XL)	Tailles, matériaux, capacités, options textuelles génériques.
Image-text	Une miniature avec le nom de l'option en dessous	Logos de marques, vignettes de modèles, tout cas où une petite image clarifie le texte.

Le type image-text est plus récent que les deux autres. Utilisez-le dès que vous avez plus de ~5 options textuelles dans un groupe — la miniature évite que le client confonde des noms similaires (iPhone 14 Pro vs iPhone 14 Pro Max). Quand l'option est liée à une image produit, cliquer dessus fait défiler la galerie produit jusqu'à cette image.

Créer un groupe de variantes

Allez dans Dashboard → Products sur /dashboard/products, puis :

• Cliquez Create product sur /dashboard/products/create, ou
• Ouvrez un produit existant pour l'éditer sur /dashboard/products/:id/edit.

Faites défiler jusqu'à la carte Variants, puis :

1. Cliquez Add variant group.
2. Tapez un nom de groupe (par ex. Color, Size, Brand).
3. Choisissez le type (Color, Text, ou Image-text).
4. Cliquez Add option pour chaque valeur.

Vous pouvez glisser les groupes pour les réordonner — la boutique affiche les groupes de haut en bas dans cet ordre.

Ajouter des options

Chaque option comporte :

Champ	À quoi ça sert
Name	Le label vu par le client (Red, Small, Apple).
Color code	Valeur hex, uniquement pour le type color — pilote la pastille.
Linked image	Pour image-text (et optionnel pour color). Choisissez l'une des images produit déjà uploadées. Le lien utilise un ID image stable, pas une URL — voir §Clic vers galerie.
Show as card	Bascule entre une grande carte (image + pastille de prix) et un petit sélecteur (pastille/cercle).
Price adjustment	Un delta sur le prix de base. Positif (+200), zéro, ou négatif.
Stock	Stock pour cette option (utilisé quand vous ne suivez pas le stock par combinaison).

La pastille de prix — un delta, pas le prix absolu

C'est l'erreur la plus courante en configurant les variantes :

Si votre prix de base est 2 500 DZD et le XL coûte 2 700 DZD, l'ajustement de prix pour XL est +200, pas 2700.

La boutique affiche le prix final (base + ajustement) sur la carte d'option et recalcule le total panier quand le client choisit une option.

Le bouton "Show as card"

Activez Show as card quand vous voulez afficher l'option en grande tuile avec image et pastille de prix — utile pour la mode, la bijouterie, et les sélecteurs de marque. Laissez-le désactivé pour les sélecteurs compacts et les pastilles texte (les tailles n'ont pas besoin de cartes).

Groupes obligatoires vs. optionnels

Chaque groupe peut être marqué required. Quand un groupe est obligatoire, le client ne peut pas ajouter le produit au panier sans choisir une option dedans. La validation est côté serveur, donc un onglet périmé ne peut pas faire passer une sélection vide. Marquez toujours Color et Size comme obligatoires ; laissez les groupes optionnels (gravure, personnalisation) en non-obligatoires.

Clic → défilement vers la galerie

Quand une option est liée à une image produit, cliquer dessus sur la boutique fait défiler la galerie jusqu'à cette image. Le lien utilise l'ID interne de l'image, donc réordonner ou remplacer les photos plus tard ne casse pas le lien.

C'est pour cela que le dashboard demande de choisir une image produit comme image liée à l'option — choisir par ID au lieu de par fichier supprime le bug "l'image principale ne reste pas après sauvegarde".

Modes de stock

La plateforme supporte trois manières de suivre le stock. Leur ordre de priorité côté boutique :

1. Stock par combinaison — un compteur séparé pour chaque paire (Color × Size).
2. Stock par option — un compteur par option (un seul stock Red partagé entre toutes les tailles).
3. Stock produit — un nombre unique sur le produit lui-même.

Si vous n'activez pas les combinaisons, le stock est lu depuis l'option (si défini) et retombe sur le produit sinon.

Quand activer le stock par combinaison

Activez Track combination stock quand :

• Les paires (Color × Size) ont vraiment des stocks différents (Red XL s'épuise avant Red M).
• Vous avez besoin d'un SKU par paire pour l'inventaire ou la comptabilité.

Sinon, laissez désactivé. Les combinaisons explosent vite : 4 couleurs × 5 tailles = 20 SKUs. 4 × 5 × 3 capacités = 60. Le dashboard tient confortablement jusqu'à ~1000 combinaisons ; au-delà contactez le support.

Quand vous activez le stock par combinaison, la carte Combination matrix apparaît sous les groupes de variantes. Cliquez Generate combinations pour construire la grille, puis tapez un compte de stock pour chaque ligne.

Réorganiser les images et la galerie de variantes

La grille d'images produit (au-dessus de la section variantes) est l'endroit où les marchands passent le plus de temps :

• Glisser-déposer pour réordonner sur desktop.
• Appui long ~250 ms sur mobile pour entrer en mode réorganisation (avec une petite vibration).
• Les boutons chevrons < et > sur chaque carte image la décalent d'une position à gauche/droite — pratique pour le glisser lent sur mobile ou pour le placement précis.
• L'image principale est verrouillée en position 1 — réorganiser les autres ne la déplace pas.

L'ordre est sauvegardé via un tableau image_order[] quand vous enregistrez le produit, et c'est ce qu'utilise la boutique pour la galerie et pour le lien option-image.

Variantes en cascade (addon)

Certains catalogues ont des options dépendantes — Marque → Modèle. Choisir Apple doit n'afficher que les iPhones, pas les Samsung Galaxies. Installez l'addon Variantes en cascade pour activer les groupes parent-enfant :

• Option parent choisie → le groupe enfant apparaît.
• Les autres options du parent sont masquées tant que le client ne change pas son choix.
• Compatible avec les types color, text et image-text, et avec le stock par combinaison.

Activez-le depuis /dashboard/addons (nécessite le plan Pro).

Popup de variantes pour les offres (addon)

Quand vous vendez des offres multi-quantité ("Achetez 3, le 4e gratuit"), le client doit choisir des variantes pour chaque pièce, pas une seule fois. Le sélecteur intégré devient encombré — l'addon Popup de variantes pour les offres le remplace par une fenêtre modale :

• Belle popup responsive, une pièce à la fois.
• Affiche images, couleurs et noms des variantes.
• Avancement automatique optionnel à la pièce suivante après sélection.
• Compatible avec le stock par combinaison.

Activez-le depuis /dashboard/addons — disponible sur tous les plans, y compris Gratuit.

Variantes Produit Digital (thème Digital uniquement)

Si votre boutique utilise le thème Digital, l'addon Variantes Produit Digital transforme le sélecteur de variantes en un accordéon élégant en deux étapes :

• Chaque option affiche le prix final (base + ajustement) directement sur la carte.
• Sélection unique parmi tous les groupes (pas de multi-choix).
• Animations CSS fluides accessibles au clavier, assorties au thème Digital.
• Zéro configuration par produit — activez et l'addon s'applique partout.

Nécessite le plan Pro et le thème Digital.

Astuces

• Configurez la pastille de prix comme un delta, pas comme un prix absolu. La plupart des erreurs viennent de taper 2700 au lieu de +200.
• Utilisez image-text dès ~5 options dans un groupe. Les miniatures tuent les confusions sur les noms similaires.
• N'activez pas le stock par combinaison sauf si vous en avez vraiment besoin. 4 × 5 = 20 SKUs, c'est beaucoup à synchroniser.
• Les cartes sont parfaites pour la mode et les marques, surdimensionnées pour les tailles.
• Marquez Color et Size comme obligatoires — les sélections vides produisent des lignes order_item_variants vides qui cassent l'étiquette de livraison.
• Verrouillez votre image principale avant de réorganiser. Les clients venant des pubs atterrissent sur l'image principale ; ne la remplacez pas par accident.
• Testez la popup sur téléphone. Les offres multi-quantité doivent toujours être vérifiées en largeur mobile — la popup est plus critique que le sélecteur intégré.

La suite

• Produits — la page qui héberge les variantes.
• Addon Variantes en cascade
• Addon Popup de variantes
• Addon Variantes Produit Digital