Can you have different header colours depending on the page that the customer is viewing?

iannetelli · ‎06-17-2024

As on my homepage I have added code for a transparent header.. So all my text and logos are in white with the banner video image showing as the background. which is what I want. But I would like a different header background colour on All the other pages Preferably (#c89c2b) without changing the homepage transparent background?

Dan-From-Ryviu · ‎06-18-2024

I have little issue with this code. Please update again

{% if template == 'index' %}
<style>
.section-header .header-wrapper { background: transparent; }
.section-header.scrolled-past-header { background: #c89c2b; }
#MainContent { margin-top: -233px; }
@media (max-width: 749px) {
#MainContent { margin-top: -105px; }
}
</style>
{% else %}
<style>
.section-header .header-wrapper { background: #c89c2b;  }
.section-header .header-wrapper .header__inline-menu summary.list-menu__item,
.section-header .header-wrapper .header__inline-menu .header__active-menu-item,
.section-header .header-wrapper .header__inline-menu > ul > li > a { color: #fff; }
@media (max-width: 749px) {
.header__icon, .header__icon--cart .icon {
color: #fff !important;
}
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Made4uo-Ribe · ‎06-17-2024

Hi @iannetelli

Are you familiar with codes? Would you mind to share your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

iannetelli · ‎06-17-2024

hi there, i am only familiar in the sense of step by step tutorials, i haven't ever wrote code by hand

My url is www.iannetelli.com

Made4uo-Ribe · ‎06-17-2024

Thanks for the info, chck this one to change the background color on other pages except homepage.

You can check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.

{% unless template.name == 'index' %}
<style>
.header-wrapper.color-background-1.gradient {
    background: #c89c2b;
}
.header-wrapper.color-background-1.gradient * {
    color: white;
}
</style>
{% endunless %}

And Save.

result:

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Dan-From-Ryviu · ‎06-17-2024

Hi @iannetelli

Please go to Online Store > Themes > Edit code > open theme.liquid file, after <head> tag, add this code

{% if template == 'index' %}
<style>
.section-header .header-wrapper { background: transparent; }
#MainContent { margin-top: -226px; }
@media (max-width: 749px) {
#MainContent { margin-top: -92px; }
}
</style>
{% else %}
<style>
.section-header .header-wrapper { background: #c89c2b;  }
.section-header .header-wrapper .header__inline-menu summary.list-menu__item,
.section-header .header-wrapper .header__inline-menu .header__active-menu-item,
.section-header .header-wrapper .header__inline-menu > ul > li > a { color: #fff; }
@media (max-width: 749px) {
.header__icon, .header__icon--cart .icon {
color: #fff !important;
}
}
</style>
{% endif %}

Result on homepage

Other pages

Hope this help!

Best regards,

Dan from Ryviu

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

iannetelli · ‎06-18-2024

Works perfectly thaankyou, just one more thing? how would I get the sticky header to change background colour but only on scroll? on the homepage?

Dan-From-Ryviu · ‎06-18-2024

What color do you want?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

iannetelli · ‎06-18-2024

(#c89c2b) if thats possiable? if i wonted to change this would you be aable to show me where if that ok?

Dan-From-Ryviu · ‎06-18-2024

Please update your code

{% if template == 'index' %}
<style>
.section-header .header-wrapper { background: transparent; }
.section-heade.scrolled-past-header { background: #c89c2b; }
#MainContent { margin-top: -233px; }
@media (max-width: 749px) {
#MainContent { margin-top: -105px; }
}
</style>
{% else %}
<style>
.section-header .header-wrapper { background: #c89c2b;  }
.section-header .header-wrapper .header__inline-menu summary.list-menu__item,
.section-header .header-wrapper .header__inline-menu .header__active-menu-item,
.section-header .header-wrapper .header__inline-menu > ul > li > a { color: #fff; }
@media (max-width: 749px) {
.header__icon, .header__icon--cart .icon {
color: #fff !important;
}
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

iannetelli · ‎06-18-2024

Has not seemed to work?

Dan-From-Ryviu · ‎06-18-2024

I have little issue with this code. Please update again

{% if template == 'index' %}
<style>
.section-header .header-wrapper { background: transparent; }
.section-header.scrolled-past-header { background: #c89c2b; }
#MainContent { margin-top: -233px; }
@media (max-width: 749px) {
#MainContent { margin-top: -105px; }
}
</style>
{% else %}
<style>
.section-header .header-wrapper { background: #c89c2b;  }
.section-header .header-wrapper .header__inline-menu summary.list-menu__item,
.section-header .header-wrapper .header__inline-menu .header__active-menu-item,
.section-header .header-wrapper .header__inline-menu > ul > li > a { color: #fff; }
@media (max-width: 749px) {
.header__icon, .header__icon--cart .icon {
color: #fff !important;
}
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

akesoo · ‎11-30-2024

Hi Dan,

can you help me i have a similar issue, im using Nitro as my theme, in my homepage i have a transparent inline banner and i used white font works just fine but as i click shop or other pages, the wordings arent visible and i'd like to have a different color background for the inline banner in other pages please help me!

Can you have different header colours depending on the page that the customer is viewing?

Can you have different header colours depending on the page that the customer is viewing?

Community Blog Articles