Theme guide
Instant product search for the Astra theme.
Astra's header builder lets you drop HTML and widget elements into any header row. That's all you need to swap its search icon for Gazelle's instant product search.
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 Builder. Click the + in the row where you want the search (the primary header row next to the menu works well), add an HTML element and paste [gazellesearch] into it. A Widget element with the classic "Gazelle Search" widget works too.
3. Remove Astra's search
In the same header builder, remove the Search element so shoppers see one search box. Repeat for the mobile header: switch the builder to mobile view and add the HTML element there as well.
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 this work with the free version of Astra?
- Yes. The header builder, HTML and widget elements are part of 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