Solved

products grid not aligning all the products image size

1cando1t
Excursionist
25 2 0

Dear community supporters,

I am having an issue with my products images being different from each other and when they show on the products gri d they are differently sized and in some cases the columns size is affected too much so that it soars the eye too much.

My theme is Dawn, and my website is: www.gaboo-clothing.myshopify.com 

Please find the images below as an issue concept and how it is looking:

1cando1t_0-1704150091780.png

the ideal thing as far as I would like it to be is shown in this picture below:

1cando1t_2-1704150302223.png



Thank you in advance to anyone who contributes with an actual solution.

FYI I will be making a few more websites and will probably need some more assistance in the near future, so I will be looking out for professionals on designing shopify so please leave your contact info below.

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6918 1306 1334

This is an accepted solution.

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> and check 

<style>
.collection .grid__item .card__inner {
max-height: 220px;
}
.collection .grid__item .card__inner .card__media .media img {
object-fit: contain;
}
@media (max-width: 749px) {
.collection .grid__item .card__inner {
max-height: 150px;
}
}
</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 10 (10)

Studio_Dev
Shopify Partner
13 1 2

Hi @1cando1t ,
Thanks for reaching out.  I had a quick look at the issue you're experiencing and the problem is due to your images having different aspect ratios.  The result is that the height of each row will be dependent on the height of the tallest product image.  This means, that when you have products on the same row with different aspect ratios, it won't look uniform like you observed.

One solution would be to change the css so that all images have a max-height, see attached example.

A better solution, I think - if possible, would be to alter your images so that they all have the same aspect ratio.  I'm aware that you probably don't like the thought of doing this manually.  Therefore, there may be an app or another resource that could help you with this.  See,

resize.jpg

Let me know how you go.

Kind regards,
Lewis

e: studio.dev888@gmail.com
w: https://studiodev.ink


1cando1t
Excursionist
25 2 0

Dear @Studio_Dev,

Thank you for your reply and effort but realistically what I thought was maybe some type of code that checks the image size and if it exceeds the limit then to resize it, or something similar.

Although i totally understand your explanations due to the images being the problem here, I noticed throughout the community and youtube and some online research that this issue has not been resolved in a final matter.

Just whilst writing this, I was thinking what if there is a way that we can edit the product card so that it only show the products from the top (meaning that the orange part on the top would not be shown, and then the description bar to be shown at a max height from the bottom up for about 20~30% of the whole product.

P.s let's keep this conversation going on the community until we can maybe get a final solution for the sake of helping other and in the meantime please check you email 🙂

Dan-From-Ryviu
Shopify Partner
6918 1306 1334

Go to your Online store > Themes > Customize > Collections > Default collections > Product grid > Product card > Image ratio, select Portrait or Square, and click SaveScreenshot 2024-01-02 at 08.55.48.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

1cando1t
Excursionist
25 2 0

Dear @Dan-From-Ryviu,

Thank you for your reply but if that would be a solution I would have already implemented it. The issue that comes up with the portrait or square options is that the products show as half the image based on whether the product is too big horizontally or vertically.

Regards,

Dan-From-Ryviu
Shopify Partner
6918 1306 1334

Please select square or portrait and then I will give you the code to solve the issue with image 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

1cando1t
Excursionist
25 2 0

Okay, here is the picture of when I select square option:

1cando1t_0-1704163898110.png



And here is the code when I select the Portrait option:

1cando1t_1-1704163946425.png


I kindly provided you the following pictures to prove my point, although I was sure it was implied in the beginning. Kindly refer to them and let's see if we can solve this 🙂

Respectfully.

Dan-From-Ryviu
Shopify Partner
6918 1306 1334

Please select option is Square and then let me know

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

1cando1t
Excursionist
25 2 0

Please do not make a joke of this, if you are not going to approach this professionally or logically and no profit comes from you don't make this any longer. I value your time and effort but please stop this part where you keep asking to try the square option bevause I have already done so and I showed it to you in pictures. 

Respectfully. 

Dan-From-Ryviu
Shopify Partner
6918 1306 1334

This is an accepted solution.

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> and check 

<style>
.collection .grid__item .card__inner {
max-height: 220px;
}
.collection .grid__item .card__inner .card__media .media img {
object-fit: contain;
}
@media (max-width: 749px) {
.collection .grid__item .card__inner {
max-height: 150px;
}
}
</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

1cando1t
Excursionist
25 2 0

Thank you for your effort and contributions, this does help too in my case where I have more than 1000 products, but it is not the perfect solution. The perfect solution seems to be the redesigning of the pictures one by one as explained by @Studio_Dev.

Thank you both for your contributions!
Kind regards.