Résolution des problèmes liés au thème de votre boutique en ligne

Il est possible que les images s’affichent différemment de ce que vous attendez, mais cela peut être dû au fait que l’image elle-même n’est pas compatible avec l’usage que vous en faites dans votre thème. Vérifiez que les dimensions de l’image sont correctes dans l’image que vous utilisez. Passez en revue la liste suivante des problèmes d’affichage courants qui peuvent survenir lorsque vous chargez une image incompatible :

• Si votre en-tête s’affiche en plus grand et votre logo en plus petit que prévu, cela peut être dû à un espace blanc dans le fichier image du logo. L’espace blanc dans le fichier image du logo peut entraîner un affichage plus petit du logo et un affichage plus grand de votre en-tête. Modifiez le fichier image pour vérifier qu’il est recadré autour du logo et qu’il n’y a pas d’espace blanc.
• Si l’image de votre diaporama est recadrée, c’est normal. Cela garantit que les images s’affichent de la même manière sur mobile et sur ordinateur. Comme le contenu s’affiche en beaucoup plus petit sur un écran de mobile, de nombreux détails peuvent être perdus en réduisant le contenu. Au lieu de cela, le contenu est recadré pour garantir que les détails ne sont pas perdus. Une image en mode portrait, qui est plus haute que large, peut également occuper beaucoup d’espace sur un ordinateur. C’est pourquoi les images de diaporama ont une hauteur maximale. Vous pouvez ajouter une mise au point à vos images de diaporama pour vous assurer que la mise au point se trouve toujours au centre de l’image du diaporama.

  Option de hauteur adaptative : de nombreux thèmes Shopify incluent un paramètre de hauteur adaptative pour les diaporamas qui ajuste la hauteur du diaporama pour qu’elle corresponde à la première diapositive, ce qui réduit le recadrage sur les écrans de différentes tailles. Cette fonctionnalité est disponible dans tous les thèmes actuellement pris en charge et développés par Shopify.

• Si une image GIF ne s’affiche pas correctement et qu’elle a été ajoutée à votre boutique en ligne avec l’éditeur de texte enrichi, par exemple dans la description du produit ou dans un article de blog, cela peut être dû à la taille de l’image. Vous pouvez corriger ce problème en cliquant sur le GIF dans l’éditeur de texte enrichi, puis en cliquant sur Modifier l’image. Dans le menu déroulant Taille de l’image, sélectionnez Originale. Vous pouvez ensuite redimensionner le GIF en cliquant sur les coins de l’image et en les faisant glisser vers l’intérieur pour le réduire, ou vers l’extérieur pour l’agrandir.
• Si vos images présentent un changement de couleur important sur votre boutique en ligne par rapport à l’image d’origine, il est possible que vos images ne soient pas aux couleurs standard Rouge Vert Bleu (sRVB). Pour corriger ce changement de couleur, enregistrez votre fichier dans une application de retouche photo en tant que sRVB. Les termes courants sont « Optimiser pour le web », « Ajuster l’image pour le web » ou « Enregistrer pour le web ». En savoir plus sur les profils de couleur.
• Si vos images de produits sur vos pages de collection ne sont pas alignées, vous devrez peut-être ajuster le format des fichiers d’images de produits afin qu’ils aient le même rapport hauteur/largeur, puis charger à nouveau l’image de produit. Vous pouvez également utiliser une appli de retouche d’images du Shopify App Store.

Passez en revue les problèmes suivants pour votre problème spécifique et les étapes pour vous aider à le résoudre :

