Change color of header on Collection page

Topic summary

A Shopify store owner wants to change their collection page header color from pink to white.

Initial Solution Proposed:

  • Add custom CSS code targeting .header-wrapper with white background color (#ffffff)
  • Access via Online Store > Customize > Settings > Custom CSS

Problem Encountered:

  • The CSS solution changes the header color across all pages, not just the specific collection page

Advanced Solution Offered:

  • Use JavaScript in theme.liquid file to target only the specific collection URL
  • Script checks if current page matches the target collection URL before applying the white background
  • Code should be placed before the closing </body> tag

Status: The discussion provides a page-specific solution using conditional JavaScript, though implementation confirmation is pending. Note: Some text in the conversation appears corrupted or reversed, making certain technical details difficult to verify.

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

Hi!

I would like to change color of header of our collection page from Pink to White. Any help would be appreciated!

URL: https://bonebox.fi/collections/hannanheiluttavat-koiran-lelut
Screenshot: Attached

Go to your online store > Customize > Settings > Custom css
and paste this code in cutom css section

.header-wrapper {
background: #ffffff;

}

Hmm. Didn’t seem to work :confused:

Try this

.header-wrapper {
background: #ffffff !important;

}

and if still not worked share collaborator access with me and i will fix it for you
my email address is asadmahmood8470@gmail.com

hi thanks for this answer, for me its currently changing the header color for every page. is there a way to have it only change the header color of a specific page?? thanks again for the help

yes, you can do that by adding the below code in your theme.liquid file before end body tag