Collections Image Size

[no1apparels]

Hi, 

I'm having some issues with getting the collection image to appear perfect on the collection page.

How do I know what's the best resolution for it to appear best?
Thank you in advance!

[Moeed]

Hey @no1apparels 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.collection-banner__img img {
    object-fit: contain !important;
}
</style>

RESULT

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[no1apparels]

Hey Moeed, thanks for sharing! 
How do I know what's the resolution required to cover the entire stretch from left to right?

[Moeed]

For desktop, try a picture that is bigger in width and low in height because the current picture which you have added will look good for mobile only.

Best Regards,

Moeed

[oscprofessional]

Hi @no1apparels ,

You can try these optimized image sizes for better performance and display across devices:

Desktop: 2000px × 800px – This size maintains high quality while reducing file size, ensuring a good balance between clarity and performance.

Mobile: 1200px × 800px – This resolution keeps images clear on smaller screens while improving loading speed.