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
Tip

If you didn’t find the guide for your theme, we recommend you look at the theme documentation or contact the theme support team.

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. 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 Smart Search & Filter control panel > Instant search widget section.
  2. Clear the Enable instant search widget checkbox to turn off Instant Search Widget.
  3. Apply the changes.
  4. Go to your storefront and start typing a search term into the search box. The theme’s autocomplete block will be displayed.
  5. 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.
  6. Go to the Smart Search & Filter control panel > Instant search widget section.
  7. Select the Enable instant search widget checkbox to turn on Instant Search Widget.
  8. Go to the Custom CSS tab.
  9. Paste the following CSS rules for the block’s main container to disable it:
    .quick_search_wrapper {
        display: none;
    }
    
    How to disable Shopify theme’s built-in autocomplete
  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.

Tip

If the CSS rules won’t work, try to use “!important” rule:

.quick_search_wrapper {
    display: none !important; 
}

Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review.

Updated on May 31, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Back to top