Solved

Why are my images blurry after upgrading to a 2.0 theme on Shopify?

Glenson
Excursionist
16 0 4

Hello all,

Today I upgraded my theme to a 2,0 theme and I noticed that almost all my pictures are blurry. I searched and read a lot about this problem, but no fix unfortunaly.

What I tried was big format pictures in png and jpeg. Also tried compressed very small. I tried I think all settings in the theme, but no luck there also.

What I noticed, and I think was a bit strange. When I uploaded a very big size jpeg it was blurry but the zoom was crystal clear.

Also in my previous theme there was no problem with the pictures. 

Hope someone can help me out because it is not helping my customers at the moment. 

https://musicproducervocals.com/collections/vocal-packs/products/pop-vocals-1-full-package 

Thank you for your help!
Glenn

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Holy shit I figured it out. I don't know if whatever I did is the most effective way of changing that, but I was able to get it done. Apparently your theme is using Vue.js, of which I know absolutely nothing about. But I was able to just use some reasoning based on what I was looking at and looking at some of their docs to at least pull the biggest image in your file. It may not be the correct way, but it's the best I can do not knowing what's going on exactly. Go ahead and preview the Ninthony Editing theme and make sure everything looks ok to you and then publish whenever you feel like it.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 26 (26)

extfox
Shopify Partner
6 0 1

Glenn, all you have to do is to replace the image on the product. I can see that your product it's using 300px image.

Can you share a snippet of what did you have at `sninppets/product-thumbnail.liquid`?

Ninthony
Shopify Partner
2329 350 1023

It's not using a 300px image, it's using an image that is coded to only display a 300px image. Replacing the image wouldn't do anything, his image is plenty big enough:

https://cdn.shopify.com/s/files/1/0564/7174/8799/products/Pop-Vocals-1-Box-vierkantoptimezed.jpg?v=1...

You'll have to change the code that's displaying it. What theme are you using?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Glenson
Excursionist
16 0 4

Indeed, my images are big enough! 🙂

I am using the theme Flow 

Ninthony
Shopify Partner
2329 350 1023

It's likely in a section file called "product-template.liquid"

You'll be looking for something that has "300x" in it, it'll probably look something like this:

 

{{ product.featured_image | img_url: '300x' }}

 

 

It also could be being rendered in a snippet though, I don't have any way to tell. Anyway if you can find that you can change 300x to "master":

 

{{ product.featured_image | img_url: 'master' }}

 

 

That'll give you the actual size of your image. If you can't find it just let me know and I can request access to your themes and try to get it sorted out for you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Glenson
Excursionist
16 0 4

Thank you for your help so far!

I can find this in the picture: 
I searched for the last 15-20min for something similar but no luck. 
Then I must say it is not only the product picture. As you can see, all other pictures have the same, well if they are bigger.

Screenshot 2021-09-24 at 21.32.39.png

 But this is not what you were looking for of course.

Any other suggestions? 🙂

Ninthony
Shopify Partner
2329 350 1023

Nothing other than letting me access your themes and take a look for you. Would you mind if I requested access? I'll just duplicate your theme and work on the duplicate.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Glenson
Excursionist
16 0 4

Sure, what can I do to make this work? 

Ninthony
Shopify Partner
2329 350 1023

I sent a request to access your themes, you should get an email to approve or deny me.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Glenson
Excursionist
16 0 4

You should have access.

Ninthony
Shopify Partner
2329 350 1023

So I'm taking a look, but the setup is incredibly complex. I don't know exactly how they're pulling off their approach here. They have a hash in their src attribute, and they have a bunch of custom properties in their elements. Like:

<img src="#" v-responsive="media.src" v-bind:alt="media.alt ? media.alt : product.title" >

 

It's like they're using javascript inside of their html somehow through these properties. I'm trying to find a way I can just target the featured image instead of messing with your thumbnails too, but no luck so far. I'll keep trying to figure it out. Just letting you know it's a quite a bit more complex than originally thought

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Holy shit I figured it out. I don't know if whatever I did is the most effective way of changing that, but I was able to get it done. Apparently your theme is using Vue.js, of which I know absolutely nothing about. But I was able to just use some reasoning based on what I was looking at and looking at some of their docs to at least pull the biggest image in your file. It may not be the correct way, but it's the best I can do not knowing what's going on exactly. Go ahead and preview the Ninthony Editing theme and make sure everything looks ok to you and then publish whenever you feel like it.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Glenson
Excursionist
16 0 4

Wow! Did not see that coming. I will check it out right now.

Glenson
Excursionist
16 0 4
Click to expand...
Yes that looks how it is supposed to. 

Only the product picture is ok now. All others are still blurry so it looks it is an overall theme setting in the script I suppose? 

About 14 hours ago I send a message to the developer asking what to do. If the let me know would you like to know the solution from there end? 
Ninthony
Shopify Partner
2329 350 1023

What other images are blurry? All I see look pretty crisp

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Glenson
Excursionist
16 0 4

The second and third picture on the page are really blurry on my end. Same as the product picture was. 
I need to zoom in a bit to see the blurry effect better. 

Some strange side note: the third picture with the marked circle was sometimes sharp and sometimes blurry. And not that I was aware of changing anything in between. (Maybe unknowingly by trying, that could be)

Glenson
Excursionist
16 0 4

54332FF0-2A60-4627-8D72-CD2FA0AE9853.png

Glenson
Excursionist
16 0 4

Thanks again! It works also when I add new product pictures.
Only the other ones are still blurry somehow. Also, after replacing.
Any suggestions on that?

Glenn


Kasperh9
Shopify Partner
12 1 2

Hey man!

 

Is it possible that you could help me out aswell?

 

Pretty sure I have the same problem:

https://community.shopify.com/c/shopify-design/flow-theme-product-page-images-are-blurred/m-p/136500... 

Glenson
Excursionist
16 0 4
Looks indeed like the same problem!

I contacted the template creator and they fixed it. Not sure what they did
to fix it.

Good luck with this!
Kasperh9
Shopify Partner
12 1 2

Ahhh okay. I see. Do you have the info on them so I could contact them real quick?

But hey. Im happy you got it fixed!!

Glenson
Excursionist
16 0 4
support@weareeight.com
itshan10
Excursionist
28 0 8

hi, i am having a very similar problem. I use flow theme. Can u help me with that?

Glenson
Excursionist
16 0 4
I advice you to contact the theme creators at eight.

I did that to solve it and they helped me.
itshan10
Excursionist
28 0 8

Okay thanks, I contacted the theme creators. I am waiting for their answers. I hope they can help me too.

Glenson
Excursionist
16 0 4

Way more complex then I can understand! 

I appreciate your time and effort! ☺️

Glenson
Excursionist
16 0 4

Am I right that your line must be somewhere in the circled part? Or am I looking in the wrong direction?

 



Screenshot 2021-09-24 at 20.50.45.jpg