Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
Buy me a Pizza
If this was helpful, hit the like button and accept the solution.
Thanks
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
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.
Buy me a Pizza
If this was helpful, hit the like button and accept the solution.
Thanks
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
comment:
transform: scale(1.3); suggested below will make your images fuzzy, my code would not.
Thank you! I will crop them tighter and re-upload! This is very usefull!
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);
}
- 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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024