How to add search bar to dropdown menu on mobile shrine theme

Store Design
1

Hello,

As stated in the title I would like to add the search to my drop down menu for mobile instead of the separate icon to create a more seamless process for my customers. I had this done for me before on the Dawn theme but I have since switched to Shrine pro. Not sure if this will require custom coding again. I will attach a link to the previous post I made for the dawn theme. How to add search bar into drop down menu on mobile with dawn theme

image
image679×388 28.3 KB
this is how I would like it to look.

Thanks in advance!

2

https://qz26pn-cv.myshopify.com/

Password: bagono

3

I’ve run into this myself when switching themes, so I get where you’re coming from. Yes, it usually does take a bit of custom coding since Shrine Pro handles the mobile menu differently than Dawn.

What worked for me was:

  1. Finding the mobile menu file – in most themes it’s inside header.liquid or sometimes a snippet like header-drawer.liquid. That’s the spot where the mobile drawer markup lives.

  2. Adding a search form at the top – Shopify has a built-in search form you can drop in, something like:

<form action="{{ routes.search_url }}" method="get" role="search" class="mobile-menu-search">
  <input type="search" name="q" placeholder="Search..." aria-label="Search" class="search-input">
  <button type="submit" class="search-btn">🔍</button>
</form>

Place that above where your navigation links start inside the drawer.

  1. Styling it – a little CSS helps it blend in nicely:
.mobile-menu-search {
  display: flex;
  align-items: center;
  padding: 10px;
}

.search-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-btn {
  margin-left: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

That should give you the search field + icon sitting right inside the dropdown menu, instead of being a separate button.

If it starts feeling a little technical, no worries, just let me know and I’ll be glad to jump in as a collaborator.

4

Hi @GoombaGrows,

Yes, this still needs to be changed at the code.

And after checking the source structure, I think you can do it the same way you did with Dawn theme, it will display fine.

Hope it is clear to you

5

I appreciate your response!! However, I am struggling to do this myself. Would you be able to help as a collaborator?

7

Yes, you can definitely add a search bar inside the mobile dropdown menu for a more seamless experience. Since you’ve switched from Dawn to Shrine Pro, this will likely require custom code again, because each theme handles headers and mobile menus differently.

Here’s a general approach:

1. Locate the mobile menu

  • Go to Online Store → Themes → Edit Code

  • Look for a file like:

    • header.liquid

    • header-mobile.liquid or a section under sections/ that handles the mobile navigation

2. Add the search form inside the dropdown

  • Insert the Shopify search form inside the mobile menu <div> where menu links are listed. Example:
<form action="/search" method="get" class="mobile-menu__search">
  <input type="search" name="q" placeholder="Search products..." />
  <button type="submit">🔍</button>
</form>

3. Style it for mobile

  • Add CSS so it looks clean inside the dropdown:
.mobile-menu__search {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.mobile-menu__search input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.mobile-menu__search button {
  padding: 8px;
  background-color: #ff6600;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
}

Tip: Test on a mobile device after adding it. You may need to adjust padding or width to match Shrine Pro’s menu style.