How to disable Shopify theme’s built-in autocomplete

Shopify themes can have a built-in autocomplete search. When Instant Search Widget is displayed simultaneously, it doesn’t look nice. In case this happens, you should turn off the theme’s autocomplete. Here you can find guides for some Shopify themes on how to do that:

• Focal Theme
• YourStore Theme
• Beauty Theme
• Empire Theme

If you didn’t find how to turn off the autocomplete in your Shopify store theme, try to disable it with the app’s Custom CSS feature. Look here for the instructions.

Turning off Autocomplete

Focal Theme

To turn off autocomplete in a Focal Theme, follow these steps:

1. 1. Go to Shopify admin panel > Online store > Themes.
   2. Find the theme and click Actions > Edit code.
   3. In the Snippets directory click the mega_search.liquid file.
   4. Find the code for the search box like this:

      <input type="search" class="mega-search__input" name="q" placeholder=" 'search.autocomplete.placeholder' | t " value=" search.terms | escape " autofocus="autofocus" autocorrect="off" autocomplete="off">

   5. Delete class=”mega-search__input” from it.
   6. Save the changes.

YourStore Theme

To turn off autocomplete in a YourStore Theme, follow these steps:

1. Go to Shopify admin panel > Online store > Themes.
2. Find the theme and click Actions > Edit code.
3. In the Layout directory click the theme.liquid file.
4. Comment out the code line with ‘search-autocomplete’:

   {% comment %}{% include 'search-autocomplete' %}{% endcomment %}

5. Save the changes.

Beauty Theme

To turn off autocomplete in a Beauty Theme, follow these steps:

1. Go to Shopify admin panel > Online store > Themes.
2. Find the theme and click Actions > Edit code.
3. In the Config directory click the settings_data.json file.
4. Change the following code line:

   "enable_auto_search": true

   to

   "enable_auto_search": false

5. Save the changes.

Empire Theme

To turn off autocomplete in an Shopify Empire Theme, follow these steps:

1. Go to Shopify admin panel > Online store > Themes.
2. Find the theme and click Actions > Edit code.
3. In the Config directory click the settings_data.json file.
4. Change the following code line:

   "enable_live_search": true

   to

   "enable_live_search": false

5. Save the changes.

Disabling Autocomplete with Custom CSS

Steps:

1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section.
2. Click the gear icon in the top right corner, and then click Turn off widget in the drop-down list.

   

3. Go to your storefront and start typing a search term into the search box. The theme’s autocomplete block will be displayed.
4. Inspect the HTML structure of the block using the Developer tools of your browser and find the CSS class for its main container. Let’s suppose it is .quick-search-wrapper.
5. Go to theSearchanise Search & Filter control panel > Search & Navigation > Instant search widget section.
6. Enable Instant Search Widget.
7. Go to the Custom CSS & HTML tab.
8. Enable the Custom CSS setting if it is disabled.
9. Paste the following CSS rules for the block’s main container to disable it:

   .quick_search_wrapper {
       display: none;
   }
   

   
10. Apply the changes.

That’s it. You can now go to your storefront if you’d like to make sure there’s no clash anymore.

.quick_search_wrapper {
    display: none !important; 
}