Product information mobile layout

Store Design
,
1

IMG_4828.PNG
IMG_4828.PNG1206×2622 201 KB

IMG_4827.PNG
IMG_4827.PNG1206×2622 395 KB

Hey! I’m wondering if there’s a way to switch my mobile layout to match the picture I provided. If anyone could help, I would really appreciate it! Thanks so much!

my url store: kwa-e.com

2

Yes, it is possible in most themes, but I would treat this as a product-page gallery decision, not just a visual rearrange.

From your screenshots, your current mobile page is using a smaller main image with thumbnail navigation, while the reference puts the product photography first and turns the rest of the gallery into a stronger scrollable image grid. That can work well for clothing because shoppers often want to see front, back, detail, and worn shots before reading more.

The main thing I would protect is the buying path. If you move toward the reference layout, keep the first image large and clean, show the next few photos in a simple grid, but do not push the title, price, variant choices, and add-to-cart too far down the page. A sticky add-to-cart bar or the product info appearing after the first few images can keep the layout attractive without making shoppers hunt for the purchase controls.

If your theme has product media layout settings, start there. If it does not, this is usually a product template or section customization rather than an app change. Also compress the mobile images and lazy-load anything below the first screen, because a gallery-heavy layout can look better but still hurt sales if it slows the page down.

3

Hey @k3k3k3

The layout which you’re referring to is called a Grid View layout. The main image with the rest of the photos laid out as a grid of thumbnails underneath, instead of the single scrolling row you have now. Usually many themes already support this by default in theme customization.

Have you tried to explore the theme editor first? If, it’s still not there then it would need to be custom coded since it’s not only a CSS work.

If you’d like me to handle it, drop me the collaborator request code in a private message and I’ll take care of it.

Best,
Moeed

4

Hi @k3k3k3

Please check once in the Theme Customizer. There may already be an option available for this. If there isn’t, then we’ll need to implement it using custom code.

5

Two methods to fix it:

First Method: No code:

  1. In the theme editor open your Product page
  2. click the product media/gallery block
  3. and turn off “Constrain media to viewport height” (and if there’s a “Media fit” option, leave it on Contain). That alone makes the image fill the column.

Second Method: Requires Code: Online Store > Themes > … > Edit code > assets/base.css, paste this at the very bottom:

@media screen and (max-width: 749px) {
  /* let the main product image use the full screen width */
  .product-media-container.constrain-height.media-fit-contain {
    width: 100% !important;
  }
  .product-media-container.constrain-height .media {
    padding-top: var(--ratio-percent) !important;
  }
  /* remove the side "peek" so each gallery photo is edge to edge */
  .product__media-list .product__media-item {
    width: 100% !important;
  }
}

Notes:

  • Desktop is unchanged. It affects only the mobile view
  • Leftover space above/below the tee is baked into the product photos, not the theme.

Tested on your actual product page at 390px: the main image goes from 335px wide (86%, centred) to a full 390px, edge to edge.

Before and After Image:

image
image458×455 91.8 KB

Mark it as Solution if it fixes your problem
Regards,
Ajay