Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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`?
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?
Indeed, my images are big enough! 🙂
I am using the theme Flow
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.
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.
But this is not what you were looking for of course.
Any other suggestions? 🙂
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.
Sure, what can I do to make this work?
I sent a request to access your themes, you should get an email to approve or deny me.
You should have access.
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
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.
Wow! Did not see that coming. I will check it out right now.
What other images are blurry? All I see look pretty crisp
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)
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
Hey man!
Is it possible that you could help me out aswell?
Pretty sure I have the same problem:
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!!
hi, i am having a very similar problem. I use flow theme. Can u help me with that?
Okay thanks, I contacted the theme creators. I am waiting for their answers. I hope they can help me too.
Way more complex then I can understand!
I appreciate your time and effort! ☺️
Am I right that your line must be somewhere in the circled part? Or am I looking in the wrong direction?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024