Re: Is it possible to increase the image like zooming the image

Solved

Is it possible to increase the image like zooming the image

abailea077
Excursionist
44 0 16

Hello there!

 

Like it says in the question, my product images appear small on the featured collection grids. You can see it on the image.

 

Is it possible to zoom in the image so we can see it bigger on the grid so it can fill up more of the remaining space?

Here is the URL:

https://toroeatstreats.com/collections/all

If you need a password enter: brayden


Question 8.jpg

Accepted Solutions (2)

Sangeetanahar
Trailblazer
556 36 66

This is an accepted solution.

Hello @abailea077 

I have checked, this problem is with the inner part of the image, for this you will have to use another image whose inner  part is bigger, I have shown it in the screenshot.

Smoorecoockie2-png-2048×2048-.png

Buy me a Pizza


If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

View solution in original post

tim
Shopify Partner
3874 380 1414

This is an accepted solution.

As @Sangeetanahar pointed out, there is too much "air" in your images.

Ideally, you should crop them tighter and re-upload.
Or, use an app to crop them in place, like Hextom: Bulk Image Edit & SEO which can do it in bulk.

 

However, it this is really not an option, you can add this code to either Theme Settings=> Custom CSS, or Custom CSS setting of relevant section(s):

 

.product-item__image > img.image__img {
  width: 150%;
  max-width: 150%;
  transform: translateX(-16.66%);
  aspect-ratio: 1;
}

 

This will make your product grid images 1.5 larger.

Not really recommended though. Only as temporary measure.

 

Screenshots before/after 

Screenshot 2024-08-28 at 3.41.28 PM.png Screenshot 2024-08-28 at 3.41.19 PM.png

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 5 (5)

Sangeetanahar
Trailblazer
556 36 66

This is an accepted solution.

Hello @abailea077 

I have checked, this problem is with the inner part of the image, for this you will have to use another image whose inner  part is bigger, I have shown it in the screenshot.

Smoorecoockie2-png-2048×2048-.png

Buy me a Pizza


If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

tim
Shopify Partner
3874 380 1414

This is an accepted solution.

As @Sangeetanahar pointed out, there is too much "air" in your images.

Ideally, you should crop them tighter and re-upload.
Or, use an app to crop them in place, like Hextom: Bulk Image Edit & SEO which can do it in bulk.

 

However, it this is really not an option, you can add this code to either Theme Settings=> Custom CSS, or Custom CSS setting of relevant section(s):

 

.product-item__image > img.image__img {
  width: 150%;
  max-width: 150%;
  transform: translateX(-16.66%);
  aspect-ratio: 1;
}

 

This will make your product grid images 1.5 larger.

Not really recommended though. Only as temporary measure.

 

Screenshots before/after 

Screenshot 2024-08-28 at 3.41.28 PM.png Screenshot 2024-08-28 at 3.41.19 PM.png

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
tim
Shopify Partner
3874 380 1414

comment: 

  transform: scale(1.3); suggested below will make your images fuzzy, my code would not.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
abailea077
Excursionist
44 0 16

Thank you! I will crop them tighter and re-upload! This is very usefull!

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Hi @abailea077 

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings reduce the space of your images

.product-item__image-link img { 
    aspect-ratio: 1 / 1 !important; 
    transform: scale(1.3);
}

Screenshot 2024-08-28 at 15.07.13.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.