A Shopify store owner using the Dawn theme wants to customize header and footer background colors for specific collection pages and their associated product pages. Two collections require different colors: one needs #061129 (navy blue) and another needs #F5F5F5 (light grey).
Solution Progress:
Initial fix involved adding Custom Liquid sections in the theme Customizer (not editing theme files directly) with conditional CSS based on collection handles
Evolved to use template suffix checking instead, allowing easier management: checking template.suffix rather than individual collection/product handles
Successfully resolved footer localization buttons and product page styling
Remaining Issues:
Header dropdown menus still display original colors instead of matching the page background
Search results page header remains unchanged
Attempted solutions using color-background-2 class modifications haven’t worked
Current Status:
The discussion remains open with the original poster seeking help for the final styling issues affecting header dropdowns and search pages. The helper (tim_1) provided multiple code snippets using Liquid conditionals and CSS targeting, but the last suggested approach hasn’t resolved all problems.
Summarized with AI on October 27.
AI used: claude-sonnet-4-5-20250929.
Hello,
I’m using Dawn theme and I’ve tried searching online for code to change the background color of the header and footer for specific collections/templates however everything I’ve found hasn’t worked when I tried to tailor the code to my website.
Basically what I want is for the header and footer to match the background colour of the collection page.
The collections I’d like to change are the following:
Thank you for the response.
Just to clarify, do I highlight the “footer-group.json” section then click “add new section”? (see attached image)
When I added a new section and named it “footer-custom” and added your code to that file, it didn’t change anything on the website.
I see, thank you very much! That worked perfectly.
However I now see that the “Country/Region” and “Language” buttons in the footer are still the previous color.
How should I go about changing the colors of those buttons to match their respective page colors? (#061129 and #E1D996)
I also noticed that all the products in both those collections still have the original color headers and footers.
Can I use the same code in the footer custom liquid section for each product page that you provided before, but just change the “% case” name and “% when” name like this?
For example:
{% case product.handle %}
{% when “nismo-metal-keychain” %}
Forgive me if I’ve got the wrong idea, it’s just that all those products are assigned to multiple collections which will be a problem if the code only applies for the first matching collection.
Last paragraph – not quite what I meant – if product is assigned to both “car” and “artisan-japan”, the code will only trigger for “car”.
There are different ways possible and if you have different templates for products of “car” and “artisan-japan”, then you can simply add “Custom liquid” section to each of these templates and add CSS code without any conditional logic, say
for “car” products and
for “artisan-japan”.
Footer and Header groups are the same for all templates, so it’s the same code in “Custom liquid” – that’s why we need to check conditions. And makes sense if you do not want to create multiple templates.
“Custom liquid” inside Template can be different for different templates, so we may not need any liquid.
You can create the same look using different tools.
Thank you so much Tim! Again that code worked perfectly.
I’m sorry but I think this will be the last request, I now just noticed that all the sub-collections within the Car & Bike “parent collection” also still show the original header and footer color. Same thing with the Artisan Japan sub-collections:
All collections in Shopify are equal, there is no sub-collections or parent collections – it only shows like this on the front end in menu.
So , if product belongs to “nismo” the system does not know that there is a hierarchy.
The product can belong to both “car” and “nismo”, so in this case there is no need to check if product belongs to “nismo”, just need to check collection handles.
So you’d need to amend the code to include all these collections as well, like this (add more checks against collection handle as needed):
I guess this may become cumbersome and duplicate since you’ve already assigned specific template to those, so you may consider the alternate approach I’ve suggested in previous post.
And yes, you can instead check the template suffix, so the code can also be (not sure what your alternate template suffixes are – I can’t see them from outside, but can see collection handles):
Here I assume that both collection template and product template used for these collections has these suffixes. template variable is available on each page of the site, so can check it regardless whether it’s collection page or product page.
The “template.suffix” code was exactly what I needed. I can now edit & assign templates according to the custom css code, which I can play with confidently now. Thanks so much again Tim!
So the majority of the website is looking as expected now.
Although I noticed two minor things which still persist with the original color search results page and header menu drop down lists:
I see that the footer drop down lists for language and currency are the correct (same) color as it should be… so it seems like only the header is affected.
If it’s a change throughout entire page, then may also amend the class which defines a color scheme, like this. And I’ve also changed first conditional to match search template too
Thanks for the quick response Tim, however when I added another custom liquid section for the “color-background-2” code it didn’t work for some reason:
I tried putting the custom liquid section in the header too but it also didn’t change the menu background color.
The search results page was also unchanged.
Edit*
I included the actual template names that are used in the code too (which worked as I mentioned above in previous replies), and there didn’t appear to be any syntax errors:
