Liquid, JavaScript, themes, sales channels
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.
Hello There,
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.
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;
}
}
For some reason, it didn't work when I copied the code
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;
}
Hi @7XCHANGE,
Please send your site and if your site is password protected, please send me the password. I will check it for you
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024