Set Banner Image Max-height for Collection pages

Store Design
, ,

Topic summary

A user seeks to limit banner image height to 150px specifically on collection pages (e.g., /collections/accessories) without affecting site-wide banners. Their initial CSS attempt using @media screen and .banner modified all banner heights globally rather than targeting only collection pages.

Three solutions were provided:

  • GemPages Support: Add CSS targeting a specific banner template ID (#Banner--template__...) to base.css, setting max-height: 150px and object-fit: contain

  • PageFly-Victor: Insert CSS wrapped in <style> tags into theme.liquid above </head>, applying rules to all collection pages only

  • Litos: Modify main-collection-product-grid.liquid directly with targeted code (screenshot provided)

Resolution: The user confirmed the issue is now resolved and working correctly.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to set a max-height for image banners for collection pages only. For example on the page: www.satanswookshop.com/collections/accessories …the “Accessories” image is much larger than the header logo. I would like to have it set a max-height of like 150px to keep it from scaling up so large. I found some code that works when editing the section-image-banner.css file

@media screen {
  .banner {
    max-height: 6rem; !important
  }
}

But this changes the height of ALL image banners site-wide. I just want to change it on the Collection pages only, but for ALL collection pages.

Any help is much appreciated!

2

Hello @spacetimerider
I would like to give you a solution to support you.

You can try using below code by following these steps:

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file.

#Banner-template--17841055793453__e665860e-fd81-435d-b1c4-666de58cf8d2{
  max-height: 150px !important;
}
#Banner-template--17841055793453__e665860e-fd81-435d-b1c4-666de58cf8d2 .banner__media img{
 object-fit: contain !important;
}

Best regards,
GemPages Support Team

1 Like
3

Hi @spacetimerider

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

This code will apply for all collections pages and only for the banner image

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
4

Hi @spacetimerider ,

Please go to main-collection-product-grid.liquid file and add code here:

Screenshot.png
Screenshot.png1083×851 46.5 KB

It will make the code work fine just for collection page.

Hope it helps!

1 Like
5

Thank you all for replying, it’s working great now!