Blockshop Theme (V8): Making product photos smaller on collection grid

Store Design
1

Hi! I’ve been trying to do this and I haven’t had luck.

I want to make all my product images smaller so that it isn’t so large. I don’t have the best quality images so they need to display at 250px.

What I want:

What I want.png
What I want.png1609×900 103 KB

What it looks like now:

Current.png
Current.png1602×938 80.7 KB

2

Hi @tgon ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hi!

Here is a preview of my store: https://ycbz7nmjt6mo4ggx-9174492.shopifypreview.com

It’s not published yet.

I was able to figure out how to make all the photos 250px height (and the container) but now the photo and the text is NOT centered in each column (you can see with this when resizing the browser).

I added this to the theme–async.css.liquid.

.product--image .image--root, .product--hover-image .image--root{
position:relative;
max-width:250px;
}

--and

product--root{display:flex;position:relative;flex-grow:0;flex-shrink:1;flex-basis:auto;width:250px}.