Intégrer l’essayage virtuel de lunettes dans une boutique Shopify

Une boutique peut avoir un plugin Shopify installé, des modèles 3D disponibles et un bouton d’essayage qui fonctionne, sans disposer encore d’une intégration cohérente avec son catalogue. La monture affichée peut correspondre à un autre calibre ; le coloris choisi pendant l’essayage peut ne pas arriver jusqu’au panier ; une nouvelle collection peut rester sans modèle 3D associé. La qualité de l’intégration se mesure à la relation entre données commerciales, contenus numériques et comportement du thème, tout au long du cycle de vie des produits.

Pour un détaillant en optique, l’essayage virtuel ajoute au catalogue un modèle 3D de chaque produit, et ce modèle doit correspondre exactement à l’article vendu. Shopify gère la variante mise en vente, ses données et le parcours de commande. Le Virtual Try-On (VTO) gère le modèle 3D et son utilisation. Relier ces deux domaines exige des règles explicites sur les associations, la disponibilité, les sélections et les mises à jour. Shopify affiche déjà des modèles 3D parmi les médias du produit, avec un thème compatible¹ ; l’intégration dont nous parlons ici concerne autre chose : l’essayage sur le visage et le lien, maintenu dans la durée, entre la variante mise en vente et le contenu 3D approuvé.

Le catalogue commercial et le catalogue 3D ont des états différents

Une variante peut être publiée sur la boutique sans disposer encore d’un modèle 3D approuvé. Elle peut aussi avoir un contenu 3D prêt et être temporairement indisponible à la vente. Ces états ne sont pas interchangeables.

Dans la structure de données de Shopify, la variante possède un identifiant, des options et des informations de disponibilité ; la politique de stock peut autoriser ou empêcher la vente en cas de rupture de stock². L’existence d’un modèle 3D ne règle aucune de ces décisions commerciales.

La boutique doit donc définir quand proposer l’essayage. Si une variante peut être achetée mais que le contenu 3D manque, la fiche produit continue de fonctionner avec ses contenus habituels. Si le contenu 3D est prêt mais que le produit ne peut pas être commandé, on peut, le cas échéant, laisser l’essayage accessible tout en signalant clairement l’indisponibilité. La décision dépend de l’assortiment et du rôle de la page : vente courante, avant-première ou archive.

La couverture de l’essayage doit se lire comme l’intersection entre les produits pertinents sur le plan commercial et les variantes dont le modèle 3D est réellement utilisable. Une liste de modèles 3D livrés et une liste de produits disponibles à l’achat décrivent deux conditions différentes. L’essayage mis en ligne doit respecter ces deux conditions.

SKU et identifiant de variante jouent des rôles différents

Dans les échanges avec un fournisseur ou avec l’ARShades Library partagée, les SKU et les codes-barres permettent de retrouver le produit correspondant. Dans Shopify, en revanche, l’identifiant de variante désigne l’objet sur lequel travaillent la boutique et les opérations de panier.

Chaque variante a son propre code : c’est sur lui que repose l’association avec le modèle 3D.

Shopify distingue explicitement SKU et code-barres, et recommande des SKU uniques pour les variantes. Sa documentation signale que des codes en double peuvent poser problème dans les intégrations avec des services tiers³. Pour un détaillant multimarque, il importe aussi de comprendre ce que désigne le code : un SKU interne attribué par la boutique peut différer de la référence avec laquelle le fabricant identifie la même monture.

L’association suppose une relation stable entre ces références. Corriger le nom de la fiche produit ne devrait pas modifier l’identité de la variante ; un changement de SKU, en revanche, peut compromettre un processus qui utilise précisément ce code pour rechercher le contenu 3D. Supprimer puis recréer un produit peut obliger à reconstruire des relations fondées sur les identifiants de la boutique.

Dans le plugin ARShades, la recherche de correspondance s’appuie sur les codes SKU, EAN ou UPC, sans déduire l’association du nom ou de l’image du produit. La synchronisation crée les liens vers les modèles 3D disponibles dans l’ARShades Library et les conserve dans le catalogue ARShades rattaché à la boutique⁴.

Le contrôle doit aller jusqu’à la variante physique. Un code formellement valide peut être rattaché au mauvais coloris ou à un autre calibre. C’est pourquoi la vérification des données et la vérification visuelle ont des fonctions complémentaires : la première contrôle le lien, la seconde ce que le client voit réellement.

