Product Page view Error!!!

Store Design
, , , , , ,

Topic summary

A user is experiencing a display issue on their Shopify product pages where product images briefly show in grid view (for 2-5 seconds) on mobile devices before automatically switching to the intended list/swipe view. The desired behavior is grid view on desktop and list view (swipeable) on mobile, but the theme settings don’t properly distinguish between devices initially.

Proposed Solution:
One responder suggests modifying the product-media-gallery.liquid file to add a JavaScript condition using window.innerWidth to detect device type and render the appropriate layout format from the start.

Additional Issue:
Another commenter reports that product images aren’t loading at all on their mobile device when testing the provided URL, suggesting there may be a broader technical problem beyond just the layout switching.

Status: The issue remains unresolved, with the original poster awaiting confirmation on whether the suggested code modification works.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hey There! I am having issues with Product page pictures viewing. The thing is that I want to show product images on the product page as grid view on desktop, so I select grid view in theme settings but the thing is that this is causing a short error of approx 5 seconds on mobie view. After enabling grid view, when I try to open a product page on mobile it shows grid view for the first 5 seconds and automatically changes to list view and sometimes changes upon scrolling the page. Why is that? Please if someone could help me out!! I want Grid view on desktop and list view on mobile. By list view I mean swipe left to view next image! Thanks!

URL: https://rv0z32-pa.myshopify.com/

Pass: door

Following is the error which happens for the first 2-5 seconds

tupakora_0-1740527464042.png
tupakora_0-1740527464042.png266×582 127 KB

Below is how it fixs automatically

tupakora_1-1740527519696.png
tupakora_1-1740527519696.png266×582 98.3 KB

2

Hi @tupakora

I am from Mageplaza - Shopify solution expert.

For this issue, you should find the product-media-gallery.liquid file, where the product media is located.

Then, add a condition to check the current device width using window.innerWidth.

  • If the current width matches a mobile device, the media gallery will render in a list format.
  • If the current width matches a desktop device, the media gallery will render in a grid format.

Please let me know if it works as expected!

Best regards

3

Hi @tupakora

May I ask for the name of the Theme you are using?

Also, I tested in my phone and the image didn’t even load. Could you please check that as well?

img_8149_720.png
img_8149_720.png333×720 30.1 KB

Best,

Daisy