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

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?

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8551 1687 1695

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 and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
6981 1661 2051

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
iannetelli
Tourist
5 0 1

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
Shopify Partner
6981 1661 2051

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Dan-From-Ryviu
Shopify Partner
8551 1687 1695

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 and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

iannetelli
Tourist
5 0 1

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
Shopify Partner
8551 1687 1695

What color do you want?

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

iannetelli
Tourist
5 0 1

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

 

Dan-From-Ryviu
Shopify Partner
8551 1687 1695

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 to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

iannetelli
Tourist
5 0 1

Has not seemed to work?Capture1.PNG

Dan-From-Ryviu
Shopify Partner
8551 1687 1695

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 and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.