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. Click the gear icon in the top right corner, and then click Turn off widget in the drop-down list.

    How to disable Shopify theme’s built-in autocomplete

  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 the Smart Search & Filter control panel > 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;
    }
    
    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 July 20, 2022

Was this article helpful?

Related Articles

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