When I import my custom theme, the image quality looks bad on the collection pages, the same image look shigh quality when I use a shopify theme, how do I fix this error
You need to see how image elements are rendered there.
If it’s completely custom, then the theme dev should have taken care about proper image sizing, if it’s a heavily modified theme, then people often change from width-limited collection grid to a full-bleed one without changing the image dimensions.
Anyways, need to see the theme preview (at least) and a Liquid code to suggest anything more concrete.
That was spot-on though:
A bit of explanation:
originally, the theme has a “page width” which limits width for most sections. By default it’s 1200px.
So the theme code “knows” that if the browser is wider than 1200px and there are 4 products shown per row, each product image would be no wider than 300px (it’s a bit more complex than that, but).
Your page width limit is removed, so when your screen is, say 2000px wide, the image will be stretched to 500px, but the theme does not “know” this and still requests a 300px-wide image file.
You need to find this code – there are 3 places in this file, change all of them:
and replace the code on this line with this:
sizes="(min-width: 990px) calc(100vw / 4), calc(100vw / 2)"
This, basically, instructs the theme to load files which are half of the window width if window is less than 990px wide and quarter of the window width – if the window is wider than that.
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it