• Produits manquants : si vos produits sont absents de votre boutique en ligne, vous devrez peut-être vérifier le statut et vos canaux de vente dans la section Publication de votre produit dans votre interface administrateur Shopify. Vérifiez que le statut du produit est Actif et que le produit est disponible sur la Boutique en ligne.
• Collections manquantes : si vos collections sont absentes de votre boutique en ligne, vous devrez peut-être vérifier les canaux de vente dans la section Publication de la collection dans votre interface administrateur Shopify. Vérifiez que la collection est disponible sur la Boutique en ligne et qu’elle est ajoutée à vos menus.
• Collections affichées mais produits manquants : si vos collections s’affichent mais qu’il manque des produits, vous devrez peut-être examiner les filtres de balises de la collection dans vos paramètres de Menus. Vérifiez que le champ Filtrer la collection par balises ne contient aucune balise qui pourrait empêcher l’affichage de produits.
• Devise incorrecte : si votre devise ne s’affiche pas correctement pour les produits ou dans vos collections, vous pouvez examiner l’affichage de la devise dans la section Valeurs par défaut de la boutique sous Paramètres > Général pour vérifier qu’il n’y a pas de code supplémentaire. En savoir plus sur le formatage de l’affichage de la devise pour vos clients.
• Certains produits s’affichent différemment : si certains produits ou certaines collections s’affichent différemment des autres, examinez le modèle de thème attribué aux produits ou aux collections dans votre interface administrateur Shopify.
• Impossible de modifier les modèles de produits ou de collections : si les modèles de produits ou de collections par défaut apparaissent grisés et non cliquables dans l’éditeur de thème, vous devez rendre au moins un produit ou une collection disponible pour le canal de vente Boutique en ligne. Vous ne pouvez pas modifier ces modèles par défaut si aucun produit ou aucune collection n’est disponible pour prévisualiser les modifications. En savoir plus sur la modification de la disponibilité d’une collection et la configuration de la disponibilité des produits dans vos canaux de vente.

Si votre contenu traduit ne s’affiche pas correctement ou est absent de votre boutique en ligne, il se peut que les traductions soient obsolètes ou manquantes pour ce contenu. Le contenu peut également se trouver dans un modèle spécifique pour un marché. Chaque fois que vous ajoutez du nouveau contenu dans votre langue par défaut, n’oubliez pas de relancer la traduction automatique ou d’ajouter manuellement de nouvelles traductions.

Les statuts suivants peuvent s’appliquer au contenu traduit :

• Traduit : le contenu a des traductions disponibles.
• Obsolète : le contenu dans la langue par défaut a été mis à jour, mais les traductions ne reflètent aucune mise à jour.
• Non traduit : il n’y a aucune traduction pour ce type de contenu.

Lorsque vous examinez votre contenu traduit, mettez à jour tout contenu non traduit ou obsolète et votre contenu traduit devrait alors s’afficher correctement.

En savoir plus sur la traduction et la localisation de votre boutique.

Si les informations affichées dans votre boutique en ligne et votre éditeur de thème ne correspondent pas, examinez le modèle de thème que vous êtes en train de modifier. Vous devrez peut-être modifier vos modèles de thème pour qu’ils affichent les informations correctes.

Les dérogations au marché vous permettent de créer différentes boutiques en ligne pour différents marchés et d’afficher du contenu traduit. Il est possible que vous ayez travaillé par inadvertance au sein d’un marché spécifique ou d’un marché B2B lors de vos mises à jour. Repérez le contenu à l’aide du menu déroulant Marché dans votre éditeur de thème pour vous assurer qu’il se trouve sur les bons marchés.

En savoir plus sur les dérogations au marché.

Tous les thèmes disponibles dans la boutique des thèmes de Shopify sont des thèmes adaptatifs, ce qui signifie que le thème s’adapte à la taille de l’écran. Dans l’éditeur de thème, vous pouvez changer la vue de la taille de l’écran pendant la modification du thème pour vérifier que vos pages et vos images s’affichent correctement. En savoir plus sur l’affichage des différentes tailles d’écran dans l’éditeur de thème.

De nombreuses sections et de nombreux blocs ont des paramètres pour mobile que vous pouvez personnaliser. Par exemple, vous pouvez définir le Nombre de colonnes sur mobile dans la section Produits connexes. Vous pouvez examiner les paramètres de section relatifs à la version mobile pour chaque modèle afin de résoudre les problèmes d’affichage sur les écrans de mobile.

Certaines fonctionnalités du thème peuvent s’afficher différemment sur mobile et sur ordinateur de bureau afin de garantir que le thème est accessible sur toutes les tailles d’écran. Par exemple, sur un écran d’ordinateur de bureau, votre diaporama peut avoir une superposition de texte, où le texte s’affiche sur l’image, souvent avec une opacité de couleur d’image ou une ombre portée. Cependant, sur les écrans de mobile, le texte peut s’afficher sous le diaporama. Il s’agit d’une fonctionnalité d’accessibilité délibérée, conçue pour que le texte soit lisible sur n’importe quelle taille d’écran. Si le texte était plutôt en superposition, il s’afficherait en très petits caractères sur mobile, ce qui le rendrait difficile à lire.

