Shopify themes, liquid, logos, and UX
Hey everyone -
I'm currently using Dawn and there's a page where I'm displaying a collection of all of my photography prints. Within the product grid, the photos in portrait orientation are sharp but the photos in landscape orientation are blurry.
Previously, both portrait and landscape orientation photos were blurry. I fixed it by going into Snippets > card-product.liquid and replaced lines that started with 'sizes=' to the following:
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px, (min-width: 990px) calc((100vw - 130px) / 1), (min-width: 750px) calc((100vw - 120px) / 1), calc((100vw - 35px) / 1)"
So I managed to fix the blurriness for portrait orientation product photos but not landscapes. Any ideas?
URL: https://shop.bigmountainsguy.com/collections/all-prints
Solved! Go to the solution
This is an accepted solution.
This is an accepted solution.
Here is the default theme code https://github.com/Shopify/dawn/blob/3f4284a1284c7c2bf3708a2f9f3c5a3bd69d0597/snippets/card-product.... :
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px,
(min-width: 990px) calc((100vw - 130px) / 4),
(min-width: 750px) calc((100vw - 120px) / 3),
calc((100vw - 35px) / 2)
"
which is obviously bull**bleep** because it's hard-coded for 4-per-row for screens wider than 990px, 3-per-row for between 990 and 750 and 2 per row when less than 750, and allowance for padding is hard-coded too.
Since you always have single product per row, your code
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px,
(min-width: 990px) calc((100vw - 130px) / 1),
(min-width: 750px) calc((100vw - 120px) / 1),
calc((100vw - 35px) / 1)
"
goes in right direction, but not quite.
Considering how your padding is set, it should be:
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px,
(min-width: 750px) calc(100vw - 100px),
calc(100vw - 30px)
"
Currently on screen wider than 1200px, your image is shown 1100px wide, but width calculation produces 1070, which is 30px less than necessary.
However, second problem is how your srcset is done -- the widest sizes it provides are 1066pixels and then it is immediately original width of your images, which is almost 5500 for landscapes.
So currently, for screens wider than 1200px theme shows the image of original size. Which is a significant resize and may indeed look blurry. Your portrait images are originally about 3500px-wide, so it's less of a resize.
So I'd add width of 1100 to srcset and then provide for double pixel density for Retina-like screens too:
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1100 -%}{{ card_product.featured_media | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if card_product.featured_media.width >= 1440 -%}{{ card_product.featured_media | image_url: width: 1440 }} 1440w,{%- endif -%}
{%- if card_product.featured_media.width >= 2200 -%}{{ card_product.featured_media | image_url: width: 2200 }} 2200w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
This should provide proper'ish sizing and avoid loading images which are unnecessary large.
Hopefully, this will make them look better.
This is an accepted solution.
I fixed it by removing this block of lines.
This means that system will always serve the original size image, even on smallest screens.
Basically it means loading image sizes that are 10 times larger. Try opening your site via mobile service now.
Your PageSpeed will degrade because of this.
This is an accepted solution.
Here is the default theme code https://github.com/Shopify/dawn/blob/3f4284a1284c7c2bf3708a2f9f3c5a3bd69d0597/snippets/card-product.... :
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px,
(min-width: 990px) calc((100vw - 130px) / 4),
(min-width: 750px) calc((100vw - 120px) / 3),
calc((100vw - 35px) / 2)
"
which is obviously bull**bleep** because it's hard-coded for 4-per-row for screens wider than 990px, 3-per-row for between 990 and 750 and 2 per row when less than 750, and allowance for padding is hard-coded too.
Since you always have single product per row, your code
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px,
(min-width: 990px) calc((100vw - 130px) / 1),
(min-width: 750px) calc((100vw - 120px) / 1),
calc((100vw - 35px) / 1)
"
goes in right direction, but not quite.
Considering how your padding is set, it should be:
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px,
(min-width: 750px) calc(100vw - 100px),
calc(100vw - 30px)
"
Currently on screen wider than 1200px, your image is shown 1100px wide, but width calculation produces 1070, which is 30px less than necessary.
However, second problem is how your srcset is done -- the widest sizes it provides are 1066pixels and then it is immediately original width of your images, which is almost 5500 for landscapes.
So currently, for screens wider than 1200px theme shows the image of original size. Which is a significant resize and may indeed look blurry. Your portrait images are originally about 3500px-wide, so it's less of a resize.
So I'd add width of 1100 to srcset and then provide for double pixel density for Retina-like screens too:
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1100 -%}{{ card_product.featured_media | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if card_product.featured_media.width >= 1440 -%}{{ card_product.featured_media | image_url: width: 1440 }} 1440w,{%- endif -%}
{%- if card_product.featured_media.width >= 2200 -%}{{ card_product.featured_media | image_url: width: 2200 }} 2200w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
This should provide proper'ish sizing and avoid loading images which are unnecessary large.
Hopefully, this will make them look better.
Hey just wanted to say thank you. I saw your first comment and did see that the page speed went down significantly. I realized I need to meet at some sort of a middle ground where images are relatively sharp and doesn’t kill the speed and then I saw your 2nd comment with everything I needed! Thank you so much!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025