Blurry images with Buy Button (Spotlight theme)

Solved

Blurry images with Buy Button (Spotlight theme)

hanif-j
Visitor
2 1 0

Hey everyone! I'm new here, and while this may have been answered, I still have not found it...

- I'm setting up a store and am using the Spotlight theme with a starter plan.
- I'm using the Buy Button feature to embed within product listings on my website (Ghost CMS).

- All the Buy Button product thumbnails are quite blurry - (including in the Shopify Buy Button creation app)
- All my other product images in Shopify are fine (they are all 2048 x 2048 px)

Here's a link to an example embedded buy button on my site (click 'view options') :
https://www.thereluctantillustrator.com/gallery/small-car/ 

I've attached screenshots from the Buy Button feature in Shopify, as well as from my site – though they probably get super compressed in the upload 😕

blurry-buy-button-shopify.png

blurry-buy-button-site.png

 


Not sure how to fix this - any help or insight would be most appreciated!

Thanks in advance.

Accepted Solution (1)

hanif-j
Visitor
2 1 0

This is an accepted solution.

OK - I found a workaround, dropping the image carousel (with the crappy thumbnails) and going with a larger image. Since an image is configured to each specific variant, this is still workable even without the carousel - and the images are way better.

I took a cue from an earlier post about editing the buy button code.

Edit the buy button embed code, under modalProduct...

set img: to true, and imgWithCarousel: to false


blurry-buy-button-madal.png

 

Result:

blurry-buy-button-no-carousel.png

Images update with each variant selected. I'm hoping there is a setting for this when generating a button!

Tx.


 

View solution in original post

Reply 1 (1)

hanif-j
Visitor
2 1 0

This is an accepted solution.

OK - I found a workaround, dropping the image carousel (with the crappy thumbnails) and going with a larger image. Since an image is configured to each specific variant, this is still workable even without the carousel - and the images are way better.

I took a cue from an earlier post about editing the buy button code.

Edit the buy button embed code, under modalProduct...

set img: to true, and imgWithCarousel: to false


blurry-buy-button-madal.png

 

Result:

blurry-buy-button-no-carousel.png

Images update with each variant selected. I'm hoping there is a setting for this when generating a button!

Tx.