Theme guide
Instant product search for the Blocksy theme.
Blocksy's header builder has HTML and widget area elements. Put Gazelle's shortcode in one of them to replace the theme's search with instant product results.
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. Add an HTML element to the row you want and paste [gazellesearch]. A Widget Area element with the classic "Gazelle Search" widget is the alternative.
3. Remove Blocksy's search
Remove the Search element from the desktop and mobile headers so shoppers see one search box.
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 Blocksy's own WooCommerce search conflict?
- Once you remove Blocksy's Search element from the header there's nothing to conflict with. The theme's search results page isn't used by Gazelle's dropdown.
- 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