La sélection doit rester cohérente jusqu’au panier

Sur une fiche produit, un visiteur peut choisir le coloris avant d’ouvrir le Virtual Try-On, le changer pendant l’essayage, puis poursuivre vers la commande. Le projet d’intégration doit établir comment ces changements se propagent.

Si le VTO s’ouvre sur une variante par défaut, la page doit rendre compréhensible son rapport avec celle qui est sélectionnée dans la boutique. Si l’essayage permet de choisir une autre variante, le retour à la fiche produit peut mettre à jour la sélection ou demander une nouvelle action explicite. Ce qu’il faut éviter, c’est de laisser deux sélections divergentes sans le signaler.

D’après la documentation du panier Shopify, l’article à ajouter est désigné par son identifiant de variante⁵. Par conséquent, un essayage visuellement correct peut tout de même conduire à un parcours erroné si le bouton d’achat conserve l’identifiant précédent. La dernière image vue et l’article ajouté doivent pouvoir être rapportés à la même variante.

Un cas de test utile part d’une monture proposée en plusieurs coloris et dans au moins deux calibres. On arrive par un lien qui présélectionne une variante, on modifie le choix pendant l’essayage, puis on contrôle le nom, le prix, la disponibilité et la ligne du panier. Shopify documente les liens directs vers une variante au moyen du paramètre ?variant= ; sans ce paramètre, c’est le thème qui choisit la variante affichée (celle qu’il présélectionne ou, à défaut, la première disponible), et le résultat du test change⁶. Le résultat attendu dépend des fonctionnalités réellement activées dans l’intégration ; l’éventuel ajout au panier depuis le VTO exige la même vérification.

Le même principe vaut pour des configurations optiques plus complexes. L’essayage de la monture et la configuration des verres correcteurs peuvent relever de systèmes distincts. L’essayage doit indiquer clairement à quelle combinaison correspond ce qu’il affiche, en laissant au parcours de commande la validation des options commerciales prévues.

Le thème détermine où et comment la fonctionnalité s’intègre

Les extensions de thème Shopify (theme app extensions) distinguent les blocs d’application (app blocks), que l’on peut placer dans les sections compatibles, des intégrations d’application (app embeds), utilisées aussi pour les éléments superposés et les composants communs à tout le site. Les intégrations d’application doivent être activées dans le thème ; ajouter un bloc et activer la couche d’intégration correspondante peuvent être deux étapes distinctes⁷.

Cette structure réduit le besoin d’interventions directes sur les fichiers du thème, mais certaines dépendances restent à gérer dans le projet d’intégration : le template utilisé, la position du bloc, la logique du sélecteur de variante et les mises à jour dynamiques de la page. Une boutique peut utiliser des templates différents selon les catégories ou les marques, et une modification publiée sur le template principal peut ne pas atteindre toutes les fiches produit concernées.

Il faut aussi vérifier le comportement dans les composants qui ne mettent à jour qu’une partie de la page, comme certains aperçus rapides du produit. Le thème peut remplacer un sélecteur ou un bouton lors du changement de variante ; l’intégration doit continuer à lire le bon état, sans dupliquer les éléments d’interface ni conserver de références au produit précédent.

Un test sur un thème non publié est utile pour contrôler ces points. Avant l’ouverture au public, il faut ensuite vérifier le domaine définitif, les templates effectivement attribués et les conditions de déclenchement des scripts. Une boutique headless ou un parcours très personnalisé impose en outre d’évaluer l’intégration sur sa propre architecture, au-delà de la compatibilité annoncée pour les thèmes standard.

La couverture dépend des produits les plus consultés

Dire que l’essayage virtuel est disponible sur cent variantes n’indique pas encore quelle part de l’expérience d’achat est couverte. Ces cent variantes peuvent correspondre aux produits les plus demandés ou à une part marginale de l’assortiment. Il faut aussi les lire en montures : la limite de l’abonnement se compte en variantes liées, et non en produits ; cent variantes peuvent donc représenter vingt montures en cinq coloris⁴.

Pour une analyse utile, mieux vaut distinguer la part des variantes couvertes de la part des visites sur les fiches produit qui proposent l’essayage. La seconde mesure exige les données de trafic de la boutique : elle ne se déduit pas du nombre de modèles 3D. Les deux parts peuvent être très différentes, surtout lorsqu’une campagne concentre les visites sur quelques produits.

