How to make the header animation on homepage different from anywhere else on the site

Store Design
, ,

Topic summary

Goal: make the homepage header fixed with no animation, while all other pages keep the sticky header with “Scroll Up” animation.

Progress and attempts:

  • Initial CSS suggestion (setting the header wrapper to position: fixed globally) made the header fixed site‑wide, which didn’t meet the need for homepage‑only behavior.
  • Requirement clarified: homepage should mimic the “None” setting (no animation), other pages should retain “Scroll Up.”

Working solution:

  • Edit theme.liquid and insert a Liquid condition targeting the homepage template (template.name == ‘index’) before .
  • Use this conditional to apply homepage‑specific logic that disables the sticky/scroll animation on the homepage only, leaving other templates unchanged.

Notes:

  • The exact code snippet isn’t fully shown in the thread, but the approach hinges on a Liquid conditional for the homepage and corresponding CSS/JS to disable the animation there.
  • Screenshots illustrate the theme settings; the key change is in theme.liquid.

Outcome: The change was confirmed to work by the requester. Status: resolved.

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

I am designing my homepage and currently have my sticky header animation on “Only on scroll”. But I want my sticky header on the homepage to be different from the rest of my site. I want the header on my homepage to be fixed at the top of the page and not have any animation, while keeping the other pages on my website WITH the “Only on scroll” animation. Here is my website: Viibed

Viibed_1-1722138602838.png
Viibed_1-1722138602838.png1901×948 250 KB

I want my header to be stationary at the top and have NO animation.

Need help, and thank you!

2

Hi @Viibed ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

sticky-header.header-wrapper {
    position: fixed;
    width: 100%;
}

Here is the result

BSSTekLabs_0-1722142095659.png
BSSTekLabs_0-1722142095659.png2878×1172 557 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

3

Not quite what I wanted, but I want it to have no animation like how the “None” setting does it and keeps it at the top of the page. I’ll show it here.

Viibed_0-1722142799565.png
Viibed_0-1722142799565.png1796×889 275 KB

I want the HOMEPAGE header to have the “None” setting (no animation),

while every OTHER page has the “Scroll Up” animation.

Viibed_1-1722143104662.png
Viibed_1-1722143104662.png1880×855 432 KB

Thank you for willing to help me through this, I hope this clarified what I’m trying to do.

4

Hi @Viibed ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

{% if template.name == 'index' %}

{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
5

To make only the homepage not have a sticky header on scroll up, you can follow these steps:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

BSSTekLabs_0-1722046684147.png
BSSTekLabs_0-1722046684147.png2878×1538 363 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

1 Like
6

It worked! Thank you!