Collections Image Size

Store Design
1

Hi,

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

no1apparels_0-1740718686387.png
no1apparels_0-1740718686387.png1902×695 124 KB

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

2

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 tag

RESULT

Moeed_0-1740719001338.png
Moeed_0-1740719001338.png1900×916 88 KB

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

Best Regards,
Moeed

3

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

4

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

5

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.