How can I create alternative headers for different pages on my website?

designedbymg · ‎03-05-2024

On my homepage, my header uses a white logo and white text for the menu options, on a transparent background. But on all my other pages, I use a white background. So I want to create a different header with all the same content but in black (that is, the black version of my logo and black text for menu options). I saw in other posts people saying to use

{% if template == 'non-homepage' %}

{% section 'header1' %}

{% else %}

{% section 'header' %}

{% endif %}

but I do not know where and how to use this snippet.

Again, I want to keep the header for the homepage, but create a black on white version of it for all other pages

My website is www.mymotherland.store

Dan-From-Ryviu · ‎03-05-2024

Or you can add this code to your theme.liquid file after <head> to make your other page like this

{% if template != 'index' %}
<style>
.header-wrapper {
background: #fff !important;
}
.header-wrapper .header__heading-logo-wrapper {
background: #000 !important;
}
.header-wrapper * {
color: #000;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎03-05-2024

Hi @designedbymg

Dan here from Ryviu: Product Reviews @& QA app.

Your store already have black header on other pages.

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

designedbymg · ‎03-05-2024

I am trying to make it white header with black text and logo. (while the homepage header remains transparent with white text and logo)

Dan-From-Ryviu · ‎03-05-2024

Give me the black logo version link please

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Dan-From-Ryviu · ‎03-05-2024

Or you can add this code to your theme.liquid file after <head> to make your other page like this

{% if template != 'index' %}
<style>
.header-wrapper {
background: #fff !important;
}
.header-wrapper .header__heading-logo-wrapper {
background: #000 !important;
}
.header-wrapper * {
color: #000;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

designedbymg · ‎03-05-2024

Thank you!

Instead of putting black background behind the logo, I used filter: invert(1) to turn the logo itself black. Saves the hassle from uploading a whole other png and linking that png to the logo when the background is white.

Dan-From-Ryviu · ‎03-05-2024

You are very welcome!

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How can I create alternative headers for different pages on my website?

How can I create alternative headers for different pages on my website?

Community Blog Articles