Move search icon in mobile to left side of header

Store Design

Topic summary

A user wants to reposition the search icon to the left side of the mobile header on their Shopify store (shopcuzzo.com), as shown in an attached screenshot.

Solutions Proposed:

Multiple developers offered code-based solutions requiring edits to theme files:

  • BSSCommerce-HDL: Suggested adding custom CSS code to theme.liquid file above the </head> tag, with a visual result provided
  • Arif_Shopidevs: Recommended adding CSS to base.css (targeting mobile devices with media queries) and inserting code in header.liquid to hide the original desktop search icon and display a new mobile-only version
  • PageFly-Richard: Proposed adding code to theme.liquid above the </body> tag

All solutions involve accessing Shopify Admin → Online Store → Themes → Edit code.

Status: The discussion remains open. One user noted they cannot view the code snippets in BSSCommerce-HDL’s response, suggesting a display issue. No confirmation yet on which solution was implemented or successful.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

would like to move search icon to the left side of the screen see pic for move. on mobile only. www.shopcuzzo.com

IMG_3318.jpg
IMG_3318.jpg1284Ă—2778 240 KB

2 Likes
2

Hi @Mrstep

For mobile, we will need to make structural changes through coding.

3

Hi @Mrstep ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1726983035234.png
BSSCommerceHDL_0-1726983035234.png925Ă—841 306 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
4

Hello, Please follow this steps to add the css

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

/* Show .header__search only on mobile devices */
@media (max-width: 768px) {
 
      .header>.header__search {
        display: block;
        grid-area: revert-layer;
        margin-left: 29px;
        position: -21px;
        margin-top: -44px;
    }

  .header__search {
    display: none;
  }
}

Step 5 : sections/header.liquid line 173 add bellow code

{% render 'header-search', input_id: 'Search-In-Modal' %}

The the first search icon will hide in mobile and show in desktop the new one show in mobile and hide in desktop like this screen shot

Arif_Shopidevs_0-1726983535426.png
Arif_Shopidevs_0-1726983535426.png731Ă—371 86.5 KB

Let us know if it is solved or not.
Thank you

1 Like
5

This is Richard from PageFly - Shopify Page Builder App

Hi @Mrstep Please add code here to change position Search Icon

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

1 Like
6

why i can’t see the code?