Adjusting the search bar

Topic summary

A user wants to customize their Shopify store’s search bar to match a reference design. The request involves three main changes:

Desired modifications:

  • Reposition the search bar below the header while keeping the header visible
  • Reduce the size, remove borders, and apply a light gray background color
  • Add a smooth slide-in/slide-out animation (similar to the reference site’s magnifying glass icon behavior)

Visual context:
Two comparison images show the current search bar layout versus the desired appearance from the reference store.

Proposed solution:
A support team member provided CSS code to partially address the styling:

  • Hides the search field label
  • Adjusts padding and adds a semi-transparent dark background

The solution appears incomplete as it doesn’t address the repositioning or animation requirements. The discussion remains open, awaiting confirmation on whether the provided code works and potentially requiring additional CSS for the full implementation.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hey, I need help adjusting the search bar.

This is what mine looks like:

And I want it to look like this:

So here’s what I want:

  1. I want to move the entire search bar below the header so that the header is still visible.

  2. I want to make it smaller, roughly the size shown in the picture, remove the borders, and fill it with a light gray color.

  3. The last and most important thing is that I want a smooth slide-in and slide-out animation for it. You can check the kind of animation I mean here when you click on the magnifying glass icon: https://tomnoske.store/

That’s all, I don’t need the browse categories.

Here is my store URL: https://1049xn-ya.myshopify.com/

And here’s the store where I want it to look like: https://tomnoske.store/

Thanks a lot,
Tim

Hi @CreatorTim

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

label.field__label {
    display: none !important;
}
input#Search-In-Modal {
    padding: 0.8rem 9.8rem 0.8rem 2rem !important;
    background: rgba(0, 0, 0, 0.2);
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.