Le choix du premier groupe de montures devrait donc concilier pertinence commerciale, variété et disponibilité des contenus 3D. Un assortiment composé uniquement de montures faciles à représenter peut convenir à une première vérification technique, mais en dit peu sur la qualité de l’essayage pour l’ensemble du catalogue. Acétates translucides, métaux fins et verres variés mettent à l’épreuve des aspects distincts du rendu.

La couverture doit aussi être réévaluée dans le temps. Si la boutique publie une nouvelle collection sans finaliser les associations, le nombre absolu de modèles 3D peut rester inchangé alors que la part des visites qui ont accès à l’essayage diminue. Le suivi du catalogue doit accompagner les campagnes et les nouveautés.

La synchronisation fait partie de la gestion des produits

Le catalogue continue d’évoluer après le lancement : nouveaux codes, produits retirés, variantes ajoutées, modèles 3D corrigés. Chaque changement peut toucher un côté différent de la relation.

La documentation ARShades indique de relancer la synchronisation lorsque l’on ajoute des produits, que l’on modifie des SKU ou des codes-barres, ou que de nouveaux modèles 3D deviennent disponibles. Le lien est établi dans le catalogue ARShades et ne modifie pas les produits Shopify⁴. La synchronisation doit donc être considérée comme une activité du cycle de l’assortiment, avec un responsable désigné.

La disponibilité de l’essayage dépend aussi de l’accès à la plateforme : licence, domaine autorisé et périmètre des variantes actives. Un produit peut avoir une association correcte et un contenu 3D disponible, alors qu’un problème à l’un de ces niveaux empêche l’ouverture de l’essayage. Le contrôle devrait distinguer un problème de licence, de domaine autorisé ou de périmètre des variantes, car chacun appelle une intervention différente.

Un processus viable relie la publication des nouveaux produits à un contrôle de la couverture : quelles variantes sont associées, lesquelles attendent la production de leur contenu 3D et lesquelles doivent rester consultables sans essayage. L’arrêt de commercialisation d’une monture exige une décision analogue sur ce qui reste visible et sur les liens encore en circulation.

Évaluer l’essayage dans le parcours d’achat

La fiabilité de l’intégration concerne aussi les visiteurs qui n’utilisent pas le VTO. Les scripts et les contenus 3D ne devraient compromettre ni la consultation de la fiche produit, ni le choix des options, ni l’achat classique. La documentation des extensions de thème Shopify recommande de limiter le chargement des scripts aux pages où ils sont nécessaires⁷. Les exigences Built for Shopify fixent un seuil : une application ne doit pas faire baisser le score Lighthouse de la boutique de plus de dix points, et les éléments ajoutés au thème doivent être construits avec les extensions de thème⁸. C’est un critère dont le détaillant peut demander le respect à tout fournisseur. Le poids initial de la page et celui qu’ajoute l’ouverture de l’essayage doivent être évalués séparément.

Pour le client qui ouvre l’essayage, ce qui compte, c’est que la bonne variante se charge et que le retour à la boutique conserve une sélection cohérente. Pour le responsable e-commerce, ces contrôles précèdent l’analyse d’un éventuel effet sur les ventes : un taux de conversion plus élevé chez ceux qui choisissent d’essayer ne démontre pas à lui seul la contribution causale de l’essayage, comme nous le détaillons dans l’article consacré au projet pilote.

L’intégration devient fiable lorsque la boutique parvient à la garder cohérente à mesure qu’elle évolue. Le critère de réussite englobe donc le premier lancement et le travail des semaines suivantes : lier une nouvelle variante, corriger un code, publier un thème mis à jour et continuer à montrer au client les lunettes qu’il pourra commander.

Sources

1. Shopify Help Center, Product media: 3D models. ↩

2. Shopify Developer Documentation, objet Liquid variant : identifiant, disponibilité et politique de stock. ↩

3. Shopify Help Center, Using SKUs to manage your inventory. ↩

4. Knowledge Base ARShades, New synchronisation et Catalogue synchronisation. ↩ ↩² ↩³

5. Shopify Developer Documentation, Cart API reference. ↩

6. Shopify Developer Documentation, Product merchandising, Variants, section sur les variant deep links. ↩

7. Shopify Developer Documentation, Configure theme app extensions, sections App blocks, App embed blocks et Performance. ↩ ↩²

8. Shopify Developer Documentation, Built for Shopify requirements, 2.2.1 Minimize the impact on store speed et 3.2.1. ↩