Correzione rapida con Thunder
Thunder non è un debugger di codici di temi, ma si adatta al flusso di lavoro del QA: correggi il bug di layout in un tema duplicato, quindi testa la pagina del prodotto per il peso dell'immagine, gli errori di caricamento lento, gli script di terze parti e le regressioni dei Core Web Vitals mobili.
Abbina questa lista di controllo al Guida all'ottimizzazione della velocità di Shopify, il Guida all'ottimizzazione delle immagini di Shopifye il Servizio di ottimizzazione della velocità di Shopify se anche i cambiamenti dei supporti del prodotto incidono sulla velocità di caricamento.
Installa ThunderInnanzitutto, verifica se le immagini vengono effettivamente caricate
Apri la pagina del prodotto in Chrome DevTools e controlla l'immagine del prodotto. Se l'immagine ha un URL CDN Shopify valido e la scheda Rete restituisce una risposta 200, la risorsa non è il problema principale.
Successivamente, guarda l'immagine e ciascun wrapper principale. Se vedi la larghezza o l'altezza a 0px sul desktop, hai un layout compresso. Ecco perché svuotare la cache o riassegnare le immagini non fa nulla.
- Controlla l'URL dell'immagine direttamente in una nuova scheda.
- Ispezionare la larghezza e l'altezza dell'involucro del supporto del prodotto.
- Confronta gli stili computerizzati desktop e mobili.
- Cerca media query solo per desktop che alterano la griglia della galleria.
Controlla la colonna multimediale del prodotto e il CSS della griglia
I temi Shopify più moderni visualizzano le pagine dei prodotti come una griglia a due colonne: media da un lato, informazioni sul prodotto dall'altro. Se una personalizzazione modifica il modello di griglia, l'estensione delle colonne o la larghezza massima, il lato multimediale può comprimersi mentre il resto della pagina del prodotto appare normale.
In DevTools, ispeziona selettori simili a galleria multimediale, .product__media, .product-information__media, .product-media-containere qualsiasi wrapper della griglia del prodotto specifico per il tema. I nomi esatti delle classi variano in base al tema, ma il sintomo è lo stesso: l'immagine esiste all'interno di un wrapper senza spazio visibile.
Annulla i CSS recenti in un tema duplicato, non nel negozio live
Duplica il tema e rimuovi prima solo le modifiche più recenti al CSS personalizzato o alla sezione del prodotto. Non strappare l'intero modello del prodotto a meno che non sia necessario. Un bug di immagine solo desktop è spesso una piccola regola che ha modificato una colonna della griglia, una modalità di visualizzazione o un comportamento di overflow.
Se l'immagine ritorna, aggiungi nuovamente le regole rimosse una per una. Questo ti dà il selezionatore esatto che causa il collasso invece di un altro giro di ipotesi.
Disabilita gli incorporamenti di app e i CSS globali inseriti
Se il problema si verifica su più temi, controlla tutto ciò che può influire su ogni tema: incorporamenti di app, pixel personalizzati, generatori di pagine, app con opzioni prodotto, app con carrello adesivo e snippet CSS globali incollati nelle impostazioni del tema.
Disattiva gli incorporamenti di app non essenziali nel tema duplicato, ricarica la pagina del prodotto, quindi aggiungili di nuovo uno alla volta. Per una pulizia più ampia degli script, utilizzare il file Guida agli script di terze parti e il Guida alla sovrapposizione degli script SEO/app.
Testare nuovamente la velocità dopo che l'immagine è visibile
Una volta che la galleria funziona, controlla se il supporto ripristinato è troppo pesante o caricato lentamente in modo errato. Le immagini dei prodotti possono essere visibili e danneggiare comunque LCP se la prima immagine della galleria è sovradimensionata, ritardata o caricata dietro troppo JavaScript.
Usa il Guida Shopify LCP e Guida ai Core Web Vitals dopo la correzione del layout, soprattutto per le pagine dei prodotti ricche di immagini.
FAQ
Perché le immagini dei prodotti Shopify vengono visualizzate sui dispositivi mobili ma scompaiono sul desktop?
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?
Di solito non. Se gli URL delle immagini vengono caricati direttamente e le immagini vengono visualizzate con larghezze inferiori, le risorse vengono assegnate correttamente. Il problema è solitamente il CSS del tema, le colonne della griglia, l'impostazione di una galleria multimediale o il codice personalizzato/dell'app che modifica il layout della pagina del prodotto.
Cosa devo controllare prima in DevTools?
Ispezionare l'involucro del supporto del prodotto e controllarne la larghezza e l'altezza calcolate. Cerca selettori come media del prodotto, galleria multimediale, diapositiva della presentazione, media delle informazioni sul prodotto, colonne del modello di griglia, visualizzazione, overflow e query multimediali solo per desktop.
Le app veloci o il codice delle app possono causare bug nel layout delle immagini del prodotto?
Qualsiasi app o codice personalizzato che inserisce CSS globale o modifica il comportamento di caricamento lento/media del prodotto può esporre bug di layout. Prova un tema duplicato con gli incorporamenti di app disabilitati, quindi aggiungi le modifiche una alla volta.
Correggi il layout multimediale, quindi mantieni veloce la pagina del prodotto
Thunder aiuta a ridurre l'attrito tra immagini, script e Core Web Vitals dopo che le modifiche al tema della pagina del prodotto funzionano correttamente.
Installa Thunder su Shopify