Solution rapide avec Thunder
Thunder n'est pas un débogueur de code de thème, mais il s'adapte au flux de travail d'assurance qualité : corrigez le bug de mise en page dans un thème en double, puis testez la page produit pour le poids de l'image, les erreurs de chargement paresseux, les scripts tiers et les régressions mobiles Core Web Vitals.
Associez cette liste de contrôle au Guide d'optimisation de la vitesse Shopify Guide de l'application du tiroir de chariot, le Guide de révision de la vitesse de l'application Guide d'optimisation des images Shopify, et le Service d'optimisation de vitesse Shopify si les modifications du support du produit nuisent également à la vitesse de chargement.
Installer ThunderTout d'abord, prouvez si les images se chargent réellement
Ouvrez la page du produit dans Chrome DevTools et inspectez l'image du produit. Si l'image a une URL Shopify CDN valide et que l'onglet Réseau renvoie une réponse 200, l'actif n'est pas le problème principal.
Ensuite, regardez l'image et chaque wrapper parent. Si vous voyez une largeur ou une hauteur à 0 px sur le bureau, la mise en page est réduite. C'est pourquoi vider le cache ou réaffecter des images ne fait rien.
- Vérifiez l'URL de l'image directement dans un nouvel onglet.
- Inspectez la largeur et la hauteur de l'emballage du support du produit.
- Comparez les styles informatiques de bureau et mobiles.
- Recherchez les requêtes multimédias uniquement sur ordinateur qui modifient la grille de la galerie.
Vérifiez la colonne média du produit et la grille CSS
Les thèmes Shopify les plus modernes affichent les pages de produits sous la forme d'une grille à deux colonnes : les médias d'un côté, les informations sur le produit de l'autre. Si une personnalisation modifie le modèle de grille, l'étendue des colonnes ou la largeur maximale, le côté média peut s'effondrer tandis que le reste de la page produit semble normal.
Dans DevTools, inspectez les sélecteurs similaires à galerie média, .product__media, .product-information__media, .product-media-conteneuret tout emballage de grille de produit spécifique à un thème. Les noms exacts des classes varient selon le thème, mais le symptôme est le même : l'image existe dans un wrapper sans espace visible.
Annuler le CSS récent dans un thème en double, pas dans le live store
Dupliquez le thème et supprimez d'abord uniquement les modifications CSS personnalisées ou les sections de produits les plus récentes. Ne supprimez pas l’intégralité du modèle de produit, sauf si vous y êtes obligé. Un bug d’image sur le bureau uniquement est souvent une petite règle qui modifie une colonne de grille, un mode d’affichage ou un comportement de débordement.
Si l'image revient, ajoutez à nouveau les règles supprimées une par une. Cela vous donne le sélecteur exact provoquant l'effondrement au lieu d'une autre série de devinettes.
Désactiver l'intégration d'applications et le CSS injecté global
Si le problème apparaît sur plusieurs thèmes, vérifiez tout ce qui peut affecter chaque thème : intégrations d'applications, pixels personnalisés, générateurs de pages, applications d'options de produit, applications de panier collant et extraits de code CSS globaux collés dans les paramètres du thème.
Désactivez les intégrations d'applications non essentielles dans le thème en double, rechargez la page produit, puis ajoutez-les une à la fois. Pour un nettoyage de script plus large, utilisez le Guide des scripts tiers et le Guide de chevauchement des scripts SEO/application.
Retestez la vitesse une fois l'image visible
Une fois la galerie opérationnelle, vérifiez si le support restauré est trop lourd ou mal chargé. Les images de produits peuvent être visibles et néanmoins nuire au LCP si la première image de la galerie est surdimensionnée, retardée ou chargée avec trop de JavaScript.
Utilisez le Guide Shopify LCP et Guide des éléments essentiels du Web après le correctif de mise en page, en particulier pour les pages de produits contenant beaucoup d'images.
FAQ
Pourquoi les images des produits Shopify s'affichent-elles sur mobile mais disparaissent sur ordinateur ?
The most common cause is responsive CSS or product-template layout logic that gives the product media column zero width or zero height at desktop breakpoints. The images may still load from Shopify CDN, but the gallery container collapses so nothing is visible.
Does this mean the product images are missing from Shopify admin?
Pas habituellement. Si les URL des images se chargent directement et que les images apparaissent dans des largeurs plus petites, les ressources sont correctement attribuées. Le problème vient généralement du CSS du thème, des colonnes de la grille, d'un paramètre de galerie multimédia ou d'une mise en page de produit modifiée par une application/un code personnalisé.
Que dois-je inspecter en premier dans DevTools ?
Inspectez l'emballage du support du produit et vérifiez sa largeur et sa hauteur calculées. Recherchez des sélecteurs tels que les médias de produits, les galeries de médias, les diapositives de diaporama, les médias d'informations sur les produits, les colonnes de modèles de grille, l'affichage, le débordement et les requêtes multimédias réservées au bureau.
Les applications rapides ou le code d'application peuvent-ils provoquer des bugs de mise en page de l'image du produit ?
Toute application ou code personnalisé qui injecte du CSS global ou modifie le comportement du chargement paresseux/du média du produit peut exposer des bugs de mise en page. Testez dans un thème en double avec l’intégration d’applications désactivée, puis ajoutez les modifications une par une.
Corrigez la mise en page des médias, puis gardez la page produit rapide
Thunder aide à réduire les frictions entre les images, les scripts et les Core Web Vitals une fois que les modifications du thème de la page produit fonctionnent correctement.
Installez Thunder sur Shopify