welcome.
Topic summary
Goal: Decrease the hero/banner height on collection (category) pages in the Impact theme without affecting other pages.
Key steps and updates:
- A helper first suggested adding custom CSS in Theme settings to set media inside .content-over-media to a fixed height (e.g., 290px), adjustable as needed. This worked but also altered the homepage banner.
- To scope the change only to collection pages, they advised wrapping the CSS in a Liquid conditional that checks the template (Shopify’s templating language): place the CSS inside a {% if template contains ‘collection’ %} … {% endif %} block in theme.liquid near the end of the body.
Outcome:
- The scoped CSS successfully reduced the banner height only on collection pages; the homepage remained unchanged.
- The original poster confirmed the solution works. No further issues raised; discussion resolved.
Notes:
- “Collection pages” are product category listing pages in Shopify.
- Screenshots were shared to illustrate desired vs. current banner height but were not essential to the solution.