How can I standardize image sizes and ratios on my collection page?

Store Design
,

Topic summary

A user seeks to standardize product images on their collection page with two specific requirements:

Goals:

  • Uniform image sizes and ratios across all products
  • Remove hover images

Solution Provided:
A PageFly support representative offered custom CSS code to be added to the theme.scss.liquid file. The code targets specific collection sections to:

  • Set fixed image heights (395px)
  • Apply object-fit properties for consistent display
  • Ensure responsive behavior on mobile devices

Current Status:
The implementation encountered issues. The user initially reported the code didn’t work, then revealed they had switched back to their original theme temporarily. After switching to the new theme again, they clarified wanting all collection page images in portrait ratio and responsive on mobile. The support representative provided additional CSS for tablet/mobile responsiveness. The conversation remains ongoing as the solution is being refined.

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

Hello

I want to make the collection page like the photo below

1 Same ratio and size

  1. No hover image

is it possible to do so?

Screen Shot 2023-06-07 at 7.22.43 PM.png
Screen Shot 2023-06-07 at 7.22.43 PM.png1828×972 231 KB

2

Hi @oscaroline

Could you share your store URL to check?

If you are using free Shopify theme, please change Image ratio in Online store > Themes > Customize > click drop down menu on the top > Collections >Default collection > Product grid > Image ratio

Screenshot 2023-06-08 at 09.33.18.png
Screenshot 2023-06-08 at 09.33.18.png1741×756 169 KB

3

www.sundaypaloma.com

4

Hi [email removed]Oscaroline,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.scss.liquid or theme.scss

Step 3: Paste the below code at the bottom of this file ⇒ save

@media(min-width:767px){
#shopify-section-16124492363235013c figure.flex-column-reverse{
flex-direction: column !important;
}
#shopify-section-16124492363235013c figure a:has(img){
height:395px !important
}
#shopify-section-16124492363235013c figure a:has(img) img{
object-fit: cover;
height:inherit;
width:100%
}

}

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

5

it doesnt change anything :disappointed_face:

6

Can you share the screenshot of the position you added the code to?

7

Screen Shot 2023-06-08 at 5.10.22 PM.png
Screen Shot 2023-06-08 at 5.10.22 PM.png1938×968 120 KB

8

Hi @oscaroline ,
I re-check but I see you are changing the theme

9

yes I had to go back to my original theme because the new one is not ready yet.

I changed it back to new one Please check.

www.sundaypaloma.com

I want to change the images on collection page all portrait ratio

and responsible on mobile as well

thank you

10

Hi @oscaroline ,

You can add

@media screen and (max-width: 989px){
.slider.slider--tablet {
    flex-wrap: wrap !important;
}
}