Skip to main content

Layout Looks Wrong

If your gallery looks different from what you expected — wrong layout, fewer images per row, odd heights — the cause is usually a setting sitting somewhere you didn't look, or a quirk of how a speci...

If your gallery looks different from what you expected — wrong layout, fewer images per row, odd heights — the cause is usually a setting sitting somewhere you didn’t look, or a quirk of how a specific layout behaves by design. Here’s what to check, and where each thing actually lives.

The Layout Isn’t the One You Picked

Layout is set on the gallery in the app, not in the theme editor, so the storefront should always match the canvas you see there:

  • Open the gallery in the app and check the Layout dropdown in the gallery settings card.

  • Make sure it’s saved - If a save bar is still showing at the top of the page, the change hasn’t been applied yet. Click Save.

  • Check you’re looking at the right gallery - Open the theme editor, click the block, and confirm the Gallery ID matches the gallery you edited. Two similar galleries are the most common cause of a “wrong” layout.

  • Hard-refresh the storefront after saving (Cmd+Shift+R or Ctrl+Shift+R).

Older versions of the app had a Layout setting on the theme block. It has been removed — if you’re following an old note or screenshot that mentions it, the gallery page in the app is where to go now.

Fewer or More Images per Row Than Expected

Images per row is also a gallery setting, with separate desktop and mobile values:

  • Open the gallery and use the Desktop / Mobile toggle in the top right of the settings card.

  • Desktop covers screens 750 px and wider, and accepts 2 to 6.

  • Mobile covers narrower screens, accepts 1 to 4, and previews on a phone-width canvas so you can judge it honestly.

  • Check the block isn’t overriding it - In the theme editor, Images per row should be on App setting (recommended). A fixed number there wins for that block, and applies on phones as well as desktops.

Rows Don’t Line Up, or Some Tiles Are Bigger

This is by design in three of the layouts, and the app shows a note under Images per row explaining it for whichever layout you’ve selected:

  • Masonry - Columns are straight, rows are not. Each image keeps its own height, so images per row is a column count.

  • Mosaic - Tiles vary in size on purpose; roughly half come out non-square. Rows containing a tile that spans two columns fit fewer images. Hover any image and click the size badge to force that tile to auto, large, wide, or tall.

  • Collage - Every 8th image becomes a large tile spanning two columns and two rows, so those rows fit fewer images.

  • If you want strictly uniform tiles, use Grid, and set the tile shape with Grid tile shape in the block settings.

Mosaic Tile Sizes Don’t Do Anything

Tile sizes apply only to the Mosaic layout:

  • The size badge is hidden on the canvas in Grid, Masonry, Collage, and Carousel, because the value would change nothing there.

  • Your sizes aren’t lost - Switch the gallery back to Mosaic and every size you set reappears.

Masonry Looks Jumbled at First, Then Settles

The Masonry layout calculates each tile’s height after the images load, so for the first half-second you may see tiles at default heights before they snap into position:

  • This is normal - Once images finish loading, the layout settles automatically.

  • If it never settles, hard-refresh the page (Cmd+Shift+R or Ctrl+Shift+R).

  • For galleries with very large images, the wait can be a second or two on slow connections. Compress your images for faster load times.

Carousel Height or Slide Count Looks Off

The carousel shows as many slides as the gallery’s images-per-row setting, and each arrow click advances by one image:

  • For a classic one-at-a-time slideshow, set the gallery’s Images per row to 1.

  • Carousel height in the block settings is Adapt to image by default, which keeps each image’s own proportions and never crops. The strip is as tall as its tallest slide.

  • Switch to Fixed height if you want every slide the same height, then set Carousel height (px) between 200 and 800 and choose Image fit: Fill crops to the height, Fit shows the whole image with space around it.

Spacing Between Images Is Too Tight or Too Loose

  • Open the block in the theme editor and find the Gap (px) setting.

  • Range is 0-32 - Larger values for an airy, magazine feel; smaller for a tight, modern look.

  • Save and check on both desktop and mobile.

Theme CSS Is Overriding the Gallery

Some themes apply aggressive styling to images and grids that can affect how the gallery renders:

  • All gallery styles are scoped to the block so they shouldn’t bleed into your theme — but the reverse can happen (your theme styling images globally).

  • If you suspect this, open the gallery on your storefront, right-click an image, and Inspect to see what styles are applying.

  • Contact your theme developer or our support if you find specific theme rules causing issues. Most can be resolved with a small tweak.

Did this answer your question?