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:

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


If you didn't find how to turn off the autocomplete in your 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 code line 
    "enable_auto_search": true

    to

    "enable_auto_search": false
  5. Save the changes.

Empire Theme

To turn off autocomplete in an 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 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;
}

  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; 
}