Transparent Header

Store Design
, ,

Topic summary

A user seeks to implement a transparent header on their homepage (lucenara.store) that becomes sticky with a black background when scrolling.

Proposed Solutions:

  • Multiple respondents suggested adding custom CSS code to the theme.liquid file (above the </body> tag) to enable transparency on the homepage
  • One user recommended using native theme settings: navigate to Customize > Header section and enable “transparent header” and “sticky header” options if available
  • Solutions included code snippets targeting the index template with CSS for transparency and scroll-triggered background changes

Additional Request:
The user also asked how to make their logo background transparent.

Current Status:
The discussion remains unresolved. The user reported that attempted solutions created unwanted blank space above the header during scrolling and felt unresponsive. The issue may be theme-dependent, as some Shopify themes lack native support for these features without custom development.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello, I would like my header to be transparent on my home page and when I scroll, I want the header to be a sticky header. My website is lucenara.store

3 Likes
2

Hey @LUCENARA

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% if template == 'index' %}

{% endif %}

RESULT:

Moeed_0-1750702111907.png
Moeed_0-1750702111907.png1897Ă—871 241 KB

If I managed to help then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello there;

Here’s how to make your header transparent on the homepage and sticky when scrolling using only drag-and-drop and settings in Shopify:

Step 1 go to your Shopify admin

Step 2 click on Online Store then click on Themes

Step 3 next to your current theme click Customize

Step 4 you will enter the theme editor make sure you are on the homepage

Step 5 click on the header section in the left sidebar

Step 6 look for a setting called transparent header or enable transparent background check the box to turn it on

Step 7 look for a setting called sticky header or keep header fixed on scroll and check the box to enable it

Step 8 save your changes

Step 9 preview your site the header should now be transparent on the homepage and stay at the top when you scroll

Note if you do not see these settings it might depend on the theme you are using some themes do not support transparent or sticky headers by default you may need to switch to a theme that supports it like Dawn or check the theme documentation

Let me know if you need help checking if yo

ur theme supports this

4

This makes it transparent but when I scroll down, I want the background to be black. Also, is there any way to make my logo background transparent?

5

Hello there @LUCENARA For the transparent header, you can just try the steps in the reply marked as a solution here https://community.shopify.com/topic/2640209

6

Hello @LUCENARA

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout > theme.liquid and paste this at the bottom of the file:
{% if template == 'index' %}

{% endif %}
7

To make your header sticky, please go to your store admin > Sales channels > Online store > Themes > Customize > Header > Sticky header, select the option Always. Then add this code to theme.liquid file after 

{% if template == 'index' %}

{% endif %}
8

Hi, your idea for a transparent header that becomes sticky on scroll can usually be done through your theme settings or with a bit of custom CSS. If your theme doesn’t support it natively, you might need a developer to tweak the header styling.

As an extra tip, you might want to check out SP Sales Pop Up Social Proof by CareCart. It includes a feature-rich announcement bar that can be made sticky. This works really well with a sticky header setup and helps you highlight promotions, shipping info, or welcome messages without taking up extra space or needing custom coding. It is a good way to keep key info visible while keeping your site clean.

9

Hello! I tried this solution but it just ended up leaving a blank space on top of my header when i scrolled which looked super weird and it also didn’t feel responsive.