Solved

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

designedbymg
Tourist
7 0 2

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

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7726 1506 1515

This is an accepted solution.

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 %}

Screenshot 2024-03-06 at 09.31.21.png

- Helpful? Like and Accept solution or Buy me a coffee
- 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 6 (6)

Dan-From-Ryviu
Shopify Partner
7726 1506 1515

Hi @designedbymg 

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

Your store already have black header on other pages. 

- Helpful? Like and Accept solution or Buy me a coffee
- 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

designedbymg
Tourist
7 0 2

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
Shopify Partner
7726 1506 1515

Give me the black logo version link please 

- Helpful? Like and Accept solution or Buy me a coffee
- 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

Dan-From-Ryviu
Shopify Partner
7726 1506 1515

This is an accepted solution.

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 %}

Screenshot 2024-03-06 at 09.31.21.png

- Helpful? Like and Accept solution or Buy me a coffee
- 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

designedbymg
Tourist
7 0 2

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
Shopify Partner
7726 1506 1515

You are very welcome!

- Helpful? Like and Accept solution or Buy me a coffee
- 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