Debut Theme - Display Search Box

Highlighted
Tourist
12 0 3

Hey Guys!

I am wanting to get rid of the search icon and just display the search box all the time (always open). I would also like for the button to match the same theme color of the sites buttons... example: the newsletter. 

Thanks!

0 Likes
Tourist
13 0 2

Hey, CW

This needs a small change to be done from coding. If you are familiar with HTML and if you can do that yourself then do the following: 

Open the search-form file from snippets folder then remove classes from "Form" tag and add following classes : searchh-header searchh search--focus

This is just a workaround which is the easiest way to do that yourself. Otherwise for a genuine solution it needs some changes from jQuery.

If you are not able to do that yourself then I can help you with this custom modification.

Please mail me at: jeetkamalkaur2107@gmail.com to discuss more.

Looking forward to hearing you soon.

Regards
Nitn

Nitin Sharma
0 Likes
Shopify Staff
Shopify Staff
335 31 68

Hi, CW!

This is May from Shopify.

Nitin is right, in order to remove the search icon on the header, you will need to edit your theme code. I am not an expert in coding myself, but I managed to figure out how to remove the icon. If I may ask, why did you want to display the search box at all time and remove the icon? I just took a peek at your website, it looks like you’ve managed to change the button to match the color of the theme. I’d also like to add, that you perhaps want to consider adding a top padding to the search box, to make your site look more balanced. ? Now, let’s see the steps below on how to remove the search icon!

  1. From your admin, head over to ‘Online Store > Actions > Edit’.

  2. In your ‘Sections’ folder, go to ‘header.liquid’, and search for ‘search-form’ inside the file. If you are on a Mac, press Command + F to search the file, on Windows, press Control + F.

  3. Remove the line of code marked above. Your final code should look like:

  4. Click ‘Save’.

For future reference, if you would like to change put your search icon back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support

May | Social Care @ 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

0 Likes