How to disable the default suggestion dropdown in a Shopify theme

The suggestion dropdown from your theme’s search can appear in the storefront alongside with Searchanise Instant search widget and confuse your customers.

What can be done in this situation?

1. Check if your theme is in the list

For more than 100 themes, we have developed hiding of their search dropdown by default. Here is the list of these themes:

Abode, Alchemy, Align, Artist, Athens, Atlantic, Aurora, Banjo, Baseline, Berlin, Beyond, Blum, Blockshop, Borders, Boost, Capital, Canopy, Cascade, Champion, Chord, Context, Cornerstone, Craft, Dawn, Debut, Digital, Distinctive, Drop, Editions, Ecomus, Empire, Envy, Essence, Essentials, Emerge, Eurus, Fashionopolism, Fetch, Flawless, Focal, Foodie, Fresh, Gain, Gem, Grid, Habitat, Highlight, Honey, Icon, Impact, Impulse, Influence, Kalles, Local, Lorenza, Luxe, Maker, Maranello, Masonry, Modular, Monaco, Mr-parker, Modules, Nordic, North, Origin, Pacific, Palo-alto, Parallax, Pesto, Pipeline, Prestige, Providence, Release, Reformation, Responsive, Ride, Sahara, Sense, Shapes, Shine, Sitar, Sleek, Spark, Spotlight, Starlite, Startup, Stockmart, Story, Studio, Sunlight, Sunrise, Symmetry, Tailor, Taste, Testament, Tokyo, Toyo, Trade, Unicorn, Upscale, Venue, Vantage, Vision, Warehouse, Whisk, Woodstock, Xclusive, Xtra, Yuva, Zest, Zora.

2. Address our support team

If your theme is not on the list above or the default dropdown still appears on the storefront, contact our support specialists. They can quickly make the necessary adjustments.

If you are ready to dive into editing CSS code by yourself, there are two ways to fix the issue. For both options, you need to find the default search bar’s class first.

1. Add CSS code in the theme files. The changes will be applied directly to your storefront.
2. Add CSS code in the Searchanise app: Go to Searchanise Search & Filters control panel >  Search & Navigation > Instant search widget section > Custom CSS & HTML tab. In the enabled Custom CSS field insert the following code:

.element-class {
    display: none;
}

Use the default search dropdown’s class instead of element-class. You can find it by inspecting the search bar in the dev mode of your browser.

In this case, the default search bar will be hidden upon Searchanise widget loading.