Solución rápida con Thunder
Thunder no es un depurador de código de tema, pero se adapta al flujo de trabajo de control de calidad: corrija el error de diseño en un tema duplicado, luego pruebe la página del producto para ver el peso de la imagen, errores de carga diferida, scripts de terceros y regresiones de Core Web Vitals móviles.
Combine esta lista de verificación con la Guía de optimización de velocidad de Shopify, el Guía de optimización de imágenes de Shopify, y el Servicio de optimización de velocidad de Shopify si los cambios en los medios del producto también afectan la velocidad de carga.
Instalar TruenoPrimero, compruebe si las imágenes realmente se están cargando
Abra la página del producto en Chrome DevTools e inspeccione la imagen del producto. Si la imagen tiene una URL CDN de Shopify válida y la pestaña Red devuelve una respuesta 200, el activo no es el problema principal.
A continuación, mire la imagen y cada contenedor principal. Si ve un ancho o un alto de 0 px en el escritorio, el diseño está colapsado. Es por eso que borrar el caché o reasignar imágenes no sirve de nada.
- Verifique la URL de la imagen directamente en una nueva pestaña.
- Inspeccione el ancho y alto del envoltorio del medio del producto.
- Comparar estilos computacionales de escritorio y móviles.
- Busque consultas de medios solo de escritorio que alteren la cuadrícula de la galería.
Verifique la columna de medios del producto y la cuadrícula CSS
La mayoría de los temas modernos de Shopify muestran las páginas de productos como una cuadrícula de dos columnas: medios en un lado, información del producto en el otro. Si una personalización cambia la plantilla de la cuadrícula, la extensión de las columnas o el ancho máximo, el lado de los medios puede colapsar mientras que el resto de la página del producto parece normal.
En DevTools, inspeccione selectores similares a galería-media, .product__media, .información-producto__medios, .contenedor-medios-productoy cualquier contenedor de cuadrícula de productos específico del tema. Los nombres exactos de las clases varían según el tema, pero el síntoma es el mismo: la imagen existe dentro de un contenedor sin espacio visible.
Deshacer CSS reciente en un tema duplicado, no en la tienda activa
Duplique el tema y elimine primero solo el CSS personalizado más reciente o los cambios en la sección de productos. No arranque toda la plantilla del producto a menos que sea necesario. Un error de imagen solo de escritorio suele ser una pequeña regla que cambió una columna de la cuadrícula, el modo de visualización o el comportamiento de desbordamiento.
Si la imagen vuelve, agregue las reglas eliminadas una por una. Eso le da el selector exacto que causa el colapso en lugar de otra ronda de conjeturas.
Deshabilitar aplicaciones incrustadas y CSS inyectado global
Si el problema aparece en varios temas, verifique todo lo que pueda afectar a cada tema: incrustaciones de aplicaciones, píxeles personalizados, creadores de páginas, aplicaciones de opciones de productos, aplicaciones de carrito adhesivo y fragmentos de CSS globales pegados en la configuración del tema.
Desactive las inserciones de aplicaciones no esenciales en el tema duplicado, vuelva a cargar la página del producto y luego vuelva a agregarlas una a la vez. Para una limpieza de scripts más amplia, utilice el guía de scripts de terceros y el Guía de superposición de scripts de aplicación/SEO.
Vuelva a probar la velocidad después de que la imagen sea visible
Una vez que la galería funcione, verifique si los medios restaurados son demasiado pesados o están cargados de forma diferida incorrectamente. Las imágenes de productos pueden ser visibles y aun así dañar el LCP si la primera imagen de la galería tiene un tamaño demasiado grande, está retrasada o cargada con demasiado JavaScript.
Utilice el Guía Shopify LCP y Guía de elementos básicos de Web Vitals después de la corrección del diseño, especialmente para páginas de productos con muchas imágenes.
FAQ
¿Por qué las imágenes de productos de Shopify se muestran en el móvil pero desaparecen en el escritorio?
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?
Generalmente no. Si las URL de las imágenes se cargan directamente y las imágenes aparecen en anchos más pequeños, los recursos se asignan correctamente. El problema suele ser el CSS del tema, las columnas de la cuadrícula, una configuración de galería de medios o un código personalizado o de aplicación que cambia el diseño de la página del producto.
¿Qué debo inspeccionar primero en DevTools?
Inspeccione el envoltorio del medio del producto y verifique su ancho y alto calculados. Busque selectores como medios de productos, galería de medios, presentación de diapositivas, medios de información de productos, columnas de plantilla de cuadrícula, visualización, desbordamiento y consultas de medios solo de escritorio.
¿Las aplicaciones rápidas o el código de la aplicación pueden causar errores en el diseño de la imagen del producto?
Cualquier aplicación o código personalizado que inyecte CSS global o cambie el comportamiento de carga diferida/medios del producto puede exponer errores de diseño. Pruebe en un tema duplicado con la incrustación de aplicaciones deshabilitada, luego agregue los cambios uno a la vez.
Corrija el diseño de los medios y luego mantenga la página del producto rápida
Thunder ayuda a reducir la fricción de imágenes, secuencias de comandos y Core Web Vitals después de que los cambios en el tema de la página del producto funcionan correctamente.
Instalar Thunder en Shopify