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 , i can’t access your site

Hi, I’ve changed the password to 123bird

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

@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]

How do I make a Transparent Header

Store Design

SoulHarvest July 1, 2024, 4:01pm 13

Yes I think only having that effect on the homepage would be good, so every other page has a normal sticky 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	277	September 19, 2023
How to change homepage header to transparent in Dawn theme? Store Design	11	163	September 11, 2024
Dawn Theme - Make sticky header transparent and white on scroll up Store Design header	7	219	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