Move search icon in mobile to left side of header

Solved

Move search icon in mobile to left side of header

Mrstep
Explorer
58 3 8

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

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
2305 833 904

This is an accepted solution.

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 </head> tag:

 

<style>
@media only screen and (max-width: 749px) {
svg.icon.icon-search {
    position: absolute;
    left: -165px;
}
}
</style>

 

Here is result: 

BSSCommerceHDL_0-1726983035234.png

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

devcoders
Shopify Partner
368 57 92

Hi @Mrstep 

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

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

BSSCommerce-HDL
Shopify Partner
2305 833 904

This is an accepted solution.

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 </head> tag:

 

<style>
@media only screen and (max-width: 749px) {
svg.icon.icon-search {
    position: absolute;
    left: -165px;
}
}
</style>

 

Here is result: 

BSSCommerceHDL_0-1726983035234.png

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Arif_Shopidevs
Shopify Partner
263 37 36

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


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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

PageFly-Richard
Shopify Partner
4712 1077 1742

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 </body>

 

<style>
  @media screen and (max-width: 767px){
    .header__search{
          position: absolute !important;
          left: 65px !important;
   }
 }
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.