Set Image Size for whole website

Store Design
, , , , ,
1

Hi all,
I’m wondering is there a way to set the image size or display for our shop site. There’s some square images and some rectangular for different products. I was wondering if there’s a piece of code I can add at the end to neutralise them all to the same size?

Other guides have offered me ways to do it individually per image but as there are so many at this point it would be a huge task to go find and fix every image per product.

Any help would be greatly appreciated!

2

Hi @crbusinessserv ,

You can definitely standardize all your product images with a single CSS fix instead of editing each image individually. Here’s how to make them all display at the same size:

CSS Solution for Uniform Image Sizes

Step 1: Access your theme code

  • Go to Online Store → Themes → Actions → Edit Code
  • Find styles.css.liquid in the Assets folder (or theme.css.liquid depending on your theme)

Step 2: Add this CSS at the bottom of the file:

/* Standardize product image sizes */
.product-card img,
.product-item img,
.grid-product__image img,
.product-grid-item img {
    width: 100% !important;
    height: 300px !important; /* Adjust this height as needed */
    object-fit: cover !important;
    object-position: center !important;
}

/* For collection/product grid containers */
.product-card,
.product-item,
.grid-product__image,
.product-grid-item {
    overflow: hidden !important;
}

Step 3: Adjust the height value

  • Change 300px to whatever height works best for your layout
  • Common values: 250px, 300px, 350px, or 400px

## What This Does- object-fit: cover - Crops images to fill the container while maintaining aspect ratio

  • object-position: center - Keeps the most important part of the image visible
  • overflow: hidden - Prevents any image overflow outside the container

## Alternative for Square Images

If you want perfect squares instead:

.product-card img,
.product-item img,
.grid-product__image img,
.product-grid-item img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    object-position: center !important;
}

Note: The exact CSS class names might vary slightly depending on your specific theme version. If the code doesn’t work immediately, you can inspect element on one of your product images to find the correct class name for your theme.

This approach will make your product grid look much cleaner and more professional without having to touch individual product images.

Let me know if you need help finding the right class names for your specific theme!

Shubham | Untechnickle

3

Hi @crbusinessserv ,

Please send the website link, I will check it for you

4

Hiya, I tried your solution and below i’ve attached the code used and what it looks like on the site. As you can see it’s still uneven, any idea? Should i use the square image code for the whole site? Is that the best way to make it even?

Thank you so much for your help!

5

https://kindfolkgalway.ie/

6

Hi @crbusinessserv ,

Please go to Customize > Theme settings > Custom CSS and add code:

.grid-product__image-mask .image-wrap {
    padding-bottom: 133% !important;
}
.grid-product__image-mask .image-wrap img {
    height: 100% !important;
}
7

I’ll try this now, am i adding it to the code theme.css. under assets right?

8

Hi @crbusinessserv ,

You can or just add it at Customize, it will help the theme upgrade process later better.

9

This worked! Thank you so much!

10

Hi @crbusinessserv ,

It’s my pleasure