Moving search bar/icon from left side to right side

7XCHANGE
New Member
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.

 

0 Likes
Pallavi
Shopify Expert
2235 370 484

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
0 Likes
Speedimize
Shopify Partner
289 46 122

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;
}
We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
LitExtension
Shopify Partner
1228 157 217

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
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
7XCHANGE
New Member
3 0 0
0 Likes
LitExtension
Shopify Partner
1228 157 217

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
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
7XCHANGE
New Member
3 0 0

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

0 Likes