Re: 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! Support me! Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 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 · ‎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 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 · ‎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! Support me! Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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! Support me! Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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! Support me! Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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! Support me! Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: 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