Résolution de problèmes affectant le thème de votre boutique en ligne

De nombreuses circonstances différentes peuvent entraîner des problèmes d’affichage de votre thème, comme la disparition ou le dysfonctionnement d’éléments ou d’autres problèmes d’affichage. Ceci peut être dû au code tiers ou à l’application qui est en conflit avec le thème ou à des personnalisations de code personnalisées. Il se peut également que certains paramètres de votre interface administrateur Shopify doivent être ajustés. Par exemple, vous devrez peut-être revoir votre contenu traduit, vos produits, vos collections, vos menus ou vos marchés.

Si des problèmes persistent avec votre thème après avoir suivi les étapes de ce guide, vous devrez peut-être contacter l’équipe d’assistance de votre thème. En savoir plus sur la prise en charge des thèmes.

Sur cette page

Localiser la source du problème

La première étape pour le résoudre consiste à localiser la source du problème dans votre thème. Essayez les étapes suivantes pour vous aider à localiser la source du problème :

Vous pouvez consulter la page de statut Shopify pour connaître tous les problèmes connus qui pourraient affecter votre boutique en ligne. Si aucun problème similaire n’est répertorié, vous pouvez poursuivre vos recherches.
Le problème peut être lié à votre appareil. Les problèmes locaux résultent généralement des paramètres de l’appareil ou du navigateur, ou des problèmes de connexion Internet. Essayez les étapes suivantes pour vous assurer que le problème n’est pas local et qu’il peut être reproduit sur d’autres appareils, navigateurs ou connexions Internet :
- Effacez le cache et les cookies de votre navigateur. Si vous êtes connecté(e) au Centre d’aide de Shopify avec votre compte Shopify, le fait d’effacer le cache et les cookies de votre navigateur vous déconnecte de votre compte. Si vous utilisez l’assistant virtuel du centre d’aide, le fait d’effacer le cache et les cookies de votre navigateur réinitialise l’historique de votre chat et vous déconnecte de votre compte, et vous devez alors entamer une nouvelle conversation avec l’assistant virtuel du centre d’aide.
- Essayez le mode de navigation privée, un autre appareil ou l’application Shopify.
- Essayez d’utiliser les données mobiles ou une autre connexion Internet.
- Assurez-vous que votre navigateur est à jour.
- Veillez à ce que le navigateur ne soit pas configuré pour bloquer tous les cookies, car certaines applications peuvent ne pas s’afficher correctement sans les cookies.
- Assurez‑vous de ne pas utiliser de réseau privé virtuel (VPN) ou d’activer un pare‑feu qui bloque Shopify.
Si vous rencontrez toujours le problème sur d’autres appareils, navigateurs ou connexions Internet, le problème n’est pas un problème local et peut être répliqué. La localisation du problème sur un autre thème est l’étape suivante pour localiser la source du problème. Visitez le Theme Store, installez une nouvelle version du thème et testez si le problème est toujours présent sur la dernière version du thème. Il est également pratique d’installer un thème différent, tel qu’un thème Shopify gratuit. Vous pouvez ainsi déterminer si le problème est dû à ce thème spécifique ou si tous les thèmes rencontrent le même problème. Après avoir testé d’autres thèmes, les étapes suivantes peuvent être envisagées en fonction de la manière dont le problème s’est présenté :
- Si le problème est uniquement présent sur votre thème actuel et qu’il s’agit d’une version mise à jour et non personnalisée du thème, vous devrez peut-être obtenir une assistance pour votre thème.
- Si votre problème est uniquement présent sur le thème actuel, il se peut qu’un code de thème soit à l’origine des problèmes. Si vous avez récemment mis à jour votre code de thème, vous pouvez revenir à une ancienne version de votre code de thème. Si vous n’avez pas modifié le code dans le thème, vous devez peut-être revoir les paramètres de votre thème. Par exemple, si le bouton Ajouter au panier ne s’affiche pas, examinez les couleurs des boutons dans les paramètres de votre thème et assurez-vous qu’ils sont de couleurs différentes et contrastées.
- Si le problème est présent sur tous les thèmes, il peut être dû aux paramètres, applications ou autres problèmes de votre interface administrateur Shopify.
Le problème peut être à partir d’une application. Si vous avez récemment installé ou mis à jour une application qui affecte votre boutique en ligne, vous pouvez la désinstaller temporairement. Si le problème ne survient plus après la désinstallation de l’application, vous pouvez contacter l’équipe d’assistance du développeur de l’application pour obtenir de l’aide afin que l’application s’affiche correctement sur votre boutique en ligne. En savoir plus sur la façon d’obtenir de l’aide pour vos applications. Si le problème persiste après la désinstallation de l’application, l’application n’est pas la source du problème.

