Request for help configuring different header color schemes on the homepage versus all other pages in the Shopify Pitch theme. The poster has already created multiple color schemes and wants to apply one to the homepage header and another to non-homepage headers. They’re asking whether this can be done via theme settings or if it requires custom CSS, and they’re seeking examples. No solutions or follow-ups yet; the question remains open.
Hey all, I am using Pitch theme and I’ve already added multiple color schemes to my theme, and I’d like to use one color scheme for the homepage header and a different one for the headers on all other pages. What’s the best way to achieve this? Should I use custom CSS, or is there a theme setting that allows this?
Any guidance or examples would be greatly appreciated!
An easy way is to use liquid code
{% if template == 'index' %}
your code
{% endif %}
Hello there @Adj2308!
FYI, the Pitch theme does not support separate header colors per page natively in the customizer. Header settings are shared across templates, so CSS is required for different colors.
To apply the new color scheme to all other pages, here’s a CSS snippet you can add to base.css (or theme.css if base.css isn’t available):
body.template-index .header {
background-color: #000000; /* change to your homepage color */
}
body:not(.template-index) .header {
background-color: #ffffff; /* other pages color */
}
Hope this helps! 
By default, the theme’s header settings have 2 color options: Default and Inverse. You can change the Inverse color, then select Color scheme under Homepage to set a different color for the homepage and other pages.
Best regards,
Dan from Ryviu: Product Reviews App
@Adj2308 you can do it by using the combination of liquid code and css code as mentioned by @Maximus3
also you can check if your other pages have any specific unique classes or ids to set css for those pages.
Can you please share your website link? I can help you with that.
Thank you so much! https://talabi-2.myshopify.com/ password: pewthe
I would love the black header and white text icons only on the homepage (like the image below)
And white header with with black text and icons across the other pages (like the image below)
Hey @Adj2308
Follow these Steps:
{% if template == 'index' %}
<style>
header * {
background: black !important;
color: white !important;
}
</style>
{% endif %}
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
This amazing thank you! The header managed to change but I wanted the announcement bar background to be white with black text and and the remaining pages to be the opposite (black background and white text) Is there also a way I can use a different logo only on the homepage too (it’s a different colourway)
@Moeed , thank you so much for your help! The header managed to change, I would also like the announcement bar background to be white with black text and and the remaining pages to be the opposite (black background and white text) Is there also a way I can use a different logo only on the homepage too (it’s a different colourway)
