En mettant en place un environnement de test solide et en établissant un processus de QA régulier, vous pouvez vous assurer que votre thème dispose de toutes les fonctionnalités nécessaires, et est prêt à être utilisé par les marchands Shopify du monde entier. Plus vous consacrez de temps à tester votre thème et à résoudre les problèmes d’utilisabilité, plus vous aurez de chances que son évaluation par l’équipe Shopify se passe bien.
Les bénéfices d’une stratégie de test rigoureuse s’étendent également au-delà du processus d’évaluation : en réduisant les problèmes rencontrés par les marchands lorsqu’ils utilisent votre thème, vous réduisez les futures demandes au service client.
Dans cet article, nous vous expliquerons comment configurer une boutique de développement pour tester votre thème, et comment y ajouter des produits et des données qui vous aideront à identifier les problèmes potentiels. Nous vous présenterons également des techniques pour tester les fonctionnalités obligatoires, ainsi que des outils pratiques pour automatiser les tests et évaluer votre thème par rapport à nos critères d’accessibilité et de performances.
Configurer un environnement de test
La première étape de la configuration de votre processus de test est la création d’une boutique de développement à laquelle vous pouvez ajouter différents produits, menus, pages et données de boutique. Le contenu que vous ajoutez à votre boutique de développement doit présenter des caractéristiques variées, qui testent les limites de votre boutique par rapport à l’utilisation que les marchands vont en faire. Cela vous permettra d’identifier les éventuels problèmes de conception et les éléments de votre thème qui doivent être corrigés.
« Le contenu que vous ajoutez à votre boutique de développement doit présenter des caractéristiques variées, qui testent les limites de votre boutique par rapport à l’utilisation que les marchands vont en faire. »
Une fois que vous avez créé une boutique de développement depuis votre tableau de bord partenaire, vous pouvez y ajouter des produits de test de plusieurs façons. Vous pouvez importer des produits dans votre boutique de développement à partir de notre dépôt GitHub ouvert à l’aide de fichiers CSV, ou utiliser l’interface de ligne de commande (CLI) Shopify pour générer des produits avec la commande shopify populate. L’avantage de la CLI Shopify est que vous pouvez choisir le type de données (produits, clients ou commandes) ainsi que le nombre d’éléments à générer.
Une fois que vous avez ajouté des produits dans la boutique, vous devez modifier les paramètres de certains d’entre eux afin de pouvoir observer comment votre thème réagit lorsque les produits ont des caractéristiques différentes.
Voici quelques exemples des paramètres de produits que vous devez tester :
- Configurez des variantes avec des prix différents, afin de vérifier que les prix s’ajustent dynamiquement lorsqu’une autre variante est sélectionnée.
- Créez un produit avec différentes options, pour lequel certaines variantes sont en rupture de stock et indisponibles. Pour créer des variantes non disponibles, ignorez simplement certaines combinaisons d’options. Cela permet de vérifier que le bouton « Ajouter au panier » est désactivé ou remplacé lorsqu’une variante est en rupture de stock ou qu’une combinaison indisponible est sélectionnée.
- Définissez des noms et des descriptions de produits très longs (plus de 1 000 caractères), afin de vérifier qu’ils s’affichent correctement et n’interfèrent pas avec les autres éléments de la page.
- Ajoutez différents formats d’images de produit, ainsi que des images PNG pour vous assurer que toutes les images s’affichent comme prévu.
- Chargez différents types de supports multimédias pour vérifier l’affichage des vidéos et des modèles 3D. Vous pouvez utiliser les exemples que nous proposons.
- Créez des réductions sur les produits pour vérifier que le prix réduit s’affiche bien sur la page de produit et sur la page du panier.
- Créez des produits avec 100 variantes sur trois options.
La navigation est un autre domaine important à tester, car votre thème devra prendre en charge une large gamme de configurations possibles de menus. Voici quelques paramètres de menu que vous devez tester dans votre boutique de développement :
- Ajoutez un menu de navigation principal comportant jusqu’à trois niveaux d’éléments pour vérifier que les éléments de menu déroulant fonctionnent comme prévu et n’interfèrent pas avec les autres éléments de la page.
- Ajoutez un menu avec plus de 10 éléments pour tester la mise en page de l’en-tête.
- Définissez des noms très longs pour les éléments de menu afin de vérifier qu’ils s’affichent clairement.
- Créez des collections contenant un grand nombre de produits pour garantir le bon fonctionnement de la pagination.
Vous devez inclure de nombreux autres éléments de la boutique dans vos tests pour vous assurer que votre thème affiche le contenu comme prévu. En voici quelques exemples :
- Ajoutez différentes pages contenant du texte long et du texte court pour vérifier que le texte s’affiche correctement pour toutes les pages.
- Utilisez différents formats d’images pour les articles de blog, les produits, les collections et les sections de produits en vedette. Vérifiez que votre thème affiche correctement les images, quel que soit le format choisi, partout où les marchands peuvent en insérer.
- Créez des comptes client et vérifiez l’affichage des pages client et des détails de la commande.
- Utilisez Hatchful pour créer un logo. Vérifiez comment votre thème s’adapte aux différentes tailles de logo et vérifiez qu’un texte alternatif s’affiche quand aucun logo n’est disponible.
- Recherchez des mots-clés sur votre boutique, et assurez-vous que la page de recherche renvoie différents types de résultats (produits, blogs et pages) et s’affiche correctement.
- Reproduisez l’ensemble du parcours client pour vérifier que tous les éléments avec lesquels un marchand interagit fonctionnent comme prévu. Cela inclut les notes de panier, les filtres, les formulaires de contact, les newsletters et les liens.
La plateforme Shopify est très flexible et permet aux marchands ayant de nombreuses exigences de présenter leur boutique dans une multitude de formats. Lorsque vous testez votre thème, pensez à tous les cas d’utilisation, même les plus marginaux, dans lesquels les marchands pourraient utiliser des fonctionnalités de manière inhabituelle pour afficher du contenu. En vous assurant que votre thème est suffisamment robuste pour s’adapter aux différentes configurations, vous le mettez sur la voie du succès dans la Boutique des thèmes de Shopify.
Tester les fonctionnalités obligatoires
Afin de répondre aux besoins variés des marchands, tous les thèmes doivent proposer certaines fonctionnalités de base. Vous trouverez toutes les fonctionnalités obligatoires, ainsi que des liens pour en savoir plus sur chacune, sur la page des exigences de la Boutique des thèmes. Vous pouvez aussi utiliser le thème Dawn de Shopify (dont le code source est disponible) comme référence pour voir comment chaque fonctionnalité obligatoire est mise en œuvre.Avant de soumettre votre thème pour évaluation, vous devez effectuer des tests rigoureux afin de vérifier que toutes les fonctionnalités obligatoires fonctionnent comme prévu. Pour afficher certaines fonctionnalités de votre thème, vous devrez activer des paramètres spécifiques dans votre boutique de développement.
« Avant de soumettre votre thème pour évaluation, vous devez effectuer des tests rigoureux afin de vérifier que toutes les fonctionnalités obligatoires fonctionnent comme prévu. »Dans cette section, nous préciserons si les paramètres d’administration doivent être activés pour une fonctionnalité obligatoire afin que vous puissiez la tester.
Supports multimédias de produits
Les marchands peuvent télécharger différents types de supports multimédias et les associer à leurs produits. Voici les types de supports multimédias que vous devrez prendre en charge sur les pages de produits de votre thème :
- Images standards
- Objets 3D
- Liens vers des vidéos YouTube ou Vimeo
- Fichiers vidéo MP4
Pour tester différents modèles 3D et vidéos, vous pouvez télécharger nos exemples qui incluent tous les supports multimédias de produits requis. Cette fonctionnalité est disponible pour tous les marchands, quelle que soit la configuration de leur boutique. Vous n’avez donc besoin d’activer aucun paramètre sur votre boutique de développement pour prendre en charge ces supports multimédias.
Ajoutez ces objets multimédias dans une page de produit pour tester les cas d’utilisation extrêmes, et vérifiez le comportement du produit lorsqu’il inclut tous les types de supports multimédias. Pour des questions d’accessibilité, vous devez aussi tester la façon dont les objets multimédias et la page de produit réagissent aux commandes du clavier et aux focus. Vous devez vous assurer que votre implémentation des supports multimédias n’a pas d’impact négatif sur l’accessibilité.
Pour vérifier que les modèles 3D s’affichent correctement, procédez comme suit :
- Ajoutez deux objets 3D à un produit.
- Les utilisateurs doivent pouvoir interagir avec les objets sans que cela interfère avec les autres éléments de la page.
- Sur mobile, les utilisateurs doivent pouvoir interagir avec les objets et les afficher en réalité augmentée. Vous devez vous assurer que le bouton « Afficher dans votre espace » s’affiche.
Pour vérifier que les vidéos s’affichent correctement, procédez comme suit :
- Si votre thème dispose d’un paramètre de boucle vidéo, assurez-vous qu’il fonctionne.
- Assurez-vous que le son de la vidéo s’arrête lorsque les utilisateurs quittent la page de la vidéo.
- Lorsque les utilisateurs sélectionnent une autre variante, le support multimédia principal doit s’adapter.
- Exécutez des tests d’accessibilité sur la page en naviguant manuellement à l’aide des commandes du clavier, et analysez le comportement du focus.
Prix unitaire
Les marchands peuvent vendre des produits en quantités ou en mesures spécifiques, et devoir donc afficher un prix unitaire pour ces produits. Le prix unitaire permet d’afficher un prix par unité, mais n’est disponible que pour les marchands en Allemagne.
Pour tester cette fonctionnalité, l’adresse de votre boutique de développement doit être définie en Allemagne. Une fois l’adresse définie en Allemagne, suivez les instructions de notre documentation d’aide pour définir le prix unitaire.
Pour tester les prix unitaires, procédez comme suit :
- Sélectionnez un prix unitaire sur un produit avec plusieurs variantes pour vous assurer que le prix unitaire s’adapte dynamiquement en fonction de la variante.
- Testez la page de collection, le formulaire de produit (la page de produit et la fenêtre modale d’achat rapide, le cas échéant) et la page du panier pour vous assurer que le prix unitaire apparaît.
Forfaits de vente
Les forfaits de vente représentent différentes méthodes de vente des produits sur une boutique Shopify, lorsqu’un marchand vend un produit ou service d’abonnement par exemple. Pour en savoir plus sur la mise en œuvre de la fonctionnalité de forfait de vente sur votre thème, consultez notre documentation pour les développeurs.
Les forfaits de vente ne peuvent être créés et appliqués aux produits que par une application. Cela signifie que vous devrez installer l’une des nos applications d’abonnement qui utilisent les API d’abonnement sur votre boutique de développement pour tester les forfaits de vente avec votre thème.
Conditions supplémentaires pour les forfaits de vente :
- Votre boutique de développement doit utiliser Shopify Payments.
- Aucun script Shopify ne doit être publié.
- Il ne doit pas y avoir de personnalisations
checkout.liquid. - La liste complète des critères est disponible ici.
Pour ajouter des forfaits de vente au panier, vous pouvez utiliser les API AJAX du panier afin d’ajouter un identifiant variant avec un identifiant selling_plan au panier. Vous pouvez également ajouter l’extrait suivant au formulaire de produit, qui vous permet de sélectionner un élément selling_plan :
Pour tester les forfaits de vente, procédez comme suit :
- Ajoutez un forfait de vente à un produit via l’application d’abonnement spécifique que vous avez installée sur votre boutique de développement.
- Vous devriez voir apparaître les informations relatives au forfait de vente sur la page de produit de votre boutique de développement.
- Les informations du forfait de vente doivent également être affichées sur la page du panier et la page de commande du client.
Disponibilité du service de retrait
Les marchands Shopify peuvent proposer à leurs clients de retirer leurs commandes passées en ligne dans leur magasin physique, à l’extérieur du magasin ou en drive, ou dans tout autre lieu qu’ils choisissent. Lorsque cette fonctionnalité est activée, les clients peuvent afficher les informations relatives à un magasin du marchand sur la page du produit. Pour en savoir plus sur la mise en œuvre de la fonctionnalité de disponibilité du service de retrait sur votre thème, consultez notre documentation pour les développeurs.
Comme la disponibilité du service de retrait est une fonctionnalité native de Shopify, vous n’avez pas besoin d’installer d’application pour activer cette fonctionnalité sur votre boutique de développement. Vous trouverez des instructions détaillées sur la façon d’activer la disponibilité du service de dans notre documentation d’aide. Voici un résumé des étapes de configuration :
- Activez l’expédition multi-origine sous Paramètres > Expédition et livraison.
- Ajoutez des emplacements fictifs sous Paramètres > Emplacements.
- Accédez à Paramètres > Expédition et livraison pour configurer le retrait en magasin dans vos lieux fictifs.
- Sélectionnez un produit dans l’interface administrateur et, dans la section Stock, définissez la quantité de chaque variante de produit pour chaque emplacement.
- Une fois tout cela configuré, les informations sur la disponibilité du produit en retrait doivent s’afficher sur la page de produit.
Pour tester la disponibilité du service de retrait, procédez comme suit :
- Créez un produit contenant plusieurs variantes avec différentes options de disponibilité du service de retrait, afin de vérifier si les informations changent dynamiquement pour chaque variante.
- Les clients doivent être en mesure de voir clairement les informations du magasin. Assurez-vous que les informations de la fenêtre contextuelle ou du tiroir de panier ne sont pas coupées et n’interfèrent pas avec les autres éléments de la page.
Ce ne sont que quelques-unes des fonctionnalités qui doivent être prises en charge par votre thème. Effectuez une série de tests complète, incluant toutes les exigences de la Boutique des thèmes avant de soumettre votre thème ou de demander une nouvelle évaluation.
Outils de test
La meilleure façon de vous assurer que votre thème est performant, accessible et compatible avec tous les navigateurs requis est de le créer en suivant les bonnes pratiques dès le début. Il est plus difficile et plus long de réécrire du code problématique à la fin d’un projet que d’écrire un code correct au départ.« La meilleure façon de vous assurer que votre thème est performant, accessible et compatible avec tous les navigateurs requis est de le créer en suivant les bonnes pratiques dès le début. »Cependant, vous aurez toujours besoin d’un moyen d’évaluer vos efforts et de déterminer si votre thème répond aux critères de soumission à la Boutique des thèmes de Shopify. Ces techniques de test doivent être utilisées chaque jour durant votre processus de développement, pour vous aider à comprendre l’impact des changements apportés à votre codebase et vous permettre d’identifier les améliorations nécessaires.
Outils de test des performances de la boutique en ligne
Notre équipe utilise l’outil Lighthouse de Google pour déterminer la performance de votre thème en matière de chargement. Pour être accepté dans la Boutique des thèmes de Shopify, un thème doit avoir un score de performance Lighthouse moyen de 60 au minimum sur mobile. Cela inclut la page d’accueil, les pages de produits et les pages de collections.
Vous pouvez exécuter des tests Lighthouse sur vos propres boutiques de développement en générant un lien d’aperçu et en l’utilisant sur Pagespeed Insights de Google. Comme les boutiques de développement sont protégées par un mot de passe, vous ne pourrez pas effectuer d’audit à l’aide de l’URL racine myshopify.com. Les liens d’aperçu créés à partir de l’interface administrateur sont toutefois accessibles publiquement sans mot de passe et peuvent être utilisés pour tester différentes pages de votre thème.
Pour obtenir une vue globale des performances de votre thème sur différentes pages, vous devez exécuter des audits sur la page d’accueil, les pages de produits et les pages de collections (en utilisant 10 à 25 produits pour des résultats significatifs). Il est recommandé d’exécuter 10 tests par page pour obtenir une moyenne fiable, car de nombreux facteurs peuvent jouer sur les résultats (emplacement, vitesse Internet, etc.). La moyenne de toutes les pages devrait être supérieure à 60 sur mobile.
En outre, nous avons lancé l’action GitHub Shopify Lighthouse CI pour aider les développeurs qui utilisent un processus d’intégration continue (CI) dans le cadre de leur flux de développement. Lorsque vous utilisez cette action GitHub, le code de votre thème est téléchargé dans une boutique de référence, où une note de vitesse est calculée. Cela vous permettra d’identifier rapidement les problèmes de performances, au fur et à mesure du développement de votre thème.
Pour découvrir les techniques à utiliser pour améliorer les performances de votre thème, consultez nos bonnes pratiques en matière de performances pour les thèmes Shopify et les instructions d’évaluation des performances dans notre documentation destinée aux développeurs.
Outils de test de l’accessibilité
Vous devez tenir compte de l’accessibilité à chaque étape de la création de votre thème, car elle est essentielle pour fournir une expérience inclusive aux marchands et à leurs clients. Respecter les exigences d’accessibilité de la Boutique des thèmes de Shopify ne vous permet pas simplement de publier votre thème sur notre place de marché : vous offrez également à vos marchands et à leurs acheteurs une meilleure expérience.
Nous avons récemment publié un excellent article de Scott Vinkle expliquant comment tester l’accessibilité des thèmes, qui vous aidera à comprendre les nouvelles exigences d’accessibilité de la Boutique des thèmes de Shopify et à y répondre. Cet article de blog présente différentes techniques pour la vérification des problèmes objectifs et subjectifs d’accessibilité, et explique comment tester des composantes spécifiques de votre thème.
Comme pour les performances, l’équipe de validations des thèmes de Shopify utilise Lighthouse pour vérifier l’accessibilité de votre thème. Pour être accepté dans la Boutique des thèmes de Shopify, un thème doit avoir un score d’accessibilité Lighthouse moyen de 90 au minimum, sur mobile comme sur ordinateur. Cela inclut la page d’accueil, les pages de produits et les pages de collections.
En exécutant des tests d’accessibilité Lighthouse sur chaque page, vous pouvez non seulement déterminer le score d’accessibilité, mais aussi découvrir les problèmes d’accessibilité précis de votre thème. Par exemple, les rapports Lighthouse indiquent si des champs de formulaire ne sont pas associés à une étiquette ou si des problèmes de contraste de couleur sont détectés.
Vous pouvez aussi utiliser Accessibility Insights for Web, une extension du navigateur Chrome qui vous permet d’exécuter facilement des tests pendant que vous travaillez sur votre thème. Tous les développeurs qui utilisent VS Code peuvent installer le plug-in axe Accessibility Linter afin d’identifier les problèmes de balisage pouvant nuire à l’accessibilité dans les fichiers de thème.
Outils de test de la compatibilité du navigateur
Il est essentiel que votre thème permette aux marchands d’accéder aux mêmes informations et de bénéficier de la même expérience sur tous les navigateurs et tous les appareils. Selon les exigences de la Boutique des thèmes de Shopify, votre thème doit être compatible avec les deux dernières versions disponibles de Safari, Chrome, Firefox et Edge, sur Mac et PC.
Un des moyens les plus fiables de tester le comportement de votre thème sur les versions plus anciennes des navigateurs est d’utiliser un émulateur comme BrowserStack, qui simule toutes les versions de navigateurs requises. Les développeurs testent aussi souvent leurs projets sur d’anciennes versions d’Internet Explorer, accessibles via l’outil Machines virtuelles de Microsoft. Pour en savoir plus sur la prise en charge des différents navigateurs, lisez notre article de blog sur le développement pour les navigateurs modernes (en anglais).
En ce qui concerne les appareils mobiles, les outils pour les développeurs Chrome peuvent être utilisés pour émuler des appareils mobiles et des tailles d’écran spécifiques. Ils sont donc très utiles dans le cadre d’un processus d’assurance qualité intégré. Ils vous permettront de simuler l’expérience utilisateur mobile à partir de votre ordinateur portable ou de bureau, et d’introduire des restrictions pour voir comment les performances peuvent être affectées lors de l’utilisation de connexions Internet 3G plus ou moins rapides.
Dans la mesure du possible, cependant, vous devez tester votre thème manuellement sur autant d’appareils que possible. Cela vous permettra de voir en direct comment votre thème répond aux événements tactiles et aux fonctions cibles. Il est donc fortement recommandé d’avoir accès à un appareil Android et à un appareil iOS en plus des outils pour les développeurs Chrome.
Autres outils de test
De nombreux autres outils peuvent être utilisés pour évaluer votre thème et s’assurer qu’il offre la meilleure expérience aux acheteurs et aux marchands. En voici quelques-uns :
- Theme Check pour l’analyse et la correction des erreurs de code Liquid, disponible à la fois pour VS code et la CLI Shopify.
- Le programme de débug du partage Facebook et l’outil de validation des cartes de Twitter pour tester que les balises Open Graph s’affichent correctement sur les médias sociaux.
- La fonction Désactiver Javascript des outils pour les développeurs Chrome pour tester la navigation et le formulaire de produit sans JavaScript.
- Parfois, le meilleur moyen de tester votre thème est de faire appel à des utilisateurs réels. Des personnes extérieures à votre organisation peuvent avoir un regard neuf sur votre thème et vous offrir de nouvelles perspectives de test.
Tester pour réussir
Lorsque vous testez votre thème, utilisez différentes méthodes pour obtenir une vue globale des problèmes potentiels, plutôt que de vous en tenir à un seul outil. La mise en place d’un processus de test robuste et régulier vous permettra de voir où des bugs apparaissent lorsque vous créez un thème, et contribuera ainsi à votre réussite sur la Boutique des thèmes de Shopify.
Si vous suivez les conseils de cet article, tester vos thèmes devrait être beaucoup plus facile !
Rejoignez le programme des partenaires de Shopify
Inscrivez-vous gratuitement au programme partenaire de Shopify. Accédez à des outils et ressources pour aider les marchands Shopify à développer leur activité et faites partie d’un écosystème riche en opportunités.
Devenir partenaire Shopify
Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.
Texte original par Liam Griffin. Traduction par Solenn Marchand.