Les images ne s’affichent pas correctement

Les images peuvent s’afficher différemment de ce que vous attendez, mais cela peut être dû à l’incompatibilité de l’image elle-même avec l’utilisation que vous en faites dans votre thème. Assurez-vous que les dimensions de l’image sont correctes sur l’image que vous utilisez. Examinez la liste suivante des problèmes d’affichage courants susceptibles de se produire lors de la mise en ligne d’une image incompatible :

Si votre en-tête s’affiche plus grand et que l’image de votre logo s’affiche plus petite que prévu, cela peut être dû à un espace blanc dans le fichier image du logo. Les espaces blancs dans le fichier image du logo peuvent entraîner un affichage plus petit du logo et un affichage plus grand de votre en-tête. Modifiez le fichier image pour vous assurer 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, il s’agit d’une conception visant à garantir un affichage homogène des images sur les téléphones portables et sur les ordinateurs de bureau. Le contenu s’affichant en plus petit sur un écran mobile, il est possible de perdre de nombreux détails en réduisant la taille du contenu. Pour cela, le contenu est recadré afin de ne perdre aucun détail. Une image en format portrait, plus longue que large, peut également occuper un espace important sur un ordinateur de bureau. C’est pourquoi les images de diaporamas présentent une hauteur maximale. Vous pouvez ajouter une mise au point à vos images de diaporama pour vous assurer de garder la mise au point au centre de l’image du diaporama. Si l’ajout d’une mise au point ne suffit pas, vous pouvez essayer de trouver une image qui convienne à toutes les tailles d’écran. En savoir plus sur les bonnes pratiques pour les diaporamas.
Si une image GIF ne s’affiche pas correctement après avoir été ajoutée à votre boutique en ligne à l’aide de l’éditeur de texte enrichi, par exemple dans la description du produit ou dans un article de blog, ceci peut être dû à la taille de l’image. Vous pouvez corriger cela en cliquant sur le GIF dans l’éditeur de texte enrichi, puis sur Modifier l’image. Dans le menu déroulant Taille de l’image, sélectionnez Original. 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 rendre plus petit ou vers l’extérieur afin de le rendre plus grand.
Si vos images présentent un changement de couleur significatif sur votre boutique en ligne par rapport à l’image d’origine, il se peut que vos images ne soient pas dans les couleurs standard Rouge Vert Bleu (sRBG). Pour corriger ce changement de couleur, enregistrez votre fichier dans une application de modification de photo sous sRGB. Les termes courants sont « Optimiser le web », « Ajuster l’image pour le web » ou « Enregistrer pour le web ». En savoir plus sur les profils de couleurs.
Si les images de vos produits sur les pages de votre collection ne sont pas alignées, vous devez peut-être ajuster le rapport d’aspect dans les fichiers d’images de produits afin d’obtenir le même rapport hauteur/largeur, puis télécharger à nouveau l’image de produit. Vous pouvez également utiliser une application d’édition d’images depuis Shopify App Store.

Les produits ou les collections ne s’affichent pas correctement

