MAKE HEADER NON-TRANSPARENT

Store Design
, ,

Topic summary

A user wants to make the header non-transparent (ideally black) on a specific tracking page to prevent content from sitting behind it.

Solutions Provided:

  1. Simple approach: Add CSS code to the theme.liquid file after the <head> tag to target the specific page.

  2. Comprehensive solution: A more robust method that:

    • Adds a dynamic class to the <body> tag based on the page URL path
    • Uses this class to apply non-transparent header styling to multiple pages (cart, about/story, track123)
    • Prevents errors on pages without banners
    • Includes detailed step-by-step instructions with code snippets and screenshots

Resolution: The user confirmed some pages intentionally have transparent headers but appreciated the solutions for future reference. The discussion appears resolved with working code provided.

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

Thanks heaps!