Theme guide
Instant product search for the Flatsome theme.
Flatsome's header builder includes HTML elements that accept shortcodes, which is the easiest way to add 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. Put the shortcode in an HTML element
Go to Flatsome → Advanced → Header (or Appearance → Customize → Header → HTML) and paste [gazellesearch] into one of the HTML fields, such as HTML 1.
3. Place it in the header
Open the header builder (Appearance → Customize → Header → Header Builder), drag that HTML element to where you want the search, and remove Flatsome's Search element. Do the same in the mobile header.
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
- Can I use it inside the UX Builder?
- Yes. Add a shortcode or text element in UX Builder and paste [gazellesearch] to put the search bar in a page section.
- 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