Change Default Collection Image Aspect Ratio (Dawn)

[KC14]

Hello Community,

I would like to have my Collection Image Aspect Ratio to be 16:9 by default. I saw that Dawn theme’s Collection Image Aspect Ratio is 1:1 by default, but that makes my Collection Images not full width, but only a square on the right side, which I don’t want.

I pasted a code from another community post which made the Collection Images full width, but when I add a 16:9 landscape Collection image it looks blurry (see screenshot). Even though they recommend to use images with a 16:9 aspect ratio. I think it’s because the default aspect ratio is still 1:1 because of Dawn theme.

So if anyone knows how to fix this for Dawn theme, I would really appreciate it

Thank you!

[made4Uo]

Hi @KC14 ,

The current image is not 16/9. Regarding the image being blurry. Are your able to provide a bigger image? Please see Shopify’s image size recommendation here

[KetanKumar]

@KC14

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[KC14]

Hi @made4Uo ,

The current image is 16:9 actually (1400x788). I tried these other resolutions, but they were all blurry as well:

2880x1660

1920x1080

1800x1000

1600x600

All the images on Mobile are nice by the way, but only on Desktop they end up being blurry.

Is there another way to have Non blurry full width Collection Images for Dawn theme?

Maybe if I revert the old code back so the Collection image has an Aspect Ratio of 1:1 again and is shown as a square on the right side. And from there on I can get a new code which implements the “right 16:9” full width and hopefully the images won’t be blurry.

Thank you!

[made4Uo]

Hi @KC14 ,

I would recommend make a duplicate theme and revert back to the old code. Please provide us the link of the theme with the old code. Thank you

[KC14]

Hi @made4Uo ,

Sure, I sent you a DM with more information

Thank you!

[made4Uo]

Hi @KC14 ,

Please use the following codes. Let me know if the issue persist

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

.collection-hero__inner.page-width {
    position: relative;
}

.collection-hero__text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.collection-hero__text-wrapper > * {
    color: #fff;
}

.collection-hero__image-container.media.gradient {
    margin: 0;
}

[KC14]

Hi @made4Uo ,

The issue is still there unfortunately. I noticed that the images are a tiny bit less blurry than the other code I used for the full width Collection images, but still blurry…

Are there some resolutions you recommend me to try for the 16:9 Collection images?

Let me know if you have other suggestions, thank you!

[made4Uo]

Hi @KC14 ,

Sorry about that. Let us try to change the intrinsic size of the image. Please follow the instructions below.

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, open the main-collection-banner.liquid
3. Please refer to the image below. Change the 750 to 1500 and delete the | minus: 100 | divided_by: 2

[KC14]

Hi @made4Uo ,

Thank you so much!! It worked perfectly!

It’s insane how you fix my problems so fast haha, thanks for all the help today

[happycamper]

Hello @KC14

Could you please help me by sharing the code you used for the Default Collection Image Aspect Ratio (Dawn)?

In your question you mentioned that you “pasted a code from another community post which made the Collection Images full width”

Do you still have the code and/or the link to where you found it?

Thank you

[georgieatgobo]

I am currently trying to accomplish this. Can you share the code you pasted from another community post please?