How can I make a transparent header only on the homepage in Refresh theme?

Store Design

Topic summary

Goal: Make the Shopify Refresh theme header transparent only on the homepage, while keeping the sticky header (fixed on scroll) white.

Key clarifications:

  • Requirement: Homepage header transparent; sticky header white.
  • Earlier attempts made all pages’ headers transparent, which was not desired.

Access/setup:

  • Storefront was password-protected; password was shared to allow review.

Proposed solution:

  • Add conditional CSS in theme.liquid inside the that runs only on the homepage using: if template contains ‘index’.
  • Effect: Applies transparency exclusively on the homepage header, preserving a white sticky header.

Outcome:

  • The homepage-only transparent header approach was confirmed as working for the requester.

Additional notes/edge cases:

  • References were shared to guides for the Dawn theme; requester sought Refresh-specific implementation.
  • Another participant on the Taste theme reported the logo section still had a background while menu and sticky were affected; no detailed fix was provided, and the responder said the code works on their side. This suggests theme-specific differences may require targeted selectors.

Status:

  • Resolved for Refresh theme (homepage-only transparency achieved).
  • Partially unresolved for Taste theme (logo area background).
Summarized with AI on February 6. AI used: gpt-5.
1

Hello community,

I want to make header transparent on Refresh theme.

I tried some solutions here but it shows transparent header all other pages (which is look not optimized). I need transparency only in home page.

Thank you in advance!

URL: https://ezclean.ga/

2

@djawedbhn - it will look like this, is this the way you want?

suyash1_0-1662820735737.png
suyash1_0-1662820735737.png1366×768 166 KB

3

Could you remove transparency from sticky header?

4

@djawedbhn - it will still show white as there is no color

5

@suyash1

If you mean

Header : transparent

Sticky header : white

Yes, that’s how want it.

6

@djawedbhn - your header is already white though, what is the password to view page?

7

Password : x

8

@suyash1

Password : x

9

@djawedbhn

Your store is password Protected. Please share your store front password!

Thanks!

10

Password: x

11

@dmwwebartisan

Password : x

12

@djawedbhn

Please check the following URLs for help

https://community.shopify.com/topic/1326851

https://jotting.com/shopify/how-to-make-dawn-theme-header-transparent

Thanks!

13

@Ninthony - Hello, I hope you are doing well.

I see your solution [header transparent] is helpfull in Dawn theme. Could you help me in Refresh theme

14

Hi @djawedbhn

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Layout-> theme.liquid ->paste the below code before the tag as specified in the below screenshot.
{%- if template contains 'index' -%}
  
  {%- endif -%}

download (46).png
download (46).png1900×787 89.3 KB

1 Like
15

THANK YOUUU !! Really apperciate your help

16

Hi - i have just tried using this code - it works but only on the menu items and sticky - the logo section is still showing with background please assist - using TASTE theme

17

this code works fine on my side

Screenshot 2022-10-20 144314.png
Screenshot 2022-10-20 144314.png1891×679 147 KB