Shopify Mobile Search Bar: How to Move it Next to the Icon for Better UX

Hey everyone!

As a Shopify migration expert and someone who spends a lot of time sifting through our amazing community discussions, I often come across questions that, while specific, touch on universal pain points for store owners. Recently, a query from Luxurymrkt caught my eye, and it’s something many of you might be wondering about: how to fine-tune your mobile site’s search bar.

Luxurymrkt was looking to move their mobile search bar from below the search icon to next to it, just like in the example they shared. They're running scntwrld.com, and their goal was clear: a cleaner, more intuitive mobile header. This kind of small tweak can make a huge difference in how customers interact with your store on their phones.

Why Mobile Search Placement Matters

Think about it: most of your customers are probably browsing on their mobile devices. A well-placed, easily accessible search function isn't just a nicety; it's a critical component of a smooth user experience. When a customer knows exactly where to look for the search bar, they're more likely to find what they need quickly, leading to higher engagement and, ultimately, more sales.

Luxurymrkt’s desired layout (search icon and bar side-by-side) is a common and effective design pattern. It keeps the header compact while clearly presenting the search functionality. Currently, on Luxurymrkt's site, the search bar appears below the icon, which takes up more vertical space and can feel a bit clunky on smaller screens.

Luxurymrkt's Vision vs. Current Setup

Here’s what Luxurymrkt was aiming for:

And here’s how it looked on their site:

The Solution: A Little Theme Code Magic

Achieving this kind of layout typically involves a bit of theme code customization. Don't worry, it's not as scary as it sounds, but it does require careful steps. The core idea is to adjust the HTML structure of your header and then apply some CSS magic, usually with Flexbox, to position the elements correctly.

Before You Start: Backup Your Theme!

This is my golden rule for any theme code edits. Always, always, always duplicate your live theme before making changes. That way, if anything goes wrong, you can quickly revert to the previous version without impacting your customers.

1. In your Shopify admin, go to Online Store > Themes.
2. Find your current theme, click Actions > Duplicate.
3. Work on the duplicated theme.

Step-by-Step Guide to Moving Your Mobile Search Bar

While the exact file names and code snippets can vary slightly between themes (Luxurymrkt is using the 'Sense' theme, for example), the general approach remains consistent. We'll be looking for the section of code that renders your header, specifically the search icon and its associated input field.

1. Access Your Theme Code

1. From your Shopify admin, go to Online Store > Themes.
2. On your duplicated theme, click Actions > Edit code.

2. Locate the Header Section (Typically header.liquid)

In the 'Layout' or 'Sections' directory, you'll likely find a file named header.liquid or something similar (e.g., section-header.liquid). This file controls the structure of your store's header.

• Open sections/header.liquid (or the equivalent file for your theme).
• Look for code related to the mobile header, search icon, and search input. You might see elements with classes like .header__icon--search, .search-modal__toggle, or similar.

3. Adjust the HTML Structure

The goal here is to ensure the search icon and the search input field are siblings within a container that we can then apply Flexbox to. Sometimes, the search input is in a separate modal or a hidden element that expands. You might need to bring it directly into the header's structure, or adjust how its visibility is toggled.

Let's assume you find something like this (simplified example):

If the search input is not a direct sibling of the icon, you'll want to modify the Liquid to make it so, wrapping them in a common parent

@media screen and (max-width: 749px) { // Adjust breakpoint as needed for mobile
  .mobile-search-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; // Or space-between, depending on desired layout
    width: 100%; 
  }

  .mobile-search-wrapper .header__icon--search {
    margin-right: 10px; // Add some space between icon and bar
  }

  .mobile-search-wrapper .search-bar-container {
    flex-grow: 1; // Allow the search bar to take up available space
  }

  .mobile-search-wrapper input[type="search"] {
    width: 100%; 
    // Add any specific styling for the input field itself
  }

  // You might need to hide default full-width search modals
  // or adjust their display property for smaller screens.
  .search-modal {
    display: none !important; // Or adjust its position if it's meant to be inline
  }
}