Search: Stop the search icon from redirecting to the search page

Search icon: A single click on the icon will expand the search input area. A double-click will redirect your customer to the search page. 

If you'd like to remove that functionality to help prevent redirection to the search page, you can make this modification:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Open the header.liquid file from the Sections folder:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

search-btn

Example:

That will highlight the button line (2). We will replace that entire line with new code:

Change from:

<button type="submit" class="btn search-btn"></button>

Change to:

<span class="search-btn"></span>

Example after:

Save the file.

Now only the in-line search area will work for searches. Accidental clicks on the search icon will not redirect to the search page. 

Still need help? Contact Us Contact Us