Schnelle Lösung mit Thunder
Thunder ist kein Theme-Code-Debugger, passt aber zum QA-Workflow: Beheben Sie den Layoutfehler in einem doppelten Theme und testen Sie dann die Produktseite auf Bildgewicht, Lazy-Loading-Fehler, Skripte von Drittanbietern und mobile Core Web Vitals-Regressionen.
Kombinieren Sie diese Checkliste mit dem Leitfaden zur Shopify-Geschwindigkeitsoptimierung, das Leitfaden zur Shopify-Bildoptimierungund die Shopify-Geschwindigkeitsoptimierungsdienst wenn Produktmedienänderungen auch die Ladegeschwindigkeit beeinträchtigen.
Installieren Sie ThunderÜberprüfen Sie zunächst, ob die Bilder tatsächlich geladen werden
Öffnen Sie die Produktseite in Chrome DevTools und überprüfen Sie das Produktbild. Wenn das Bild eine gültige Shopify-CDN-URL hat und die Registerkarte „Netzwerk“ eine Antwort von 200 zurückgibt, ist das Asset nicht das Hauptproblem.
Schauen Sie sich als Nächstes das Bild und jeden übergeordneten Wrapper an. Wenn Sie auf dem Desktop eine Breite oder Höhe von 0 Pixel sehen, ist das Layout ausgeblendet. Aus diesem Grund hat das Leeren des Caches oder das Neuzuweisen von Bildern keine Wirkung.
- Überprüfen Sie die Bild-URL direkt in einem neuen Tab.
- Überprüfen Sie die Breite und Höhe der Produktmedienverpackung.
- Vergleichen Sie Desktop- und mobile Computerstile.
- Suchen Sie nach Medienabfragen nur für den Desktop, die das Galerieraster verändern.
Überprüfen Sie die Produktmedienspalte und das Raster-CSS
Die meisten modernen Shopify-Themes stellen Produktseiten als zweispaltiges Raster dar: Medien auf der einen Seite, Produktinformationen auf der anderen. Wenn eine Anpassung die Rastervorlage, die Spaltenspanne oder die maximale Breite ändert, kann die Medienseite ausgeblendet werden, während der Rest der Produktseite normal aussieht.
Überprüfen Sie in DevTools Selektoren ähnlich wie Mediengalerie, .product__media, .product-information__media, .product-media-containerund alle themenspezifischen Produktrasterverpackungen. Die genauen Klassennamen variieren je nach Thema, aber das Symptom ist dasselbe: Das Bild befindet sich in einem Wrapper ohne sichtbaren Raum.
Machen Sie das letzte CSS in einem duplizierten Theme rückgängig, nicht im Live-Store
Duplizieren Sie das Design und entfernen Sie zunächst nur die neuesten benutzerdefinierten CSS- oder Produktabschnittsänderungen. Reißen Sie nicht die gesamte Produktvorlage heraus, es sei denn, es ist unbedingt erforderlich. Bei einem Nur-Desktop-Bildfehler handelt es sich häufig um eine kleine Regel, die eine Rasterspalte, den Anzeigemodus oder das Überlaufverhalten geändert hat.
Wenn das Bild wieder angezeigt wird, fügen Sie die entfernten Regeln nacheinander wieder hinzu. Dadurch erhalten Sie den genauen Selektor, der den Zusammenbruch verursacht hat, und müssen nicht noch einmal raten.
Deaktivieren Sie App-Einbettungen und global injiziertes CSS
Wenn das Problem bei mehreren Themes auftritt, überprüfen Sie alles, was sich auf jedes Theme auswirken kann: App-Einbettungen, benutzerdefinierte Pixel, Seitenersteller, Produktoptions-Apps, Sticky-Cart-Apps und globale CSS-Snippets, die in die Theme-Einstellungen eingefügt werden.
Deaktivieren Sie nicht unbedingt erforderliche App-Einbettungen im duplizierten Design, laden Sie die Produktseite neu und fügen Sie sie dann einzeln wieder hinzu. Für eine umfassendere Skriptbereinigung verwenden Sie die Leitfaden für Skripte von Drittanbietern und die SEO/App-Skript-Überschneidungsleitfaden.
Testen Sie die Geschwindigkeit erneut, nachdem das Bild sichtbar ist
Sobald die Galerie funktioniert, prüfen Sie, ob das wiederhergestellte Medium zu schwer ist oder falsch geladen wurde. Produktbilder können sichtbar sein und dennoch LCP schaden, wenn das erste Galeriebild übergroß oder verzögert ist oder hinter zu viel JavaScript geladen wird.
Verwenden Sie die Shopify LCP-Leitfaden und Core Web Vitals-Leitfaden nach der Layoutkorrektur, insbesondere für bildlastige Produktseiten.
FAQ
Warum werden Shopify-Produktbilder auf Mobilgeräten angezeigt, aber auf dem Desktop verschwinden?
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?
Normalerweise nicht. Wenn die Bild-URLs direkt geladen werden und die Bilder in geringerer Breite angezeigt werden, werden die Assets korrekt zugewiesen. Das Problem liegt normalerweise im Theme-CSS, in Rasterspalten, in einer Mediengalerie-Einstellung oder in einer App/benutzerdefinierten Codeänderung des Produktseitenlayouts.
Was sollte ich zuerst in DevTools überprüfen?
Untersuchen Sie die Produktmedienhülle und prüfen Sie deren berechnete Breite und Höhe. Suchen Sie nach Selektoren wie Produktmedien, Mediengalerie, Diashow-Folie, Produktinformationsmedien, Rastervorlagenspalten, Anzeige, Überlauf und Nur-Desktop-Medienabfragen.
Können Speed-Apps oder App-Code Fehler beim Produktbild-Layout verursachen?
Jede App oder jeder benutzerdefinierte Code, der globales CSS einfügt oder das Lazy Loading/Produktmedienverhalten ändert, kann Layoutfehler aufdecken. Testen Sie ein dupliziertes Theme mit deaktivierten App-Einbettungen und fügen Sie dann die Änderungen einzeln wieder hinzu.
Korrigieren Sie das Medienlayout und sorgen Sie dann für eine schnelle Produktseite
Thunder trägt dazu bei, Reibungsverluste bei Bildern, Skripten und Core Web Vitals zu reduzieren, nachdem Änderungen am Design der Produktseite korrekt funktionieren.
Installieren Sie Thunder auf Shopify