How can I create a transparent header on the Refresh Theme?

Store Design
, ,

Topic summary

A user seeks to create a transparent header on the Shopify Refresh theme that overlays the hero image and transitions to white or black when scrolling down.

Solutions Provided:

  • Two support teams (PageFly-Victor and GemPages) offered similar CSS solutions
  • Both involve adding custom CSS code to the theme.liquid file, placed above the </head> tag
  • Steps include: navigating to Online Store > Themes > Edit code, opening theme.liquid, and pasting the provided CSS markup

Outcome:

  • The original poster confirmed that GemPages’ solution worked exactly as intended
  • A follow-up question asked whether the transparent header could apply only to the homepage (remains unanswered)
  • Another user suggested a YouTube tutorial for adding transparent headers to the Refresh theme

Note: The conversation contains reversed/garbled text in the original posts, but the technical solution involves CSS customization through theme file editing.

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

I’m using refresh theme and have searched the forum here to make my header transparent so it basically is a part of the image below it and then when you scroll down it turns to black or white.

Example nalenayurveda.com

thanks a bunch

2

Hi @InMotionSport

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

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Hello @InMotionSport ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1678244861751.png
GemPages_0-1678244861751.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

4

Hey Victor,

thanks for checking however this code did not work for me unfortunately.

5

Thanks for the solution, this works exactly how i wanted it to display the header

1 Like
6

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

7

is there a way to make it only apply to the homepage

8

You can add transparent header in your refresh theme: