Theme guide
Instant product search for the Kadence theme.
Kadence has a drag-and-drop header builder with HTML and widget elements, so Gazelle's search bar can sit anywhere in the desktop or mobile header.
Free plan: 500 products and 10,000 searches a month. No card needed.
1. Install Gazelle Search
In WordPress go to Plugins → Add New, search for "Gazelle Search", install and activate it. WooCommerce must be active. Set the placeholder text and colors under Gazelle Search → Search Bar Settings, and the result layout under Gazelle Search → Autocomplete.
2. Add the search bar to the header
Open Appearance → Customize → Header. Drag an HTML element into the row you want and paste [gazellesearch] into its content. Alternatively, add a Widget Area element and put the classic "Gazelle Search" widget in it under Appearance → Widgets.
3. Remove Kadence's search
Drag the Search element out of the header so there's one search box. Then switch to the mobile header tab and add the search bar there too.
Check it on a phone
Turn on the mobile search overlay in Gazelle Search → Search Bar Settings so results open full screen above the keyboard. If space in the mobile header is tight, use the icon-only option. Then search for a product name and a SKU on a real phone.
Need a hand?
If your header doesn't look right after these steps, email support@gazellesearch.com with your store URL and theme version, and we'll help you place the search bar. This is free on every plan.
Questions
- Does it work with Kadence's free theme?
- Yes. The header builder and HTML element are in the free theme.
- Does Gazelle change my theme's files?
- No. The search bar is added with a shortcode or widget through the theme's own settings, so theme updates won't remove it and you can undo it at any time.
Related
Free to start