Moving search bar/icon from left side to right side

7XCHANGE
Visitor
3 0 0

I'm having a hard time figuring out how to move the search bar on our site. I would like to move it from the top-left header to the right side of the header. Any help would be greatly appreciated.

 

Replies 6 (6)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
7XCHANGE
Visitor
3 0 0
LitExtension
Shopify Partner
4860 1001 1132

Hi @7XCHANGE

Please follow the steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > styles.css and paste this at the bottom of the file:

.logo-area__left .show-search-link{

  display: none !important;

}

@media (max-width: 767px){

.logo-area__left .show-search-link{

  display: inline-block !important;

}

}

.logo-area__right .show-search-link{

  display: inline-block !important;

}

@media (max-width: 767px){

.logo-area__right .show-search-link{

  display: none !important;

}

}

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
7XCHANGE
Visitor
3 0 0

For some reason, it didn't work when I copied the code

Not applicable

Hi @7XCHANGE 

Aibek is here from Speedimize.io

You already have a search in the header on the right, but it is only hidden. To make it visible, find the class below and delete display: none in styles. css. To search, use the combination ctrl+f or cmd+f
As a result, it should be as below:

.logo-area__right .show-search-link {
   margin-right: 20px;
}

It remains to delete the search, which is located on the left. If we are not mistaken, this can be done through the Online Store->Themes->Customize.


But if there is no such option, then write the style below at the very end of styles.css: 

.logo-area__left .show-search-link {
   display:none;
}

LitExtension
Shopify Partner
4860 1001 1132

Hi @7XCHANGE

Please send your site and if your site is password protected, please send me the password. I will check it for you

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify