How can i make my search bar abit smaller

Store Design

Topic summary

Goal: make the search bar slightly smaller and change the line color from black to dark grey.

What changed:

  • Helper requested the store URL (shared privately), then clarified target device.
  • Mobile attempt: provided CSS (media query max-width: 989px) to set a dark grey focus box-shadow and adjust the search modal’s padding and close-button position. Instructions: Online Store > Themes > Assets > open main/base/style/theme.css and paste at the bottom.
  • Desktop attempt: updated CSS for desktop to keep the dark grey focus box-shadow and reduce the search button icon size via the .search__button .icon height/width (3rem). A desktop result screenshot was shared.

Artifacts central to the thread:

  • Code snippets (CSS selectors: .field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .search-modal__content, .search-modal__close-button, .search__button .icon).
  • Screenshots illustrating the intended and resulting layouts.

Outcome/Status:

  • The provided desktop CSS did not fully meet the requester’s expectations. The discussion is unresolved publicly and continues via private messages.
Summarized with AI on December 23. AI used: gpt-5.
1

How can I make my search bar background just a little bit smaller? And how I change the line colour from black to a dark grey colour please :slightly_smiling_face:

1000002939.jpg
1000002939.jpg1080×493 13.5 KB

1 Like
2

Hi @createdbylove

Would you mind to share your store URL? Thanks!

3

I’ve sent you a message :slightly_smiling_face:

4

Thanks for the info, is this for the mobile screen?

Made4uoRibe_0-1722373165423.png
Made4uoRibe_0-1722373165423.png541×283 6.24 KB

Do you mean like this? If it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 989px){
.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus {
      box-shadow: 0 1px 1px darkgrey; 
}
.search-modal__content {
    padding: 0 12rem 0 5rem;
}
.search-modal__close-button {
    right: 7rem;
}
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

For desktop and laptop please

6

Oh, Sorry didnt get it check this one again.

Same Instruction. Please, replace to this.

.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus {
      box-shadow: 0 1px 1px darkgrey; 
}
.search__button .icon {
    height: 3rem;
    width: 3rem;
}

And Save.

Result:

Made4uoRibe_0-1722378981551.png
Made4uoRibe_0-1722378981551.png891×155 3 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Thanks it still not how I want it. I’ll message you