Custom Header

Shopify Discussion
, ,
1

Hello!

I am currently working on a few new designs for my website and I want to do a transparent header. is there a way that the transparent header is only on the home page and none of the other pages? and is there a way to get a hover effect for the desktop version so when i hover over the header with my mouse it goes back to solid white color?

thanks for the help!

2

Yes, this is possible in most Shopify themes, but the exact implementation depends on your theme.

  1. Transparent header only on homepage

You can usually target only the homepage using a Liquid condition like this:

{% if template.name == 'index' %}
  <!-- Add transparent header styles or class here -->
{% endif %}

In many themes (like Dawn), a more reliable approach is using the body class:

.template-index .site-header {
  background: transparent;
}

This ensures only the homepage header becomes transparent.

  1. Hover effect for desktop (transparent → solid)

You can use CSS hover states like this:

@media (min-width: 990px) {
  .site-header {
    background: transparent;
    transition: background-color 0.3s ease;
  }

  .site-header:hover {
    background: #fff;
  }
}

Note:

The exact class names (.site-header, .header-wrapper, etc.) depend on your theme, so you may need to inspect your theme’s HTML and adjust selectors accordingly.

If you tell me your theme name, I can give you a more precise version.

3

where do I paste these codes?

4

im using the dawn theme

5

You’ll need to go into the edit code section and find the file for your homepage.

6

Hi @LeandroS

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

7

Can you share your store url and password so that I can take a look and provide you the solution code.

8

Hi @LeandroS . Hope you are doing well !

Yup, that’s totally doable, a quick CSS tweak can make the header transparent only on the homepage and flip to solid white on hover.
You will just need a developer to add it in.

9

Good idea is to search the forum first.
You may try this solution, for example:

And if you add the “Custom liquid” section (as suggested in the solution) not in the Footer area, but inside your Template, the code will apply only to this template – meanin, only for the homepage, for example.

10

here is the website!

Would be cool to have the header transparent only on homepage and when hover it goes back to white with the dropdown menu. and for mobile also only on homepage transparent but when you click the menu bars, it goes back to white

11

Hi there @LeandroS
Yes,this is generally done via theme customization.
Transparency for homepage only Most themes allow a condition in Liquid like checking if the template is index and adding a “transparent-header” class only on the homepage, rest of the templates has solid header.

For the hover effect on desktop use CSS like header:hover background: white; change text/icon colors for contrast at the same time from transparent to white on hover. Some themes come with that behavior pre-built in header settings or sticky header options, so check theme editor frst before getting into code.

12

If you’re coding it yourself look up css has(), :hover and not. That could do what you want.

13

I realize this is from a while ago, but I wanted to check in and see if anyone has explored any new techniques for customizing the Dawn theme’s header. With all the updates Shopify rolls out, there might be fresh insights or optimizations we can share. Anyone discovered a handy tip recently? Let’s keep the adaptation chatter alive—especially if anyone’s tried something that worked flawlessly!