Move search icon in mobile to left side of header

Store Design
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?