Hi, I’m trying to make a header like the one on the https://fearofgod.com/ website. It’s transparent with a slideshow behind it, then it turns white when scrolling and it is sticky. Also, this is only on the homepage, the header is sticky and white on every other page. I’ve found some discussions a…

Hi @SoulHarvest , Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code [BSSCommerceHDL_0-1719838955724.png] Step 2: Search file theme.liquid Step 3: Insert this code above tag: Hope this can help you, If our suggestions are useful, please let us know by giving it a like or markin…

Hi @SoulHarvest , Replaced my old code with this new code: Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

Hi, I’m sorry for asking so many questions. I’ve tried this code and it does now work on ios also but I wanted to ask if there is a solution for this issue where the header covers stuff below it, i’ve attached a screenshot to show what i mean. The header goes a bit too low on both desktop and mobile…

@SoulHarvest , Do you think we should only make the home page transparent? It would be better if we made all the pages whole. I see many guest websites only do it on their homepage

Yes I think only having that effect on the homepage would be good, so every other page has a normal sticky header.

@SoulHarvest Okay. So now I will give you the solution wait for me a moment. Thank you :heart_eyes:

Hi @SoulHarvest , Replaced my old code with this new code: {% if template.name == index %} {% endif %} Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

Hi, I’ve added this code now but the effect has disappeared from the home page also, did I make a mistake? I pasted it in the theme.liquid file, here’s a screenshot of my file: [e.png] [Screenshot 2024-07-01 171217.jpg]

Hi @SoulHarvest , Insert this code above tag: [BSSCommerceHDL_0-1719850746402.png]

Hi, is this correct ? I’ve added this code in the section you mentioned but it doesn’t work {% if template.name == index %} .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper { position: fixed !important; background-color: transparent !im…

Hi @SoulHarvest , Can I send a collaborator access to your theme? Then I can check and directly add code to help your issue. Please share your collaborator request code from the Users and permissions page.

How do I make a Transparent Header

Store Design

MRamzan September 11, 2024, 1:25pm 26

Transparent header:

Topic		Replies	Views
Transparent Header Store Design customizations , landing-page , shopify-themes	8	171	June 24, 2025
Make header transparent and white on scroll up Dawn theme Store Design design , header , css , shopify-themes	5	273	September 19, 2023
How to change homepage header to transparent in Dawn theme? Store Design	11	161	September 11, 2024
Dawn Theme - Make sticky header transparent and white on scroll up Store Design header	7	218	February 9, 2025
How to add a transparent header on Dawn Theme 2.0? Store Design	7	127	February 8, 2022

How do I make a Transparent Header

Related topics