How to optimize collection banner size and quality?

Store Design
1

Hello, I’m currently struggling with making the collection banners the correct size and quality. I’ve tried multiple different photo sizes and I’ve never been able to find one that fits correctly. And If i get close to an image size that fits then my quality becomes really bad. I’m not sure if I just don’t have the correct PX sizes or if this is a coding issue.

I’ve Included two photo: one with a better quality photo but the images are cropped, and one with a better size ratio but the quality is poor.

I would appreciate if anyone has any tips or tricks that would be helpful. Also I’m not very familiar with the coding side of Shopify so if this is a coding issue please take that into consideration when explaining.

Screen Shot 2024-02-19 at 1.42.30 PM.png
Screen Shot 2024-02-19 at 1.42.30 PM.png3584×2240 1.03 MB

Screen Shot 2024-02-19 at 1.42.37 PM.png
Screen Shot 2024-02-19 at 1.42.37 PM.png3584×2240 1.02 MB

2

Hey @SkylorB

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-1708369425432.png
Moeed_0-1708369425432.png1899×863 338 KB

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

Best Regards,
Moeed

1 Like
3

Thank you so much! That worked perfectly, I really appreciate you taking the time to help me.

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.