Si votre section de collection en vedette ou vos pages de collection affichent des tailles incohérentes ou ne sont pas alignées lorsque vous consultez votre boutique en ligne sur mobile, cela peut être dû à des rapports d’aspect incohérents. Les grilles d’images, telles que les images de produit qui s’affichent dans une collection ou une collection en vedette, sont conçues pour être adaptatives à la taille de l’écran. Si vos images dans la grille d’images ont des rapports d’aspect incohérents, elles peuvent s’afficher différemment en fonction de la taille de l’écran. Les images de produit carrées de 2 048 px par 2 048 px fonctionnent généralement mieux dans les grilles de produits. Mettez à jour vos images pour qu’elles aient un rapport d’aspect cohérent afin de les optimiser pour toutes les tailles d’écran. En savoir plus sur le rapport d’aspect des images.

Il arrive que du code HTML ajouté dans votre éditeur de texte enrichi entre en conflit avec le code de votre thème. Si le problème ne se présente que sur une seule page, par exemple une page de produit, une page ou un article de blog, cela peut être dû à du code HTML superflu. Ce dernier peut parfois être ajouté en copiant-collant du texte provenant d’un autre site.

Examen du code HTML

Vous pouvez examiner le code HTML dans l’éditeur de texte enrichi.

Étapes :

1. Accédez à la page dans votre interface administrateur.
2. Cliquez sur le bouton Afficher le code HTML pour examiner le code HTML.
3. Repérez tout code HTML susceptible de causer des problèmes d’affichage et supprimez-le.
4. Cliquez sur Enregistrer.

Suppression de la mise en forme

Vous pouvez surligner une partie du texte et effacer la mise en forme HTML.

Étapes :

1. Accédez à la page dans votre interface administrateur.
2. Surlignez le texte présentant les problèmes de mise en forme.
3. Cliquez sur le bouton 🚫.
4. Cliquez sur Enregistrer.

En savoir plus sur l’éditeur de texte enrichi.

Si votre boutique en ligne inclut du code qui redirige les utilisateurs vers des URL qui ne sont pas connectées à votre boutique, vérifiez que la redirection a bien été désactivée lorsque vous consultez l’éditeur de thème.

Par exemple, ce type de redirection peut être ajouté à une boutique en ligne pour diriger les clients vers différentes boutiques Shopify en fonction de leur emplacement. Ce type de code de redirection peut exister dans votre thème ou dans une appli que vous avez installée.

Pour vérifier que votre redirection n’interfère pas avec l’expérience de l’éditeur, utilisez une référence à la variable window.Shopify.designMode dans JavaScript pour désactiver la redirection lorsque vous consultez l’éditeur de thème. Cette variable est définie sur true lorsque la boutique en ligne est chargée dans l’éditeur, et sur false dans le cas contraire.

Si vous avez des blocs réductibles ou d’autres blocs de thème affichant le même contenu sur toutes les pages de produits, vous devez configurer des sources dynamiques avec des champs méta. Ce problème survient généralement lorsque les marchands ajoutent à un produit des informations qui lui sont propres, telles qu’une liste d’ingrédients ou des instructions d’entretien, mais que ces informations s’affichent sur tous les produits.

Les blocs réductibles affichent le même texte sur tous les produits

Lorsque vous ajoutez du contenu directement à un bloc réductible dans votre éditeur de thème, ce contenu apparaît sur toutes les pages de produit. Pour afficher du contenu spécifique au produit, vous devez utiliser des sources dynamiques avec des champs méta :

1. Dans votre interface administrateur Shopify, accédez à Paramètres > Champs méta > Produits.
2. Cliquez sur Ajouter une définition.
3. Saisissez un Nom pour votre champ méta, puis cliquez sur Sélectionner le type de contenu.
4. Sélectionnez Texte et Texte sur plusieurs lignes.
5. Cliquez sur Enregistrer.
6. Accédez à une page de produit dans votre interface administrateur et faites défiler la page jusqu’à la section des champs méta en bas de la page.
7. Ajoutez votre contenu spécifique au produit dans le champ méta que vous avez créé.
8. Dans votre éditeur de thème, accédez au modèle de produit et recherchez votre section Ligne réductible.
9. Dans le paramètre Contenu de la ligne, cliquez sur le bouton .
10. Sélectionnez votre champ méta parmi les options disponibles.
11. Enregistrez vos modifications.

