The Product Gallery on Mobile

The Media Gallery block in the Product Section has four settings that apply to phones only. Desktop and mobile want different things here: on a desktop the thumbnails are the navigation, on a phone people swipe anyway and every row of thumbnails pushes the price and the buy button further down.

All four default to the behaviour the theme had before, so nothing changes until you set them.

Gallery layout (mobile)

Same as desktop / Slider with thumbnails / Slider without thumbnails

Hiding the thumbnail strip on mobile frees its height for the image itself and for whatever comes below it. The trade-off is real though: the thumbnails are the only visible sign that more images exist. Take them away and part of your visitors will look at the first image and never swipe — which on a product page is where the argument for the product lives.

Switch the dots on when you hide the thumbnails, see below.

Stacked is deliberately not offered here. A column of full width images on a 400 px screen puts the buy button several screens down. The stacked layout already handles this on its own: on mobile it shows a slider rather than the column.

Show dots (mobile)

Same as desktop / Show / Hide

The pagination dots do the same job as the thumbnails — they say "there is more" — in a fraction of the height. Thumbnails off plus dots on is the combination worth testing on a phone.

Next image peek / Previous image peek (mobile)

0–60 px each, 0 turns them off.

The neighbouring image shows at the edge, cut off. This is the clearest signal that a gallery can be swiped, clearer than dots, and it costs no vertical space at all. 20 to 30 px is usually enough — it has to read as "an image continues here", not as a layout error.

Right side alone says "there is more". Both sides also say "you are not at the beginning", which the right side can never tell you.

Two things to keep in mind when using both:

• On the first image the left strip is empty, because there is nothing before it. That is not a fault, it is the information: the visitor is at the start. The same applies on the right at the last image.
• Both sides take width from the image itself. Two times 24 px is around 13 % of a 375 px screen. With both sides on, pick lower values than you would for one side alone — 16 px each is usually plenty.

Peek and dots can be combined, but one of the two is normally enough.

Image ratio (mobile)

Square (1:1, the default) / Portrait 4:5 / Portrait 3:4 / Landscape 16:9

Every mobile slide is drawn in one frame of the ratio you pick. That frame is not decoration: without it, images of differing ratios leave a gap below the shorter ones, because the slider keeps the height of the tallest.

Which is also why there is no "adapt to image" option here — it would bring that gap back, and on a phone it is very visible.

Pick the ratio your product photos actually have. Shirts photographed flat are usually fine as squares; garments shot on a person are better at 4:5.

A note on how this is built

Switching the thumbnails per device costs nothing in page weight. The strip is always in the markup and only hidden with CSS, so there is no second gallery and no additional images being loaded — the phone downloads exactly what it did before.