Why are the images in the product grid so large?

[svex]

Hej there!

I purchased the Boost theme for Shopify and would like to migrate my products from opencart. After the test import I noticed that the products are displayed stupidly in all product overviews. It seems that only the image width is defined, but not their length. In the product overview images with different length are displayed and the whole layout is chopped. See photo.

What can I do? Thanks in advance

[made4Uo]

@svex Hi,

Can you provide your website so I can inspect?

[KetanKumar]

@svex

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[svex]

The shop ist not online yet.

But you can visited the store via Link to Webshop and passwort temptest .

Thanks in advance for help.

[KetanKumar]

@svex

thanks for url

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.

.product-block__image .rimage-wrapper {padding-top: 100% !important;}
.product-block__image .rimage-wrapper .rimage__image {object-fit: contain;}

After code view

[svex]

Thank you very much. This is the solution. Now it looks much better.

Thank you very much. This is the solution. Now it looks much better.

Is there also the possibility to limit the image height on the product page? I have not found a setting for this in the theme either. But it is a bit too long: Link to the product

[KetanKumar]

@svex

yes please add this code also

.product-media--image .rimage-wrapper {
    padding-top: 100% !important;
}
.product-media--image .rimage-wrapper .rimage__image {object-fit: contain;}

[svex]

Wow!

Very big thanks for the fast and perfect solution!

I’m almost a little embarrassed, but I have one last question. Can you help me with this too? The product page is strangely not using the available space of the container. Image and description could theoretically be width and in line with the breadcump. In Firefox you can see that the container would actually be bigger, see screenshot. What is the reason for this?

[KetanKumar]

@svex

thanks was theme page container

[svex]

Can I extend the product container to the page content container? So that they are the same size and the product image is larger (wider)?

[svex]

There is also a problem with the last seen products - maybe the same issue like beforde

[KetanKumar]

@svex

yes please share that collection url

[svex]

Hi

The product images are sometimes displayed too large, for example, if you go to the product https://lokoala.ch/collections/nussknacker/products/nussknacker-konig-exklusiv-weiss-silber-mintturkis and then look at the Recently viewed section. It’s so confusing. We bought a theme, but there support doesn’t help. There are so many issues with the product image. Like: Product images in quick view is not displayed correctly, they are cut off. To do this, compare the quick view of the product Natural Wax Crayons Originals , see page under.
https://lokoala.ch/collections/malen-gestalten

We are very happy about any help we could receive. Thanks a lot.

[KetanKumar]

@svex

thanks for url i have check now all working fine i can’t see any issues

[svex]

If you first visit https://lokoala.ch/products/nussknacker-konig-exklusiv-weiss-silber-mintturkis and then, for example, https://lokoala.ch/products/biegepuppe-mutter-sabine?pr_prod_strat=collection_fallback&pr_rec_pid=7329832632579&pr_ref_pid=7329924055299&pr_seq=uniform then you will see at the bottom of the web page the section “Zuletzt angesehen” (Last seen).
This will show the product image of https://lokoala.ch/products/nussknacker-konig-exklusiv-weiss-silber-mintturkis too big and not like all the others.

Also in quick view it chops up the images: https://lokoala.ch/collections/malen-gestalten

And click an Fast View (Schnellansicht) first product.

[KetanKumar]

@svex

thanks for more details try this code

.product-block__image-container {
    height: auto !important;
}
.hover-images.global-border-radius.relative.hover-images--two {
    padding-top: 100%;
}
.hover-images.global-border-radius.relative.hover-images--two div {
    position: absolute;
    top: 0;
    height: 100%;
}
.hover-images.global-border-radius.relative.hover-images--two div img {
    height: 100%;
    object-fit: contain;
}

[svex]

Hm , It doesnt work, I added your code to the other code:

.product-block__image .rimage-wrapper {padding-top: 100% !important;} 
  
 .product-block__image .rimage-wrapper .rimage__image  {object-fit: contain;} 
.product-media--image .rimage-wrapper  {
    padding-top: 100% !important;
} 
.product-media--image .rimage-wrapper .rimage__image   {object-fit: contain;}
  
   
.product-block__image-container {
    height: auto !important;
}
.hover-images.global-border-radius.relative.hover-images--two {
    padding-top: 100%;
}
.hover-images.global-border-radius.relative.hover-images--two div {
    position: absolute;
    top: 0;
    height: 100%;
}
.hover-images.global-border-radius.relative.hover-images--two div img {
    height: 100%;
    object-fit: contain;
}

It seems that the quick preview works now, but instead the pictures of some products disappear

[KetanKumar]

@svex

that code work for me

please sent this collection url

[svex]

@KetanKumar Hi, if I add the complete code - I wan’t see some product images in every collection. So I didn’t activate the new code. I don’t know the reason for…

[KetanKumar]

@svex

sorry for that issue if possible to add me staff account and give only theme access so i will check my end and let you know what’s issue