Buy Button Store: Tiny product photos with no zoom

Store: www.kaiborgstudios.com/diy

I’ve used the buy button feature top build a store on my website. The issue I’m having is that all of my product photos are being automatically resized to 280x480, with no option to zoom in. I’ve had multiple customers complain that they need me to manually email them photos as they cannot see any detail in the tiny default shopify photos. How do I either increase their size, or have an option to zoom in on the products?

1 Like

the image minimum size defined the main image view box so you have to add a higher quality image then zoom feature work

The images being uploaded are 4032x3024.

I should also add I brought this issue up with Shopify Help Chat, and was directed here as they weren’t able to come up with a native solution.

@KaiborgStudios I hope now zoom effect working, if can edit code you can hire a developer me or else

Of course it’s not, I mentioned the photos were being resized in my original post.

Can I please have the help of Guru who knows what they’re talking about?

It’s been over a week, once again asking for help from a guru.

Did you ever get an answer on this? I have the same issue - I am uploading high-res images, but the images that are shown in the buy button pop-up are so tiny and offer no zoom function. It looks unprofessional, IMO. I’d love to be able to resize these with some code.

Nope, nothing. Shopify’s customer service is non-existent.

Ugh! I know there’s a solution to this because I saw a template for a
Shopify buy button site, and the web designer specifically mentioned that
her site template came with coding to make the photos larger. I ended up
going with a different site template and building my own shop out, but have
no idea yet how to adjust the photo size.

Let me know if you find anything!

Cameron

Making some progress! Not totally solved but here’s what I’ve done so far (
I hope these images load properly)

Here’s the way things look now. Tiny photos with the option to pick from
the carousel.

So in the copied buy button code, I went to the section under “Modal” and
changed “img”: false’ to say “img”: true’ as pictured here:

This gave me a nice large image above the normal small photo with carousel
like I had before:

When I go back to that same area of code and change “imgwithcarousel” to
false, that keeps the new large image but removes the entire carousel:

So far, I haven’t figured out how to remove the small image BUT keep the
carousel, but for now I think this is my best option. I’ll keep trying and
will update you if I really fix it, but I think at this point I prefer the
large single image vs. the carousel of small, low-res images. Hope this
helps you a bit!

5 Likes

Thank you! This is definitely better than it was.

Thankyou. This has helped me sort my problem with blurry product images!

“modalProduct”: {
“contents”: {
“img”: true,
“imgWithCarousel”: true,
“button”: false,
“buttonWithQuantity”: true
},
“styles”: {
“product”: {
@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
},
“main-image-wrapper”: {
“display”: “none”
}
},

That should do the trick. Works for me.

1 Like

Been looking for this fix for a minute, THANK YOU!!!

This works to be able to have one high quality image, is it possible to have all of them high quality?

https://apps.shopify.com/full-view?refby=sc