Shopify themes, liquid, logos, and UX
Hi, can anyone help me with changing the location of the the search icon, I am using impulse theme and I want the search icon to be on the right hand side so its with all the other icons.
Any help would be appreciated.
Link: https://testingstoresandthemes.myshopify.com/
Storefront password: test
Solved! Go to the solution
This is an accepted solution.
@technase Please follow below steps to move the search icon to right side. Let me know whether it is helpful for you.
.header-item--left .small--hide .js-search-header {
display: none !important;
}
a.js-search-header.medium-up--hide {
display: inline-block !important;
}
Result will be like,
Hi @technase
You can follow the following steps:
1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.
<style>
a.site-nav__link.site-nav__link--icon.js-search-header {
display: none !important;
}
a.site-nav__link.site-nav__link--icon.js-search-header.medium-up--hide {
display: inline !important;
}
</style>
If this solution is worked, then please Like this and Mark this as accepted solution!
Laddi
HEllo @technase ,
To Move Search Bar to the right side You need to Edit the Code that header.liquid
This is Noah from PageFly - Shopify Page Builder App
Hi @technase you need find file header.liquid and find code contain box icon search and past it to fit position. like here:
With design in your website. The code icon search will near top file header.liquid.
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
@technase Please follow below steps to move the search icon to right side. Let me know whether it is helpful for you.
.header-item--left .small--hide .js-search-header {
display: none !important;
}
a.js-search-header.medium-up--hide {
display: inline-block !important;
}
Result will be like,
Thanks mate! worked like a charm
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025