Solved

Shopify Dawn Default Theme - Search Icon Removal

Orihov
Visitor
3 0 2

Hi! Does anyone know whats the easiest way to remove search icon from the header in Shopify's Dawn default theme?

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Orihov 

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 14 (14)

Zworthkey
Shopify Partner
5581 642 1565

hii, @Orihov 
Kindly share your store URL so,
I can solve your issue.
Thank You.

prasanna1991
Shopify Partner
25 9 11

Hi @Orihov,

Hope you are well.

Please follow the below steps:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css
  3. Paste the below code at the bottom of the file & Click Save

 

.header__search {
    display: none!important;
}

 

Hope that helps.

Thanks

- Want to modify or custom changes on store Hire me.
- Feel free to contact me on prasanna.mahamulkar@gmail.com regarding any help.
- If helpful then please Like and Accept Solution.
Shopify Frontend Web Developer | Whatsapp Me

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Orihov 

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Susan_Blue
New Member
4 0 0

This works!!! Thank you!

cj18
Excursionist
26 0 5

hello. do you have the solution for wanting to remove the "person" icon in the header. 

cj18_1-1659214169794.png

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@cj18 

oh sorry for that issue, can you please send store url so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cj18
Excursionist
26 0 5

https://crystallation.com/

 

Also, im looking to add a section with a icon list and headers any thoughts? similar to the below

 

cj18_0-1659251946298.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@cj18 

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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Zworthkey
Shopify Partner
5581 642 1565

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.

HamishDavisonIC
Shopify Partner
62 9 66

@Orihov 

 

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:

HamishDavisonIC_0-1631800078498.png

 

First go to edit your code HamishDavisonIC_1-1631800078099.png

 

go to base.css HamishDavisonIC_2-1631800078049.png

 

add this code at the bottom

.header__icon--search {
display: none;
}

HamishDavisonIC_3-1631800078066.png

 

Before HamishDavisonIC_4-1631800078073.png

 

After

And we are done!

gnome_sayin
Tourist
11 0 1

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

ahmedhuang
Shopify Partner
2 0 1

@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.

KetanKumar
Shopify Partner
36839 3635 11972

@ahmedhuang 

wow that would be great 

Thanks for sharing 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

v_vashisth
Shopify Partner
18 0 0

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/