Guide
Instant product search in your Elementor header.
If you build your store with Elementor, you can add Gazelle's product search as a widget, the same way you add a heading or a button. It shows products with images and prices as shoppers type.
Free plan: 500 products and 10,000 searches a month. No card needed.
1. Install Gazelle Search
Install and activate the free Gazelle Search plugin from WordPress.org with WooCommerce active. The widget appears in Elementor automatically once both plugins are active.
2. Add the widget
Open your header template (or any page) in Elementor, search the widget panel for "Gazelle Search" and drag it into place. In a header, a column next to the logo or menu works well.
3. Widget settings
Result layout, the details panel, the mobile overlay and the results page are set once in the plugin settings and apply to every search bar.
- Placeholder text, for example "Search by name or SKU"
- Show or hide category suggestions
- Input background and text color, under the Style tab
4. Replace the old search
Remove Elementor's own search form widget, or your theme's search icon, from the header so shoppers see one search box. Then search for a product code and a product name on desktop and phone to check the results.
Without Elementor
The same search bar is available as the [gazellesearch] shortcode and a classic widget, so you can use it in any theme or builder that accepts shortcodes.
Questions
- Do I need Elementor Pro?
- Editing a site-wide header needs Elementor Pro's Theme Builder. The widget itself works in free Elementor on any page.
- Does the widget add typo tolerance?
- The widget shows whichever search you run. Typo tolerance, synonyms and variation SKU matching come from connecting Gazelle Cloud, which has a free plan.
Related
Free to start