Hi I’m looking to replace the search navigation with a search bar in the drawer . My site is https://b32b39-5.myshopify.com/products/copy-of-test
Hi @Luxurymrkt ,
It’s important to find out where the search form element is and where to place it. Once you see these positions, it’ll be easy, just copy and paste
Because every theme has a different structure and class name for its element and your theme is not free, I just can suggest you follow these steps to find the search element based on my Dawn theme.
-
Go to your search page, open Dev tool by F12, tab Element, click the red rounded button and move the mouse to the search box, you will see class of search box (Note: you must find the element wrap the search box). In my case, the founded element is the has class ‘search’
-
Go to Theme->Edit code, find the liquid file of the search page by entering sth like ‘search’, in Dawn, the file name is “main-search.liquid”, then find the search form by the class name we found in step 1, the result may be like
Copy all the
- After finding out the search form, we’ll find where to place it. As I see, you want to add this into header side bar. You can find in file name “theme.liquid” , find ‘header-sidebar’
- if you see something like
{% render 'header-sidebar'
you have to find the file name “header-sidebar.liquid”
then replace the element by the form you copied in step 2
- The style of the search box may not be as you want, so you can go to the file name “theme.css” and add style for it like:
.header-sidebar__main-panel .main-search-form {
min-width: 7rem !important;
max-width: 20rem;
background: lightblue;
}
Add “!important” if the style isn’t applied.
If it works, the result will be like this
