does anyone know how to make all images the same size display

Solved

does anyone know how to make all images the same size display

vibehome
Explorer
71 4 31

Hi, I've recently just updated to a new version and for some reason the collection images and product images display differently, some more zoomed in etc and does not fit the whole product image.

 

When I had some changes made a last year the images would fit nicely inside the box but after this update it has changed the format.

 

I have attached some images of what I mean.

images do not fit.pngimages fit nicely.png

 

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
2305 835 907

This is an accepted solution.

Hi @vibehome

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.collection .card__media .media img {
    object-fit: contain !important;
}
</style>

 Here is result:

BSSCommerceHDL_0-1724687851418.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Partner
2305 835 907

Hi @vibehomeCan you kindly share the details of your problem (link page) with us? We will check it and suggest you a solution if possible. 
Because I see it good in your website now

BSSCommerceHDL_0-1724685322431.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

vibehome
Explorer
71 4 31

Hi @BSSCommerce-HDL  Yes ofcourse, I will wait to hear on the first part ( white background across the menu) and then I will make the theme live with the issue of the images. Hope this makes sense.

vibehome
Explorer
71 4 31

Its now live and you can see the image sizes different 

BSSCommerce-HDL
Shopify Partner
2305 835 907

This is an accepted solution.

Hi @vibehome

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.collection .card__media .media img {
    object-fit: contain !important;
}
</style>

 Here is result:

BSSCommerceHDL_0-1724687851418.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

thetruehouse
Tourist
7 0 1

This worked for me and I am on the Craft Theme!  Thank you so much! I found </head> on line 299 in case that's helpful for someone else. 

vibehome
Explorer
71 4 31

Last year when the website was being built someone made all the images so its fits in