Why are my product hover images blurry on my collection pages?
hey @Cihaty
This is issue from image rendering
head to Online Stores>Themes>Edit Code
Find card-product.liquid
Find this part
You can remove the lines from here this adjust the resolution of the image rendered, try removing the first 2 line from both of the image set
it should look like this
It will fix the issue.
You earlier said you fixed the first image quality by yourself, I suggest you revert it back and use this method instead.
If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!
Good afternoon!
We discovered this article, and it's solid (lead us on the right track as far as getting to card-product.liquid). However, the line of code that was originally suggested was not within our coding.
I then utilized ChatGPT, with their Shopify Sidekick GPT. I was able to resolve the issue by finding the line: {{card_product.media[1] | image_url: width: 100 | image_tag: loading; 'lazy', height: height1, sizes; sizes1, ..... (see image below)
The image below points out the only change I had to make. I had to change the width from 100 to 1000, and this worked!
Just wanted to get this out there in case anyone else runs into this issue. I also have to give thanks to ChatGPT and Shopify Sidekick for going over the current code and pointing out this exact change that was needed. 🙌🙏
Just to make sure that this is communicated clearly, we are currently using Vivid version 1.0.5, so that may have been the difference in coding from the original answer provided here.