Désormais, chaque produit affichera son propre contenu lorsque le champ méta sera rempli, et aucun contenu ne s’affichera si le champ méta est vide pour ce produit.

En savoir plus sur l’affichage des champs méta sur votre boutique en ligne et sur l’utilisation des champs méta et des métaobjets avec des sources dynamiques.

S’il y a une erreur de syntaxe dans le code de votre thème, un message d’avertissement Erreur HTML détectée ou Erreur de thème s’affiche dans votre éditeur de thème. Le message d’erreur affiche le fichier Liquid qui contient l’erreur.

Un message d’avertissement Le thème que vous recherchez est introuvable peut s’afficher en cas de code HTML défectueux. Une page peut ne pas se charger dans l’éditeur de thème pour de nombreuses raisons, notamment les suivantes :

• problèmes de connexion réseau
• code Liquid non valide dans votre thème

Vous pouvez repérer les modifications dans le code de votre thème et corriger le code, ou rétablir la version du fichier antérieure à la modification du code.

Étapes :

1. Cliquez sur le fichier de section .liquid lié dans le message d’erreur ou examinez les fichiers pour y trouver les modifications récentes. Cela vous mènera à la page Modifier le code HTML/feuilles de style en cascade (CSS), et le fichier s’ouvrira dans l’éditeur de code.
2. Parcourez le code dans le fichier et essayez de trouver du code HTML ou Liquid non valide. L’éditeur de code affiche les erreurs de syntaxe potentielles en rouge. Voici quelques-uns des problèmes courants :
   • Balises HTML de fermeture supplémentaires, par exemple, une balise de fermeture </div> sans balise d’ouverture <div>
   • Balises HTML non fermées supplémentaires, par exemple, une balise d’ouverture <div> sans balise de fermeture </div>
   • Balises HTML malformées, par exemple, <div class="my-class" sans >
   • Code Liquid malformé
   • Code HTML corrompu dans un fichier d’extrait de thème inclus
3. Une fois que vous avez trouvé le problème, corrigez le code dans votre fichier de thème ou restaurez une version antérieure du code en la sélectionnant dans Modifications récentes.
4. Cliquez sur Enregistrer.
5. Cliquez sur Modifier le thème pour revenir à l’éditeur de thème, et confirmez que le message d’erreur a disparu.
6. Accédez à votre boutique en ligne pour vérifier qu’elle s’affiche comme prévu.

Erreur « Exceeded maximum number of unique handles »

Si un message d’erreur Liquid tel que « Exceeded maximum number of unique handles for all_products » s’affiche sur votre page d’accueil, cela signifie généralement que vous avez ajouté trop de sections de produit en vedette à votre page d’accueil (généralement plus de 20 sections dans la plupart des thèmes).

Pour résoudre ce problème :

1. Dans votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.
2. Recherchez votre thème actuel et cliquez sur Modifier le thème.
3. Accédez à votre page d’accueil.
4. Supprimez certaines sections de produit en vedette pour ne pas dépasser les limites du thème.
5. Envisagez plutôt d’utiliser des sections de collection en vedette, qui peuvent afficher plusieurs produits plus efficacement et améliorer la performance de votre boutique.

Les icônes de paiement sont généralement incluses par défaut dans le pied de page de la plupart des thèmes pour indiquer aux clients les moyens de paiement que vous acceptez. Si les icônes de paiement n’apparaissent pas dans le pied de page de votre thème, vous pouvez vérifier les points suivants :

1. Dans votre éditeur de thème, accédez à la section Pied de page et vérifiez que le paramètre Afficher les icônes de paiement est activé.
2. Dans votre interface administrateur Shopify, allez à Paramètres > Paiements et vérifiez qu’au moins un moyen de paiement est actif. Certains moyens de paiement peuvent nécessiter la finalisation de la configuration du compte avant que leurs icônes ne s’affichent.
3. Si vous utilisez une passerelle de paiement tierce, il se peut que les icônes de paiement n’apparaissent pas en raison des limitations de la plateforme.

Si vous avez vérifié ces paramètres et que les icônes de paiement ne s’affichent toujours pas, vous devrez peut-être obtenir de l’assistance pour votre thème.