How can I make my header consistently transparent on Shopify?

Store Design

Topic summary

A new Shopify user implemented code to make their header transparent, but the transparency disappears when scrolling through the site. They’re seeking help to maintain consistent transparency throughout the website.

Community Response:

  • Multiple users requested the store password to access and diagnose the issue
  • User shared password: “tlwoht”

Proposed Solutions:

Option 1 (ExpertRookie):

  • Navigate to: Themes → Edit Code → Assets → base.css
  • Add CSS code at bottom targeting .template-index .header-wrapper with transparent background and z-index: 9

Option 2 (GemPages):

  • Go to Online Store → Theme → Edit Code
  • Open theme.liquid file
  • Paste provided code snippet before the </body> tag
  • Includes screenshot showing the code editor interface

Both solutions involve adding custom CSS code to theme files. The discussion remains open as the original poster hasn’t confirmed whether either solution resolved the scrolling transparency issue.

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

Hey I newly joined Shopify recently, and implemented code to where my header is transparent, but is no longer transparent as I scroll through the app, could anyone help with my code, so that the transparency is consistent through the website. Thanks in Advance!

https://weeblounge.myshopify.com/?_ab=0&_fd=0&_sc=1

2

Hello @Tyreece24

https://weeblounge.myshopify.com/password?_fd=0
Please share your store password.

3

@Tyreece24 you will need to share your password with the community to check it out for you

4

@Tyreece24

Please share your store URL, then I can review it

5

Hello @Tyreece24

Can you give me your Store Password so I can check it for you?

Kind & Best regards,
GemPages Support Team

6

Apologies, password: thowlt

7

Store password: thowlt

8

Hi @Tyreece24
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.template-index .header-wrapper {
background: transparent;
z-index: 9;
}
9

Hello @Tyreece24

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1670401321058.png
GemPages_0-1670401321058.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1670401344927.png
GemPages_1-1670401344927.png1045×829 34.9 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team