Si vos produits manquent à votre boutique en ligne, vous devrez peut-être consulter le statut et vos canaux de vente dans la section Publication de votre produit dans votre interface administrateur Shopify. Assurez-vous que le statut du produit est actif et qu’il est disponible sur la boutique en ligne.

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. Assurez-vous de la disponibilité de la collection pour la boutique en ligne. Vous devriez également veiller à ce que votre collection soit ajoutée à vos menus.

Si vos collections s’affichent, mais qu’il manque des produits, vous devrez peut-être revoir les filtres des balises de la collection dans vos paramètres Menus. Assurez-vous qu’il n’y a aucune balise dans le champ Filtrer la collection avec des balises qui pourraient empêcher l’affichage des produits.

Si votre devise ne s’affiche pas correctement pour les produits ou dans vos collections, vous pouvez vérifier l’affichage de la devise dans la section Défauts de la boutique dans Paramètres > Général pour vous assurer de l’absence de code supplémentaire. En savoir plus sur le formatage de l’affichage de la devise pour vos clients.

Si certains produits ou collections s’affichent différemment des autres, vous devrez peut-être revoir le modèle de thème attribué aux produits ou aux collections dans votre interface administrateur Shopify.

Contenu traduit qui ne s’affiche pas correctement

Si votre contenu traduit ne s’affiche pas correctement ou s’il manque dans votre boutique en ligne, il se peut que le contenu de votre contenu soit obsolète ou que certaines traductions manquent. Le contenu peut également être 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 d’exécuter à nouveau la traduction automatique ou d’en ajouter manuellement de nouvelles.

Les statuts suivants peuvent s’appliquer au contenu traduit :

Traduit : le contenu contient des traductions.
Obsolète : le contenu de la langue par défaut a été mis à jour, mais pas les traductions.
Non traduit : il n’existe pas de traduction pour ce type de contenu.

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

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

Les mises à jour de l’éditeur de thème ne s’affichent pas sur la boutique en ligne

Si votre boutique en ligne et votre éditeur de thème n’affichent pas les mêmes informations, examinez le modèle de thème que vous modifiez. Vous devrez peut-être apporter des modifications pour mettre à jour vos modèles de thème afin d’afficher les informations correctes. La personnalisation de la boutique vous permet de créer des boutiques en ligne différentes selon les marchés et d’afficher du contenu traduit. Vous avez peut-être travaillé par inadvertance sur un marché spécifique ou B2B lors de vos mises à jour. Recherchez le contenu dans votre éditeur de thème à l’aide du menu déroulant Contexte pour vous assurer qu’il se trouve dans les marchés appropriés.

En savoir plus sur la personnalisation des boutiques.

Différences dans votre thème entre les vues mobile et bureau

Tous les thèmes disponibles dans la boutique de thèmes 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 taille de l’écran pendant que vous modifiez votre thème pour vous assurer 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.

Un grand nombre de sections et de blocs disposent de paramètres mobiles que vous pouvez personnaliser. Par exemple, vous pouvez définir le Nombre de colonnes sur mobile dans la section Produits associés. Vous pouvez vérifier les paramètres de la section liés au mobile pour chaque type de page afin de résoudre les problèmes d’affichage sur des tailles d’écran mobile.

Certaines fonctionnalités du thème peuvent s’afficher différemment sur mobile et sur ordinateur afin de garantir que le thème est compatible avec toutes les tailles d’écran. Par exemple, sur une taille d’écran bureau, votre diaporama peut avoir une superposition de texte, où le texte s’affiche au-dessus de l’image, souvent avec une opacité de couleur de l’image ou une ombre du texte. Cependant, sur les tailles d’écran mobile, le texte peut s’afficher en dessous du diaporama. Il s’agit d’une fonctionnalité d’accessibilité conçue pour que le texte soit lisible sur n’importe quelle taille d’écran. Si le texte était une superposition, il s’afficherait très petit sur mobile, ce qui le rendrait difficile à lire.

