How to add a search bar to mobile navigation drawer?

Store Design
, , , , ,
1

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

Luxurymrkt_0-1701957238193.jpeg
Luxurymrkt_0-1701957238193.jpeg300×400 10.3 KB

1 Like
2

Hey try this method.

Step 1: Create a new snippet and call it “drawer-search”
Step 2: Paste this code inside

Step 3: Go to “header-drawer” and find " and add this code above it

{% render 'drawer-search' %}

Step 4: Create a new asset and name it “component-drawer-search”

Step 5: Paste this code inside

.drawer-search-modal__form {
  width: max-content;
}

.drawer-field {
  display: flex;
  border: solid thin;
  width: max-content;
  margin-left: 3rem;
}

.drawer-search__input.drawer-search-field__input {
  border: 0;
  font-family: var(--font-body-family);
  padding: 10px;
}

.drawer-search__input.drawer-search-field__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.drawer-search__button:not(:focus-visible):not(.focused),
.drawer-search-reset__button:not(:focus-visible):not(.focused) {
  background-color: #f4f4f4;
  border: 0;
  padding: 10px;
}

.drawer-search__button .icon {
  height: 1.8rem;
  width: 1.8rem;
}

Let me know if it works
www.studioblank.store