Playbook · Shopify product media not loading
The product media area is blank on the PDP.
Written for a Shopify DTC owner whose product media gallery is blank, missing, or only partly rendered on the live product page. Hold one product and one published theme constant: prove the product record, media types, template, section settings, and render path before changing code. This is not a CDN URL 404, a zoom/lightbox interaction bug, or lazy loading hiding an above-fold image. No earnings claims.
Nico at Latch AI Ops · Sep 16, 2026 · ~10 minute read
01
First, name the missing surface.
This page is for a product media rendering failure: the PDP loads, but the gallery, featured image, video, or 3D media region is empty or incomplete. A broken image URL or CDN response belongs in CDN images broken; a gallery that renders but will not open a lightbox belongs in product image zoom; an image delayed or hidden above the fold belongs in lazy load hiding above fold.
Capture the exact product URL, product handle, theme name, device, Market, media types affected, and whether the section chrome or thumbnails appear. One product failing while another works points to the product record or template assignment; every product failing points to the published theme or shared media component.
02
Prove the product record and published template, not only preview.
Open the product in Admin → Products and record the media count, featured media, alt text, image/video/model types, product status, sales-channel publication, and assigned theme template. Then open the storefront in a clean browser using the published theme, not a draft preview. Note whether the same media is visible in Admin but absent in page source or only hidden after JavaScript runs.
- Admin media exists but page source has no media markup: inspect the Liquid section, product template, and media loop.
- Markup exists but the region is empty: inspect CSS visibility, aspect-ratio, overlays, and runtime errors.
- Images render but video or 3D does not: check media-type branches and the required theme/app handling.
- Preview works but live fails: verify the published theme, template assignment, Market, and app embed state.
03
Check product.media, media types, and section settings in that order.
Inspect the live template’s media loop and confirm it iterates the product’s media collection rather than an empty or stale metafield. The theme should handle image, video, external video, and 3D/model media intentionally, use valid media IDs, and keep the featured-media setting wired to the selected product. Check section schema settings, dynamic sources, product JSON, and app blocks that replace or filter the gallery.
Use DevTools → Console and Network only to classify the gate. No media markup means a data or Liquid path; markup with failed assets means an asset or CDN problem; markup with hidden dimensions or display:none means CSS or breakpoint logic; an exception during hydration means theme or app JavaScript. Change one variable at a time and preserve the failing product as your control.
04
Repair the smallest live path, then retest edge cases.
Restore the correct product template and published media section, repair the media loop or featured-media binding identified by the evidence, and keep supported media types intact. Disable one conflicting gallery app block or embed only when the test shows it is intercepting or replacing the theme gallery. Publish the smallest change; do not bulk-reupload media or swap products just to hide a template bug.
Retest the same URL on desktop and phone, in a clean browser, after consent, and with image, video, and model media where present. Confirm the first media loads, thumbnails select the right asset, alt text is present, product JSON and canonical URL remain correct, and no unrelated CDN, zoom, or lazy-load issue was introduced.
05
When to stay DIY vs pay $997.
Stay DIY if one product template or media loop needs one controlled repair. Prove the live path, fix the smallest gate, publish, and retest. No agency is required and no conversion or revenue guarantee is implied.
Pay $997 one-time when the work is wiring the live Shopify stack you already use: lead capture, ops alerts, and a checkout-ready workflow. Nico at Latch AI Ops installs it on one live store in 72 hours after collaborator access is in. You are buying the install, not more orders or an earnings claim.