How do I resize the product thumbnail for collection-list and collection-page?

[leche-joseph]

Hi Again!

I was hoping to see if I could get some help with resizing the product thumbnail image size on collection-list & collection-page.

I have been adjusting the sizes in the inspect/developer tools but cannot seem to get it to change.

Ideally, I would like to have it be a 4x3 size but any tips on how to find and adjust the thumbnails would be great.

Thank you!

 

URL is here 

 

[DMT-Mike · Accepted solution]

Open your stores dashboard --> Online Store --> Actions --> Edit Code --> Open 'theme.css' -->

At the bottom of the file copy and paste this code and your product list images should be the size you want:

/* Landing Page Thumbnails */

.product-thumbnail--has-secondary-media-swap img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.product-thumbnail__media img {
    aspect-ratio: 4/3;
    height: auto !important;
}

.product-thumbnail__media-wrapper {
    aspect-ratio: 4/3;
}

Let me know if this works for you!

NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.

[DMT-Mike]

Hi Leche,

Is there any chance you could send the website password as well, otherwise we cant access the URL.

Thanks!

[leche-joseph]

0000

Sorry!

[DMT-Mike]

Perfect!

So this is what the images will look like 4/3.

Are you happy with this?

[leche-joseph]

@DMT-Mike That's great! 

I had another question!

Is there anyway we can change the product images to different sizes via our theme editor?

Ideally, I would like to set something where when we upload images we can globally set the image size to whatever we have listed.

For example, the user can upload an image and set it to be resized to 3:4 or 5:4 or 3:2 and others.

The hover image (first image in the Product, showing the QUICK SHOP link on hover) has a different aspect ratio than the product image. I would like to have that set to be the same size as the cover image.

[DMT-Mike]

To answer your first question, it is possible, but you'd need a lot more work and would probably need to hire a developer to get that working for you in the back end.

And this is the best I can do for the secondary image aspect ratio:

I also notice you've changed the style of your collection images, so I wont send the code for those.

[leche-joseph]

The second aspect ratio looks great!

Thank you so much.

I understand. I figured there would be a load of back-end work involved to do that.

[DMT-Mike · Accepted solution]

Open your stores dashboard --> Online Store --> Actions --> Edit Code --> Open 'theme.css' -->

At the bottom of the file copy and paste this code and your product list images should be the size you want:

/* Landing Page Thumbnails */

.product-thumbnail--has-secondary-media-swap img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.product-thumbnail__media img {
    aspect-ratio: 4/3;
    height: auto !important;
}

.product-thumbnail__media-wrapper {
    aspect-ratio: 4/3;
}

Let me know if this works for you!

NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.

[leche-joseph]

Hi! Thank you so much!

Would resizing the collection images be a similar method using the aspect-ratio declaration?

Once again thank you so much for your swift response!

[DMT-Mike]

Yes.

Same concept, just need to apply it the the collecting thumbnail wrapper, and the collection thumbnail img! 

No problem.

[PaulNewton · Accepted solution]

---

@leche-joseph wrote:

Is there anyway we can change the product images to different sizes via our theme editor?

---

💣 Warning This is really a process you want to handle at the file level itself using image editing or convertors.

This also leads to more optimized images and better art direction.

This is especially important if you are multichannel, as whatever html/css tricks you use on images for the theme will not apply to places like facebook shopping, etc they will show the raw image aspect-ratio from the product media.

Basically passively creating an inconsistent look for your product photography.

While there are some automatic image editing/crop apps available generally they cannot replicate human editing.