Shopify themes, liquid, logos, and UX
Hi! Does anyone know whats the easiest way to remove search icon from the header in Shopify's Dawn default theme?
Solved! Go to the solution
This is an accepted solution.
can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file.
.header__icon--search {
display: none;
}
Hi @Orihov,
Hope you are well.
Please follow the below steps:
.header__search {
display: none!important;
}
Hope that helps.
Thanks
This is an accepted solution.
can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file.
.header__icon--search {
display: none;
}
This works!!! Thank you!
hello. do you have the solution for wanting to remove the "person" icon in the header.
oh sorry for that issue, can you please send store url so i will check and let you know
Also, im looking to add a section with a icon list and headers any thoughts? similar to the below
first issue please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
.header__icon--account {
display: none !important;
}
also do you need second icon section it can be done customization code please send DM Details
hii, @Orihov
Paste this code on top of the base.css file.
summary.header__icon.header__icon--search.header__icon--summary.link.link--text.focus-inset.modal__toggle {
display: none !important;
}
Thank You.
How to remove the search icon from Dawn’s header
You might want to do this if you don’t have any need for the search in the header
It can look stupid — and sometimes you just don’t want it to appear in the header because it’s appearing somewhere else
In this case, it’s incredibly easy to change, just follow these steps:
First go to edit your code
go to base.css
add this code at the bottom
.header__icon--search {
display: none;
}
Before
After
And we are done!
If you are referring to disabling the search feature in Dawn 3.0.0, you can do that in the editor.
Header -> Header settings -> Uncheck 'Enable Search'
No code changes needed
@KetanKumar Yes, you are right. Actually, all Shopify 2.0 themes like Refresh, Taste, Craft, and Sense can use this CSS code. Meanwhile, we can edit the Liquid code too. Here is a step-by-step tutorial of how to do it:
https://www.shopifylover.com/how-to-remove-search-bar-from-shopify/
hope it can help someone.
wow that would be great
Thanks for sharing
Hello we can remove seach icon by css as well by comment code of search from website, I created a complete article for that so you can follow instructions here : https://www.blog.standincrowd.com/shopify-dawn-theme-remove-search-icon-from-header/
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