Add a custom search bar to header

[Tilda_Falth]

I want to add a search bar to my header that is not the default search bar/icon. All the code for my custom search bar is located in sections/custom-search-bar.liquid. I want to move the search bar so it’s between the logo and customer accounts, as well as being above the main menu which is in the bottom row of the header. The two pictures shows what it looks like now and a photoshopped version of how I want it to look. If it’s possible I’d like to have two different logos in the header for desktop and mobile as well. The logo in the pictures is the full size logo I want on desktop and I have another logo that is square and I want that for mobile. Is anything of this possible? I’m using Horizon theme.

[Moeed]

Hey @Tilda_Falth

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Tilda_Falth]

sound.myshopify.com/#MainContent, the password is skeiro

[Tilda_Falth]

for some reason it didn’t allow me to upload two pictures but this is what i want it to look like.

[suyash1]

@Tilda_Falth since you want to change the location of search bar, you can either copy entire code to the location you want or create a snippet of this search code and render snippet at location you want.

Usually second approach is used as it keeps code easy to handle.

[tim_1]

There is a solution with CSS. Maybe a bit “Hackish” (because of the absolute/fixed positioning), but quite acceptable IMO.

Try this code either in your stylesheet or in “Theme settings”=> “Custom CSS”:

@media (min-width:750px) {
  .shopify-section-group-header-group .custom-search-wrapper {
    position: absolute;
    max-width: min( 800px, calc(100vw - 400px));
    inset: 48px 200px;
  }
  
  body:has([data-sticky-state="active"]) .custom-search-wrapper {
    position: fixed;
    top: 4px;
  }
}

[oscprofessional]

Hii @Tilda_Falth,

Steps

1. Make sure your search bar has a wrapper class

<div class="custom-search-wrapper">
  <!-- custom search bar code -->
</div>

2. Go to Online Store → Themes → Customize
3. Open Theme settings → Custom CSS
4. Paste this code:

@media (max-width: 749px) {
  .shopify-section-header .custom-search-wrapper {
    width: 100%;
    margin: 12px 0 0;
    order: 3;
  }
}

• This adjusts the layout of a custom search bar that is already placed inside the header, allowing it to sit between the logo and account icons on mobile. It remains compatible with Horizon’s sticky header

[Tilda_Falth]

How do i do the second option?

[Moeed]

Hey @Tilda_Falth

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

<style>
@media screen and (min-width: 768px) {
body:has([data-sticky-state="active"]) .custom-search-wrapper {
    position: fixed !important;
    top: 4px !important;
}
.shopify-section-group-header-group .custom-search-wrapper {
    position: absolute !important;
    inset: 48px 200px !important;
}
}
</style>

RESULT:

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

[Tilda_Falth]

That worked thank you! I want to change it on mobile as well. The first picture shows what it looks like now and the second picture what i want it to look like. This is what it looks like now and this is what I want it to look like. As you can tell I want to have different logos on desktop and mobile so it’d be great if I could do that as well.

[Moeed]

Can you first update your header logo which you sent in the screenshot?

[Tilda_Falth]

I’ve done that now ‎‎‎‎‎

[Moeed]

Alright so remove the previous code which I provided and add this updated code right above < /body> in the end of theme.liquid file.

<style>
@media screen and (min-width: 768px) {
body:has([data-sticky-state="active"]) .custom-search-wrapper {
    position: fixed !important;
    top: 4px !important;
}
.shopify-section-group-header-group .custom-search-wrapper {
    position: absolute !important;
    inset: 48px 200px !important;
}
}
@media screen and (max-width: 767px) {
.header__columns.spacing-style {
    display: flex !important;
}
header-actions {
    margin-left: 45% !important;
}
.custom-search-wrapper {
    position: absolute !important;
    inset: 48px 135px !important;
    max-width: min(800px, calc(100vw - 230px)) !important;
    margin-right: 0% !important;
}
}
</style>

RESULT:

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

[Tilda_Falth]

Thank you! How can I have this logo https://cdn.shopify.com/s/files/1/0976/1557/7430/files/freepik_br_525394a9-0a38-49a7-bb6f-7648e46eb4ad.png?v=1765568480 only show up on the header on desktop and this logo https://cdn.shopify.com/s/files/1/0976/1557/7430/files/Untitled_design_-_1.png?v=1765211904 only show up on the header in mobile?

[Moeed]

Honestly, it depends on the theme. Not many themes by default supports this functionality and it mostly needs to be custom coded and if I try to do it with CSS then it wouldn’t be a good idea to do as it’s not a professional way to achieve that.

Can you share your collaborator request code in my private messages and I can sort that out for you too?

Best,
Moeed

[Tilda_Falth]

Yes I can do that. If it’s possible I’d like the search list or whatever it’s called to expand all the way to the left and the right when searching on mobile as well. This is what it looks like right now.