Dawn 12.0: How to Make Header Transparent on ONLY Home Page

Store Design
, , , , ,

Topic summary

A user wanted to make the header transparent only on the home page of their Dawn 12.0 theme, but their CSS code was applying the transparency across all pages.

Solution provided:

  • Remove the global background: transparent; CSS rule from the header wrapper
  • Add conditional code to the theme.liquid file that targets only the home page using {% if template == 'index' %}
  • Place the code snippet above the </body> tag (not below it)

Resolution:
The original poster successfully implemented the fix by inserting the conditional CSS/markup code in the correct location within theme.liquid. The initial attempt failed because the code was placed below the <body> tag instead of above it.

Additional video resources were shared showing how to create transparent headers specifically for the home page.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello! I’m working a website and I want the banner image on the home page to bleed into the header. I was able to do this with the following CSS code, but now the header is transparent on ALL pages.

.header-wrapper.color-background-1.gradient {
  position: absolute;
  width: 100%;
  background: transparent;
  color: #000;
}
.header-wrapper * {
  color: #000;
}

I only want the header to be transparent on the home/landing page. What CSS should I add?

Here’s the preview URL https://rt5as761kwdd4lm7-59803566217.shopifypreview.com

2

Hi @nadiamejilla , First you need to remove

 background: transparent;

from your style , we will only added on the home page, go to theme.liquid file and add the following code in the bottom of the file above tag,

{% if template == 'index' %}

{% endif %}
1 Like
3

Hello! I deleted the code that I previously had and pasted your code in the theme.liquid file, but it didn’t change anything.

I liked how the previous code appeared, but I only want it applied to the home page. Please help! Thank you

4

Can you send a screenshot of theme.liquid file?

5

Nevermind I was able to fix it - thank you for your help!! I pasted the following code at the bottom of the theme.liquid file (above tag) to make it work.

{% if template == 'index' %}

{% endif %}
6

Glad I helped, so the problem that it wasn’t placed above body tag, right?

1 Like
7

Yes you’re right - I had initially made a mistake and placed it below the tag which is why it wasn’t working initially.

Anyways, thanks for your solution!

1 Like
8

Here is the transparent header:

9

Only on home page transparent header: