Resizing Thumbnail Size for Products

Solved
Excursionist
30 1 0

Hi! I'd like to have thumbnails which are constrained to 200 pixels in height and also constrained in width so they fit my page nicely and also so the first product image is not blurry for my customers to see. I have tried to input this code;

.product-grid-image img {
    max-height: 200px;
}

But this code would not work. I wanted to also add the width but since the height did not work to change it I didn't bother. Thanks in advance :)

0 Likes
Excursionist
30 1 0

Thread Bump

0 Likes
Pathfinder
98 12 28

What theme is it?

1 Like
Excursionist
30 1 0

I'm using the debut theme.

0 Likes
Pathfinder
98 12 28

Open collection-template.liquid and replace the top line with the below, should achieve what you want.

{% assign products_per_row = section.settings.grid | times: 2 %}
1 Like
Excursionist
30 1 0

This did not change my thumbnail unfortunately. I put the code in as you stated, screenshot below:

Screenshot_7.png

And I keep getting an error.

0 Likes
Pathfinder
98 12 28

I think you must of accidentally deleted 3 lines instead of just the top line, you also need the code below straight underneath the first line, this code below should be line 3 and line 2 should be empty, match to the image below.

{% case products_per_row %}

Untitled-2.jpg 

1 Like
Highlighted
Excursionist
30 1 0

I inputted the code and it changed the thumbnail so it is no longer visible on the product page, however it is still the same on the homepage. How do I adjust the height and width of the thumbnail on both the product and homepage? Thanks so much again, and I have screenshotted a photo to show you how it looks when I added the code specified.

Screenshot_9.pngScreenshot_8.png

0 Likes
Pathfinder
98 12 28

Have you added any other CSS to try and change the thumbnail sizes? if you have that could be making the odd sizes, I changed the times: from 1 to 2 so it displays double the amount of products on one line which makes the thumbnails a good size, by default it shows 2 products on one row and the thumbnails are huge, if you haven't added any CSS to the page to modify the product images it should be working perfectly? do you have the shareable site link, can try fix by just changing your current CSS to work.

1 Like
Excursionist
30 1 0

I have added the code I mentioned in my post but I removed it from theme.scss.liquid so it should not affect it. I do not have the shareable site link but if you'd like to put your email I can add you as staff temporarily to access the code.

0 Likes