Help with adjusting theme settings

Store Design

Topic summary

Issue: After changing the header background to terracotta for visibility on collection pages, the sticky header (the navigation bar that appears when scrolling up) also showed terracotta on the home page. The goal was white sticky header on the home page, terracotta on other pages.

Resolution steps provided:

  • Confirmed requirement: only the home page’s sticky header should be white.
  • Edit theme.liquid and conditionally inject CSS only for the home page (index template) to force the sticky header background to white.

Outcome: The code change worked as desired; the home page sticky header is white, while other pages retain terracotta. The thread originator confirmed success.

Additional context: Another contributor explained that sticky header styling is often controlled separately and suggested targeting the home page via a body class (e.g., .template-index) to set a different background color—supporting the implemented approach.

Notes: A code snippet and a result image were central to the solution and verification.

Status: Resolved; no outstanding questions.

Summarized with AI on December 11. AI used: gpt-5.
1

(I don’t know why is says it 3 times ^^^)

In the base theme, when you click through to a collection, the header panel was white & you couldn’t see my small logo.

I changed it to the terracotta colour, so that I could see the logo & I’d like to keep the small logo white.

Now, when you start to scroll back up to the top, the header panel appears (presumably to allow you to navigate to the home page or wherever without the need to scroll all the way to the top), & it has the desired terracotta background colour, .

Unfortunately it’s doing that on the home page too. A terracotta panel appears & it goes white again as soon as you get to the top.

They’re both using the same theme & I’m just wondering which of the numerous parts of the theme control the sticky header panel that appears upon scrolling up & whether I can have the one on the home page be white but keep the terracotta colour on the other pages?

1 Like
2

Hey @Snowdog63

So before I provide you the code, I just wanna confirm that for the homepage only you want the sticky header background to be a different color right? Let me know

Best,
Moeed

3

That’s correct. I’d like the sticky header panel on the home page to have a white background, as in the default theme (before I messed it up).

1 Like
4

Hey @Snowdog63

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 </ body> tag
{% if template == 'index' %}
<style>
:is(.header[transparent][transparent=not-sticky][data-sticky-state=active],.header[transparent]:has(.mega-menu__list:hover),.header[transparent]:has(.menu-list__link[aria-haspopup]:is(:hover,[aria-expanded=true],[data-animating])),.header[transparent]:has(.menu-list__list-item[slot=overflow] .menu-list__link:is(:hover,[aria-expanded=true],[data-animating]))) .header__row {
    background: white !important;
}
</style>
{% endif %}

RESULT:

image
image1897×915 286 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
5

Thanks, that’s perfect!

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

1 Like
7

It sounds like the sticky header that appears when you scroll up is controlled separately from the main header color. Most themes have settings for “sticky header” or “scroll header”, and sometimes the color is set globally for all pages, which is why your home page is showing terracotta too. To fix this, you’ll likely need to add a little custom CSS that changes the sticky header color only on the home page while keeping it terracotta on collection pages. Usually, this involves targeting the home page with a body class like .template-index and then setting background-color: white for the sticky header there.

So yes—it’s possible to have white on the home page and terracotta on other pages, but you’ll need to customize the CSS for that difference.

Hope that helps!:blush:

1 Like