This is strange. I am using the theme Sense and when I go to my product page the images are kinda blurry.
But here is the strange part, if I use CTRL + mouse wheel to zoom in and out, the images become higher res.
These 2 screenshots are taken from my page, one first and the other after I zoom back and forth.
How do I edit my theme code so that it always shows the higher resolution version? Does anyone have an idea?
Hi @Vranklin ,
Go to Online Store > Themes > Edit Code > Sections > main-product.liquid
Find something like this {{ media | image_url: width: 800 | image_tag }}
change the above line with this
{{ media | image_url: width: 2048 | image_tag }}
now go to Assets > base.css and add this at bottom
img {
image-rendering: auto !important;
}
save and refresh preview.
Thanks
Manoj
Here’s you can see it more clearly, these are both the exact same same image screenshotted from the exact same page at 100% page zoom. The only difference that I zoomed in and out (for example to 110% and back to 100%) and the res becomes higher.
I want the images always to be as high res as possible, that’s the idea.
Thanks for the response. I don’t see that code in main-product.liquid.
Do you mean this in product-media.liquid?
And when I add the CSS, do I put it at the absolute bottom outside all the brackets?
@Vranklin please share your store url and password if password protected.
Store URL is Kitsunematcha.de
@Vranklin
Shopify Admin → Online Store → Themes → Edit Code
open sections/main-product.liquid or also check snippets/media-gallery.liquid
Find the tag for product images with srcset and sizes
replace this line
sizes="(min-width: 750px) calc(100vw - 22rem), 1100px"
with this line
sizes="(min-width: 990px) 800px, 100vw"
Save and refresh preview
If I help you to solve the query don’t forget to like and mark it as solution.
Thanks
Manoj
I found that line that you said but it was in product-media.liquid.
Changed it to
But the same problem from before remains.
Hi @Vranklin ,
Can you please provide the store URL to generate issue and provide you the proper solution?
Store URL Kitsunematcha.de
@Vranklin
To do this Please share collaborator code in PM.
So, here are the steps you can follow
Go to your Theme Code Editor:
From your Shopify admin, go to Online Store > Themes.
Click Actions > Edit code for the Sense theme.
product-card.liquid or product-grid-item.liquid:Look for a file under snippets or sections called something like:
product-card.liquid
Or
product-grid-item.liquid
Or in newer themes: main-product.liquid or product-media-gallery.liquid
Use the Search bar to search for img_url.
img_url:It will look something like:
img_url
It will look something like:
{{ product.featured_image | img_url: ‘300x300’ }}
Change to a higher resolution:
Update it to use a larger value:
{{ product.featured_image | img_url: ‘1024x1024’ }}
If you find it difficult, please share the collab code here and we will fix it for you.
I believe there’s a master liquid tag that you can add at the end within the double curly brackets.
So just as image_url is used as a parameter, after that add this | master or | ‘master’
Hope this helps.
Best
I found this line of code and changed it to a higher resolution. But it doesn’t seem to do anything.
I think I might try to install a newer theme, Sense is maybe not that great of a theme.
@Vranklin Can you try to change the width to
widths: ‘320, 480, 640, 800, 1024, 1280, 1600’
If it didn’t worked, you might be checking at wrong place. So, basically, I recommend that to provide the collab code here or you can use the new theme (DAWN theme is the best).
It’s up to you…
Thanks for the help. I did that and still it has no effect on the images.
What is a collab code? I just paste it in here and you can edit my theme?
