Why are my product thumbnails blurry on my Craft theme?

Hi all,

This is a re-repost (third time). In the previous posts, moderators offered to help and asked for my store URL/password. I refuse to put it out to the public so they stop replying. I also contacted Shopify Support by email last week - no reply. So this is my third attempt.

The issue is, my product thumbnails (in the product page or whatever) are blurry/low-res, sometimes it changes to high-res after I click on them or even hover on them.

The pictures are use are 2000x2000 pxls, the theme I’m using is Craft.

I am paying a monthly subscription and I need my shop to be published ASAP.

Thank you!

Hello @jom_1 If you are experiencing blurry or low-resolution product thumbnails in your Shopify store, there are a few possible causes and solutions that you can try. Here are some steps that you can take to troubleshoot and fix this issue:

  1. Check the size of your product images: One possible cause of blurry or low-resolution product thumbnails is that your product images are not large enough to display at high resolution. To fix this, you can try uploading product images that are at least 2048x2048 pixels in size, which is the recommended minimum size for product images in Shopify.

  2. Optimize your product images for web: Another possible cause of blurry or low-resolution product thumbnails is that your product images are not optimized for web use. To fix this, you can try using image editing software, such as Photoshop, to optimize your product images for web use. This can include reducing the file size, adjusting the image resolution, and using the appropriate image format (such as JPEG or PNG) for your product images.

  3. Check your theme settings: The theme that you are using for your Shopify store may also be contributing to the blurry or low-resolution product thumbnails. To fix this, you can try checking the settings for your theme, and looking for any options related to image size or quality. Some themes may allow you to adjust the size of product thumbnails, or to enable features such as lazy loading or image resizing, which can improve the quality and performance of your product images.

Overall, there are several potential causes and solutions for blurry or low-resolution product thumbnails in a Shopify store. By following the steps above, you can troubleshoot and fix this issue, and ensure that your product images are displaying at high resolution and high quality.

Thanks for your reply! Sadly I tried all of the above, I’m thinking it has something to do with “lazyloading” in the code. I’m not an expert so I wouldn’t know where to begin.

I apologize if you were not satisfied with the previous replies to your question. As a large language model trained by OpenAI, I don’t have any information about your specific store or the theme you’re using, so I can’t provide specific instructions or troubleshooting steps for your issue. However, I can offer some general guidance that may help you resolve the problem with blurry product thumbnails on your website.

One potential cause of blurry product thumbnails is that the images you’re using have been resized or compressed in a way that reduces their quality. To fix this, you can try uploading higher-resolution versions of your images to your website, or using an image optimization tool to reduce the file size without sacrificing too much quality.

Another possible cause of blurry product thumbnails is that the theme you’re using is not displaying the images at their full resolution. In this case, you may need to adjust the settings of your theme or contact the theme developer for assistance.

Finally, it’s also possible that the issue is related to your website’s caching settings. When a website is cached, certain elements (including images) are stored in the browser’s memory so that they can be quickly accessed on subsequent page loads. If the cache is not cleared or refreshed regularly, it can cause images to appear blurry or outdated. To fix this, you can try clearing your website’s cache or adjusting the cache settings in your website’s settings or admin panel.

Overall, there are a few different potential causes of blurry product thumbnails, and the best way to fix the problem will depend on your specific situation.

I would recommend reaching out to the theme developer or Shopify support for more detailed assistance, as they will be able to provide guidance and support based on your specific store and theme.

Hi @jom_1

Hope you are well! I am using Dawn theme and am going through something similar but I have removed the zoom in function/magnifying glass currently. I have a feeling this could be the issue for mine as right now customers have to zoom in on their entire page (mobile/desktop) if they want a closer look of my products. Shopify are looking into this for me though as my images are taken by a professional photographer and the images are super crisp on my Mac and iPhone. @SocialAutoPost do you think the reason for mine could be due to the above? I have coded out the zoom feature. Happy to give you my store URL/password for you to take a look at what I mean :slightly_smiling_face: Thank you, Ankita

Thanks for the effort, I will do what I can to reach the developer. Wish you all the best :slightly_smiling_face:

@Ankita31 ! Glad you reached out! I will look into the code and keep you updated if you’d like. I reached out to Shopify too but sadly I’m not getting any response. :wink:

Hey @jom_1 let me know if you want me to look at your store, happy to help you and to also figure out if yours is similar to mine :slightly_smiling_face:

I think mine could be blurry due to me taking off the zoom option, but let me know if you want me to check! I will keep you posted too!

@Ankita31

It’s difficult for me to say for certain without seeing your website, but removing the zoom function/magnifying glass could potentially be the cause of the issue you’re experiencing with your product images.

The zoom function/magnifying glass is typically used to allow customers to get a closer look at product images, so if it’s been removed, customers may have to zoom in on their entire page to see the images in more detail. This could potentially cause the images to appear blurry or low-resolution on some devices, depending on their screen size and resolution.

If your product images are high-resolution and taken by a professional photographer, it’s likely that the issue is not with the quality of the images themselves, but with the way they are being displayed on your website. I would recommend reaching out to Shopify support for assistance with troubleshooting the issue and finding a solution that works for your website.

Hi @SocialAutoPost

Thanks for your reply! That makes sense, I have removed the magnifying glass and the zoom option as I did not like the way it looked however, I am in contact with Shopify already who are kindly looking into the matter for me. Yes that is correct, currently a user would have to zoom into the entire screen to see a closer look at my image as opposed to being able to use the magnifying glass option. I will have a little look as I have seen other threads here helping others regarding the sizing of the box that appears when zooming into images and looking to hide the magnifying glass as I personally do not like it. Thank you anyways :slightly_smiling_face:

@Ankita31 Thanks for the proposition, if I can’t find any solution by the end of the week I will for sure consider it!

Same goes for you, if you need me to look at your store I can give some suggestions or advice if you’d like :slightly_smiling_face: