How to remove search icon in Debut Theme?

Solved
Highlighted
New Member
1 0 0

Any help would be greatly appreciated.

Thanks.

0 Likes
Highlighted
Shopify Partner
44 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

0 Likes
Highlighted
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
0 Likes
Highlighted
Shopify Staff
Shopify Staff
635 16 204

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 Griffin
Shopify | Developer Community Manager
Highlighted
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

Highlighted
Community Moderator
Community Moderator
3391 252 607

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

Highlighted
Tourist
3 0 1

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


 

0 Likes
Highlighted
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

Highlighted
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;
}
Highlighted
Tourist
3 0 1

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