Search bar

🤔 How to set  up the Search bar located in the header of your store?

Want to add a functional and customizable Search bar to your store's header for better product discovery? Here's how:

STEP 1: Go to Theme Settings >  Search bar.

STEP 2: Next to Enable search bar, select one of three options:

• None: Completely disables the search bar.

• Default: Enables the basic search bar. It will show the default placeholder text: “What are you searching for?”.

• Refined: Enables the advanced search bar. In addition to the Default features, it includes a dropdown menu (e.g., “All Categories”) allowing customers to filter search results by category right from the start.

Select the desktop results layout at Desktop layout field:

• Loose: Search results in the popup will be displayed as a horizontal slider, ideal for quick browsing.

• Compact: Search results will appear in a grid layout within the pop-up, allowing more items to be shown neatly at once.

STEP 3: Customize the Desktop layout of Header (Optional)

• Search for Header (this section is added by default).
• Click on the Header section to expand its settings.
• Choose a Desktop layout (Logo on top, Logo on side, Compact) that suits your store's design. This will also change how the search bar is displayed.

STEP 4: Click “Save” when done.

💡 Pro tip: Use the Refined mode if your store has multiple product categories—it helps customers narrow down searches instantly. The Loose (slider) layout highlights individual products, while the Compact (grid) saves space and displays more information efficiently.

🤔 How to configure search results for in-store search?

Want to control what content appears in search results and optimize the display for desktop and mobile? Here's how:

STEP 1: Go to Theme Settings > Search bar > Search results.

STEP 2: Select content types to show in results
Toggle the following options to include or exclude content types:

• Show products: Include products in search results (essential for most stores).
• Show articles: Include blog posts or articles.
• Show collections: Include product collections.
• Show pages: Include informational pages (e.g., About Us, Shipping Policy).

Toggle Show link to search results page to display and allow users to “view all” results on a dedicated page.

STEP 3: Set maximum results limits
Desktop maximum results: Set the number of results shown on desktop (1 to 10).
Mobile maximum results: Set a lower number for mobile (1 to 10) for faster loading.

STEP 4:  Click “Save” when done.

💡 Pro tip: Use lower limits on mobile to improve speed and usability. Always include the “view all” link for broad searches!

🤔 How to configure the default search bar for in-store search?

Want to customize search bar messaging, popular suggestions, and recommended products or collections to guide customers? Here's how:

STEP 1: Go to Theme Settings > Search bar > Default search bar. 

STEP 2: Customize Search bar message and suggestions

• Search bar default message: Replace “What are you searching for?” with a custom prompt (e.g., “Search for sports gear...”).
• Popular search terms: Add frequently searched keywords, separated by commas (e.g., running shoes, jackets, yoga mats).
• Search terms title: Edit the section title (e.g., “Trending Searches”).

STEP 3: Highlight popular products and collections

• Popular products: Select high-demand products to feature in search suggestions.
• Popular products title: Rename this section (e.g., “Best Sellers”).
• Popular collections: Showcase key collections (e.g., “Cycling Essentials”).
• Popular collections title: Customize the title (e.g., “Shop Collections”).

STEP 4: Enable store discovery

• Store discovery: Use dropdowns like “All Categories” to help users filter results.
• Store discovery title: Add a guiding title (e.g., “Need Help?”).

STEP 5: Click “Save” when done.

🤔 How to show more information on Product cards from in-store search?

Want to display vendor, ratings, or price directly on product cards in search results to help customers make faster decisions? Here's how:

STEP 1: Go to Theme Settings > Search bar > Product cards. 

STEP 2: Toggle the following options to show extra details:

• Show vendor: Displays the product’s brand or vendor name.
• Show ratings: Shows star ratings and review counts (if a review app is installed).
• Show price: Let customers see the price directly in search results.

STEP 3: Click “Save” when done.

🤔 How to enable speech search on the search bar?

Want to add a functional and customizable Search bar to your store's header for better product discovery? Here's how:

STEP 1: Go to Theme Settings > Search bar > Speech search. 

STEP 2: Toggle Enable speech search to activate the feature.

Customize voice search feedback:
Set Speech pulse color (light) for light themes.
Set Speech pulse color (dark) for dark themes.
⚠️ Note: This color will animate during voice input for visual feedback.

STEP 3: Click “Save” when done.
⚠️ Note: Speech search is only available on Chrome for desktop or Android (will not work on iPhone).

🤔 How to exclude collections from in-store search?

Want to hide specific collections from search results and recommendations? Here's how:

STEP 1: Go to Theme Settings > Search bar > Search exclusion. 

STEP 2: Click Exclude collections > “Select”. Choose the collections you want to hide from search results (e.g., seasonal items, internal collections).

STEP 3: Click “Save” when done.