Collection banner too much space

Technical Q&A

Topic summary

Problem: The collection banner on the store’s collection pages is too tall, especially on mobile where products aren’t visible above the fold; desktop could also be slightly smaller. Screenshots illustrate the issue on both devices.

Recent updates: A request was made to share the store URL for easier diagnosis; the store URL was provided (pool-care.be). Two solutions were proposed:

  • theme.liquid approach: Add custom code above the closing tag (theme.liquid is the main layout file in Shopify). A result screenshot suggests a reduced banner on mobile, but the actual code snippet is not visible in the thread.
  • CSS approach: Edit the main CSS file (main.css/base.css/style.css/theme.css) and reduce .page-title padding to 3rem, with a mobile media query (max-width: 749px) to 2rem. Result screenshots show a smaller banner.

Notes: Effectiveness may depend on the theme’s selectors; ensuring the correct class (.page-title) matches the theme is key. Images are central to understanding both the problem and outcome.

Status: No confirmation yet that either fix was implemented or resolved the mobile above-the-fold issue; discussion remains open pending testing on the provided URL.

Summarized with AI on December 17. AI used: gpt-5.
4

Hey @pool-care

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-1727870032100.png
Moeed_0-1727870032100.png380×680 50.5 KB

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

Best Regards,
Moeed

1 Like