How can I resize and align product images on my online store?

Store Design
,

Topic summary

A store owner is experiencing issues with product image display on their online store. The problem involves:

Main Issues:

  • Secondary product images (second, third, etc.) appearing too small
  • Images not aligning properly, with inconsistent sizes between pictures

Solutions Offered:

Two support representatives provided assistance:

  • GemPages offered a visual example of the desired layout
  • PageFly-Richard provided a technical solution, explaining that misaligned images result from varying source image dimensions

Recommended Fix:
Custom CSS code to be added via:

  1. Navigate to Online Store → Theme → Edit code
  2. Access Assets → theme.css
  3. Insert provided CSS at the bottom of the file

The CSS adjusts image wrapper height (80px), sets padding to 100%, and applies object-fit cover properties to ensure uniform display.

Resolution: The original poster thanked the helpers, suggesting the solution was accepted.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hey, im having issues with the pictures that are displayed when viewing the product. I want the second picture, third and so on to be a bit bigger and I want them to be aligned. At the moment, the pictures are too small and they don’t align. One picture is bigger than the other. How can I fix this issue

Url example of the issue on my store https://ciklo-centar.myshopify.com/collections/brdski-bicikli/products/bicikl-specialized-rockhopper-elite-29-sgegrn-oakgrn-xl-2022

1 Like
2

Hello @farispreljevic

Do you want it like this: https://prnt.sc/CRJMafFbp37G

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

3

Hi @farispreljevic ,

This is Richard from PageFly - Landing page builder, Because your images are not the same size, when aligned equally, the image will be cropped. If you still want to adjust, you can follow the following solution::
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.product__photos .product__thumbs .image-wrap {
    padding-bottom: 100% !important;
}
.product__photos .product__thumbs .image-wrap > a {
    height: 80px;
}
.product__photos .product__thumbs .image-wrap img {
    height: 100%;
    object-fit: cover;
}

I hope it would help you
Best regards,

Richard | PageFly

4

Thanks a lot for your help