Transparent Header on all my pages (Dawn theme)

Store Design
, ,

Topic summary

A user seeks help implementing a transparent header across all pages of their Shopify store using the Dawn theme. They previously applied code that only works on the homepage.

Proposed Solutions:

  • One contributor suggests adding CSS code to the bottom of the stylesheet, targeting specific elements with positioning and background properties
  • Another recommends inserting code into the theme.liquid file above the </head> tag, providing step-by-step instructions:
    1. Navigate to Online Stores > Themes > More Actions > Edit code
    2. Locate theme.liquid and paste the code above </head>

Outcome:

  • The original poster confirms the second solution (editing theme.liquid) worked perfectly
  • A final comment references a YouTube tutorial link for implementing transparent headers

Note: Some text in the conversation appears corrupted or reversed, but the core technical guidance remains clear.

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

Hello

I need some help,

I would like to have a transparent banner on all my pages.. I don’t know how to do this.

I used a code to put in on my homepage but it does not work on every page of my site.

Can someone help me with this?

Thankyou in advance

link https://odrie.myshopify.com/

PW odrie123

2

Hi @BOOST1

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.gradient {background: transparent !important;} #MainContent {top: 0; position: absolute;} #template-index #MainContent {position: inherit !important;}

Regards,

San

3

Hi

Thankyou for your help! unfortunately it doens’t work, it throws my whole page upside down…
Do you have another solution?

Thankyou in advance :slightly_smiling_face:

4

Hi @BOOST1

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyVictor_0-1680657318060.png
PageFlyVictor_0-1680657318060.png1920×969 324 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
5

Thankyou Very much this worked perfectly!!!

6

Transparent header in your store. Here is the way: