FROM CACHE - en_header
Promotion image

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

Solved

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

iannetelli
Tourist
5 0 1
‎06-17-2024 03:29 PM

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?

Labels:
1,598 Views
1 Like
Report
Accepted Solution (1)
In response to iannetelli

Dan-From-Ryviu
Shopify Partner
11691 2290 2472
‎06-18-2024 03:43 AM

This is an accepted solution.

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

1,494 Views
1 Like
Report
Replies 11 (11)

Made4uo-Ribe
Shopify Partner
10192 2418 3063
‎06-17-2024 04:00 PM

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.
1,587 Views
1 Like
Report
In response to Made4uo-Ribe

iannetelli
Tourist
5 0 1
‎06-17-2024 04:05 PM

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

1,580 Views
0 Likes
Report
In response to iannetelli

Made4uo-Ribe
Shopify Partner
10192 2418 3063
‎06-17-2024 05:18 PM

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:

Made4uoRibe_0-1718659133497.png

 

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.
1,560 Views
0 Likes
Report

Dan-From-Ryviu
Shopify Partner
11691 2290 2472
‎06-17-2024 11:14 PM

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 Screenshot 2024-06-18 at 10.13.32.png

Other pages 

Screenshot 2024-06-18 at 10.13.11.png

Hope this help!

 

Best regards,

Dan from Ryviu 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,524 Views
1 Like
Report
In response to Dan-From-Ryviu

iannetelli
Tourist
5 0 1
‎06-18-2024 03:01 AM

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?

1,511 Views
0 Likes
Report
In response to iannetelli

Dan-From-Ryviu
Shopify Partner
11691 2290 2472
‎06-18-2024 03:07 AM

What color do you want?

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,508 Views
0 Likes
Report
In response to Dan-From-Ryviu

iannetelli
Tourist
5 0 1
‎06-18-2024 03:10 AM

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

 

1,504 Views
0 Likes
Report
In response to iannetelli

Dan-From-Ryviu
Shopify Partner
11691 2290 2472
‎06-18-2024 03:16 AM

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,502 Views
0 Likes
Report
In response to Dan-From-Ryviu

iannetelli
Tourist
5 0 1
‎06-18-2024 03:39 AM

Has not seemed to work?Capture1.PNG

1,497 Views
0 Likes
Report
In response to iannetelli

Dan-From-Ryviu
Shopify Partner
11691 2290 2472
‎06-18-2024 03:43 AM

This is an accepted solution.

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,495 Views
1 Like
Report
In response to Dan-From-Ryviu

akesoo
Visitor
3 0 0
‎11-30-2024 07:20 AM

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!

752 Views
0 Likes
Report

Community Blog Articles

441285313-63bbef53-3fbe-4e8b-a706-5b37afa90468.png
Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025
April.jpg
Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025
page_thumb_partner.jpg
Enhance a brand’s visibility with Shopify Academy's new SEO resources

Discover opportunities to improve SEO with new guidance available from Shopify’s growth...

By Jacqui May 1, 2025
Terms of Service Privacy Policy