Si la section de la collection présentée ou les pages de la collection s’affichent dans des tailles incohérentes ou ne sont pas alignées lorsque vous consultez votre boutique en ligne sur mobile, il peut s’agir d’un problème de proportions. Les grilles d’images, notamment les images de produits qui s’affichent dans une collection ou une collection mise en vedette, sont conçues pour s’adapter à la taille de l’écran. Si vos images présentent des proportions incohérentes dans la grille d’images, elles risquent de s’afficher différemment en fonction de la taille de l’écran. Les images de produits carrées de 2 048 x 2 048 pixels présentent mieux dans les grilles de produits. Mettez à jour vos images pour obtenir des proportions cohérentes compatibles pour toutes les tailles d’écran. En savoir plus sur les proportions de l’image.

Éditeur de texte enrichi

Il arrive parfois que le code HTML ajouté à votre éditeur de texte enrichi soit en conflit avec le code de votre thème. Si le problème est présent sur une seule page, telle qu’une page de produit, une page ou un article de blog, ceci peut être dû à un code HTML supplémentaire. Il est parfois possible d’ajouter cette valeur à partir d’un autre site.

Consulter le code HTML

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

Étapes :

Accédez à la page de votre interface administrateur.
Cliquez sur le bouton </> Afficher HTML pour consulter le code HTML.
Recherchez tout code HTML qui pourrait provoquer des problèmes d’affichage et supprimez-le.
Cliquez sur Enregistrer.

Effacer le formatage

Vous pouvez mettre en évidence une partie du texte et effacer le formatage HTML.

Étapes :

Accédez à la page de votre interface administrateur.
Mettez le texte en surbrillance avec les problèmes de formatage.
Cliquez sur le bouton 🚫.
Cliquez sur Enregistrer.

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

La page redirige vers une URL non prise en charge

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

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

Pour 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, de manière à désactiver la redirection lorsque vous visitez l’éditeur de thème. Cette variable est configurée sur true lorsque la boutique en ligne est chargée dans l’éditeur, et sur false lorsqu’elle ne l’est pas.

Messages d’erreur de code

En cas d’erreur de syntaxe dans le code de votre thème, un message d’avertissement HTML error found ou Theme error s’affiche dans votre éditeur de thème. Le message d’erreur affiche le fichier Liquid contenant l’erreur.

Un message d’avertissement The theme you're looking for couldn't be found peut s’afficher en cas d’interruption du code HTML. 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 localiser les modifications apportées au code de votre thème et corriger le code, ou revenir au fichier avant de modifier le code.

Étapes

Cliquez sur le fichier de la section .liquid dont le lien figure dans le message d’erreur ou vérifiez que les fichiers n’ont pas été modifiés récemment. Vous accédez ainsi à la page Modifier HTML/CSS, et le fichier s’ouvre dans l’éditeur de code.
Parcourez le code du fichier et essayez de trouver le code HTML ou Liquid non valide. L’éditeur de code indique les erreurs de syntaxe potentielles en rouge. Voici certains des problèmes les plus courants :
- Balises HTML de fermeture supplémentaires. Exemple : une fermeture </div> sans ouverture <div>
- Balises HTML supplémentaires non fermées. Exemple : une ouverture <div> sans fermeture </div>
- Balises HTML malformées. Exemple : <div class="my-class" sans >
- Code Liquid malformé
- Code HTML cassé dans un fichier d’extrait de thème inclus
Une fois le problème détecté, corrigez le code dans le fichier de votre thème ou annulez le code en sélectionnant une version antérieure dans Modifications récentes.
Cliquez sur Enregistrer.
Cliquez sur Personnaliser pour revenir à l’éditeur de thème et vérifiez que le message d’erreur a disparu.
Accédez à votre boutique en ligne pour vous assurer qu’elle s’affiche comme prévu.