FROM CACHE - en_header

How to remove search icon in Debut Theme?

Solved
Kimberly_Molina
New Member
1 0 0

Any help would be greatly appreciated.

Thanks.

Accepted Solution (1)

Accepted Solutions
Liam
Shopify Staff
Shopify Staff
689 19 262

This is an accepted solution.

Hi Kimberly, 

Liam here from Shopify - thank you for your question 🙂

Great to see you are looking to set up your store exactly how you would like, so let's see how you can hide that search icon. The easiest way to do this might be to add some CSS to your stylesheet. 

As described by earlier posters, you can find the stylesheet within the Edit Code section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

.search-header__submit.search__submit.btn--link {
  display: none;
}

I hope this helps Kimberly, if you have any other questions, please let me know.

Cheers,
Liam
 
support@shopify.com

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 116 (116)
Brie_Reynolds
Shopify Partner
46 0 1

Hi Kimberly.

 

It will just take removing some code. Probably found in your theme.liquid file. If you need help, email me at candocoding@yahoo.com

Amy_Park
Shopify Partner
9 0 0

Which page would you like to take it off of? This will determine which file of code you need to edit. Usually the codes files are labelled clearly to correspond with a page you'd recognize. To find the list of files, go Admin > Online Store > Themes > drop down menu "Actions"> Edit Code. You'll see a lot of files with the extension .liquid.

Find the .liquid file which corresponds to the page that has the search bar in question. You want to find the code for the search bar, and then carefully delete it from the rest. If that is a little too daunting don't worry, there are people who I'm sure can help you further with it. Let me know if you want more info on what the code you're looking to delete might actually look like. 

And you can always revert back to an older version of the code, so make a mental note what time it was you first edited the code if you're going to fiddle with it. 

 

Hope this helps 🙂 

Amy Park // Litrx.net // instagram.com/literature.prescription
Liam
Shopify Staff
Shopify Staff
689 19 262

This is an accepted solution.

Hi Kimberly, 

Liam here from Shopify - thank you for your question 🙂

Great to see you are looking to set up your store exactly how you would like, so let's see how you can hide that search icon. The easiest way to do this might be to add some CSS to your stylesheet. 

As described by earlier posters, you can find the stylesheet within the Edit Code section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

.search-header__submit.search__submit.btn--link {
  display: none;
}

I hope this helps Kimberly, if you have any other questions, please let me know.

Cheers,
Liam
 
support@shopify.com

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Gui1
Tourist
5 0 2

how can i remove all header things, like search, cart and login icons? 

I want just the logo (home bottom)...

 

tks

Nick
Community Moderator
Community Moderator
4531 434 1001

Hi Gui, 

Nick here from Shopify. 

That is something which is possible but not something we would recommend. The reason our theme support team wouldn't recommend it is that it will have unforeseen effects in the future when doing thing such as installing apps and could even remove the navigation.

Should you still want to follow through you can do this by adding the following code below to to the bottom of the theme.scss.liquid file.

.site-header {
  display: none;
}

 And 

.site-header__icons-wrapper {
  display: none;
}

Should you want to learn any more, don't hesitate to reach out to our support team directly about anything. 

Cheers, Nick

Nick | Community Moderator @Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

strakestudio
Tourist
3 0 4

This solution from Liam is good to remove the search icon, but the search icon remains in mobile view.

How do I modify code to remove the search icon for mobile?

Thanks


@Liam wrote:

Hi Kimberly, 

Liam here from Shopify - thank you for your question 🙂

Great to see you are looking to set up your store exactly how you would like, so let's see how you can hide that search icon. The easiest way to do this might be to add some CSS to your stylesheet. 

As described by earlier posters, you can find the stylesheet within the Edit Code section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

.search-header__submit.search__submit.btn--link {
  display: none;
}

I hope this helps Kimberly, if you have any other questions, please let me know.

Cheers,
Liam
 
support@shopify.com


 

readcrease
New Member
1 0 2

bump on this one^

 

I removed search icon but it is still there when you mouse over the area where it was and I can still see search function on mobile. 

 

thanks

Widegrid
New Member
1 0 4

Hi,

Enter the code below at the bottom of your theme.scss.liquid to remove the search function on mobile.

.site-header .icon-search,{
display: none;
}
strakestudio
Tourist
3 0 4

@Widegrid wrote:

Hi,

Enter the code below at the bottom of your theme.scss.liquid to remove the search function on mobile.

.site-header .icon-search,{
display: none;
}

Confirmed, thanks!

Revan
Excursionist
14 1 2

@Widegrid wrote:

Hi,

Enter the code below at the bottom of your theme.scss.liquid to remove the search function on mobile.

.site-header .icon-search,{
display: none;
}

Hello, that seems to have worked in removing the search function and the 3 horizontal bar icon however I am still getting the 3 horizontal bar icon when viewing on mobile.

The only icon I wish to display is cart.

Olly17
New Member
11 0 0

Any help please?

 

I tried to remove the search icon but nothing works... The thing is the Icon is not her anymore but when you go with the mouse on it it's still do the search ...

Ryan15
New Member
1 0 0

I followed the steps outlined and was able to get the search icon removed. However, the coding is appearing right below my header now. How do I remove this?

 

Screen Shot 2019-09-19 at 11.35.18 AM.pngScreen Shot 2019-09-19 at 11.35.25 AM.png

JD81
Tourist
3 0 1

The added code removes the icon only - you can still search by simply clicking where the icon used to be! This isn't a solution shopify. I have dealer pricing details hidden unless a user logs in but these come up on a search! So i need to restrict search or hide the pricing which also seems impossible.  

SoBow
New Member
4 0 0

I did the following, and it didnt work for my stuff at all. Am i doing something wrong? 

Jasoliya
Shopify Expert
4532 586 1144

Hi @SoBow 

Send your store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
SoBow
New Member
4 0 0
LittleSoBowShop.com
Jasoliya
Shopify Expert
4532 586 1144

Add this css in Asset->theme.scss file at bottom:

.search-header,.site-header__search-toggle{display:none;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
kylemartin
New Member
1 0 4

If you or anyone is still interested, I found a simple way to fix this.

 

I am very new to shopify and liquid but found a way to get rid of both seeing the buttons AND the buttons being able to be clicked when hovering over.

I commented out code from lines 116 to 127 in the header.liquid file and that seems to be working for me (desktop & mobile). Hiding the search button in the theme.scss.liquid file does not seem to be needed once you do this either.

 

Follow this at your own risk, I am not completely sure if this will affect any other functionalities of the site, but so far I haven't ran into any problems. lines 116 - 127lines 116 - 127

 

SoBow
New Member
4 0 0
I got it thank you