Why are the images in the product grid so large?

Solved
svex
Excursionist
12 0 11

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.

Screenshot 2021-10-14 202241.png

What can I do? Thanks in advance

Replies 24 (24)
svex
Excursionist
12 0 11

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

Screenshot 2021-10-15 230153.png

KetanKumar
Shopify Partner
25061 2508 9071

@svex 

yes please share that collection url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
svex
Excursionist
12 0 11

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-mintturk... 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
Shopify Partner
25061 2508 9071

@svex 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
svex
Excursionist
12 0 11

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=73... 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.

Screenshot 2021-10-21 at 21-05-39 Nussknacker König exklusiv weiss-silber-rot.jpg

 

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

And  click an Fast View (Schnellansicht) first product.

Screenshot 2021-10-21 at 21-10-47 Malen und Gestalten.png

KetanKumar
Shopify Partner
25061 2508 9071

@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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
svex
Excursionist
12 0 11

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

Screenshot 2021-10-23 at 22-30-29 Kuschel - und Plüschtiere.png

 

KetanKumar
Shopify Partner
25061 2508 9071

@svex 

that code work for me 

please sent this collection url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
svex
Excursionist
12 0 11

@KetanKumarHi, 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
Shopify Partner
25061 2508 9071

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing