How can I make my Refresh Theme header transparent on homepage?

Shopify Discussion

Topic summary

  • Original goal: Make the Refresh theme header transparent on the homepage and switch to white on scroll; prior code attempts failed (site: monaieofficial.com).

  • Proposed fix: Add code in theme.liquid immediately after , wrapped in a homepage-only Liquid conditional (template == ‘index’).

  • Result: The header is now transparent. However, the top image/hero appears cut off; the poster requests margin/padding adjustments to prevent cropping.

  • Open items: No specific CSS for spacing (e.g., header/section padding or image container margins) was provided. It’s also not confirmed whether the white-on-scroll behavior was implemented.

  • Status: Partially resolved and ongoing; further guidance needed to fix image margins and confirm scroll color change on scroll.

Summarized with AI on January 4. AI used: gpt-5.
1

Hey, I am currently using the refresh theme by Shopify and would like the header on the home page to be transparent then turn white when scrolling down. No code seems to be working. Please help. My website is monaieofficial.com

2

Hi @davidmira8

I’m Dan from Ryviu: Product Review & QA.

You can add this code below to your theme.liquid file, after in Online Store > Themes > Edit code to do that

{% if template == 'index' %}

{% endif %}
3

The transparent header worked but can you change the image margins. If you check my website the image is cut off on the top. Can you fix this?