What's the ideal banner image size for collection pages?

Store Design
, , ,
1

Hi,

I’ve inserted an image (1700x400) in the description section of one of my collection. I was hoping the image to fit to the width of my website, but the image is not showing in full resolution (width-wise) once its displayed on the collection page. I’ve played around various resolutions but noticed that the wider I make the resolution, the whole image is getting shrinked (height-wise) to fit into the same small box as earlier. This is leaving me with a white space to the right side of my banner making it look weird (adjusting the spacing on the left is a workaround, but I’m not into that).

I’ve tried this on two themes, Canopy (by clean canvas) and Dawn, but both have the same issue. At this point, I was almost sure that it’s a core shopify issue, but when I contacted Shopify support what I understood from them is it’s a theme problem which happens to be in Canopy and Dawn both.

I’d really appreciate the help or pointers in the right direction from experts here.

Thanks

2

Hi @kklip
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

Hello @kklip

It’s default from theme

GemPages_0-1669261256416.png
GemPages_0-1669261256416.png1858×768 208 KB

You can follow these steps:

  1. Go to Online Store->Theme->Edit code
  2. Open your theme.liquid file, paste the below code before

GemPages_1-1669261590495.png
GemPages_1-1669261590495.png1607×896 64.7 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Hi @kklip ,

Go to Assets > base.css and paste this at the bottom of the file:

.collection-hero--with-image .collection-hero__inner {
    display: block !important;
}
.collection-hero__image-container {
  margin-left: 0 !important;
}

Hope it helps!

5

Hi @GemPages this looks promising. I’ll try this once I can edit the Theme code (now on trial). Thanks so much.

6

Hi @LitExtension I’ll have a go with this once I can edit the Theme code (now on trial). I appreciate this, thanks.

1 Like