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

Solved

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

leche-joseph
Tourist
10 1 0

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!

Screen Shot 2021-11-22 at 16.50.54.png

Screen Shot 2021-11-22 at 16.52.18.png

 

URL is here 

Accepted Solutions (2)
DMT-Mike
Shopify Partner
25 6 9

This is an 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.

Need expert help with your Shopify Website? Get in touch.

View solution in original post

PaulNewton
Shopify Partner
7201 637 1496

This is an 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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


View solution in original post

Replies 10 (10)

DMT-Mike
Shopify Partner
25 6 9

Hi Leche,

 

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

 

Thanks!

Need expert help with your Shopify Website? Get in touch.
leche-joseph
Tourist
10 1 0

0000

 

Sorry!

DMT-Mike
Shopify Partner
25 6 9

Perfect!

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

 

Opera Snapshot_2021-11-22_234505_sek-cosmetics.myshopify.com.png

DMTMike_0-1637625411255.png

 

Are you happy with this?

Need expert help with your Shopify Website? Get in touch.
leche-joseph
Tourist
10 1 0

@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.

 

 

Screen Shot 2021-11-22 at 18.57.14.png

 

DMT-Mike
Shopify Partner
25 6 9

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:

 

Opera Snapshot_2021-11-23_001012_sek-cosmetics.myshopify.com.png

 

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

Need expert help with your Shopify Website? Get in touch.
leche-joseph
Tourist
10 1 0

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
Shopify Partner
25 6 9

This is an 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.

Need expert help with your Shopify Website? Get in touch.
leche-joseph
Tourist
10 1 0

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
Shopify Partner
25 6 9

Yes.

 

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

 

No problem.

Need expert help with your Shopify Website? Get in touch.
PaulNewton
Shopify Partner
7201 637 1496

This is an 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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org