Collection page banner not taking 100% of the page's space

Store Design
, ,

Topic summary

A user is trying to make their collection banner images occupy 100% of the viewport height (above-the-fold space) on their Shopify store, as they did previously. They’re using the Dawn theme (version 15.0.2).

Current Issue:

  • Banner images don’t fill the full viewport height
  • Screenshots provided show the current vs. desired appearance (note: text in original post appears reversed/encoded)

Proposed Solution:

  • Navigate to Online Store > Themes > Edit code
  • Locate the collection banner liquid file
  • Find and replace specific markup code
  • Save changes

Status: The discussion appears to have one proposed technical solution involving theme code customization, but it’s unclear if the solution was tested or resolved the issue. The code snippet details in the response are partially cut off or unclear.

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

Hello Shopify Community,

We want to make our collections banner images take 100% of the space of the page (the one that appears when loaded, before the user scrolls down) like they used to in the past. Does anyone know how we can fix this? Any advise will be appreciated. Bellow we provide some screenshots of the current appearance and the desired one to help you understand this more accuratelly.

Here you can see how the banner appears currently
Here you can see how the banner appears currently1919×881 381 KB

Here is how we want the banner to be presented.
Here is how we want the banner to be presented.1919×881 203 KB

our page: jacqueshermes.com we use the Dawn theme (version 15.0.2)

Thank you for your time,

Jacques Hermes team

2

Go to Online Store > Themes. Click on the … and press Edit code.

Find main-collection-banner.liquid

Find the code

Substitute for

Save