Dawn Theme Blurry Banner and Featured Collections Image

Store Design
1

I have tried multiple solutions including modifying codes as in previous topics but none works for me. The banner and featured collection image still look extremely blurry. For the uploaded image, my banner is 5942 x 2433 (jpeg) and individual product image is 4000 x 2667 (png). The image quality looks good when uploading and even if I download it from the shopify editor. I wonder what might be a solution to this?

2

Hi @xoi28

You can try go to your Online store > Themes > Edit code > open image-banner.liquid file, find this line of code

assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

Change to this

assign widths = '750, 750, 750, 3840, 3840, 3840, 3840, 3840, 3840'

For image quality on featured collection, please change settings of Product card > Image ratio is Adapt to image

![Screenshot 2023-11-20 at 10.52.57.png|1902x683](upload://haTaRDLvRYwPSA1dpu6Ji2S92k4.png)
3

Hi! Appreciate the response. My feature collection settings is already at adapt to image. However, I noticed that if I chose to have less 4 items per row, the image will be blurry. However, such issue does not happen with 4 or 5 items per row. Do you have any work-around for this issue?

4

Could you send me your page link to check?

5

Yes, it is at https://sommerholic.com/

6

You can try to open your card-product.liquid, find those lines of code

{%- 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 -%}

Change to this and check again

{%- 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: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- 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 -%}
7

Yes I tried that. didnt work for me…