Instant product search for the Storefront theme.

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. Swap the search with a small snippet

Add this to your child theme's functions.php or a code snippets plugin. It removes Storefront's product search from the header and outputs Gazelle's search bar in the same spot.

• remove_action( 'storefront_header', 'storefront_product_search', 40 );
• add_action( 'storefront_header', function () { echo do_shortcode( '[gazellesearch]' ); }, 40 );

3. Don't want code?

Add the classic "Gazelle Search" widget to the Sidebar or a Footer widget area under Appearance → Widgets, or put the shortcode at the top of your shop page with a Shortcode block.

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.