Everything you need to set up and customize the Predictive Search block — from configuring search suggestions and product recommendations to understanding how live results appear as your customers type.
Predictive search is a search experience that shows results instantly as customers type, without the need for a page reload. Instead of submitting a search and waiting for a results page, visitors see matching products, collections, articles, and pages appear in real time — helping them find what they're looking for faster.
In the Boardwalk theme, the Predictive Search block is a built-in component of the header. When a visitor clicks the search icon, a full-width overlay drops down from the top of the page with a search input and a results area. Before the visitor starts typing, the overlay can display suggested search phrases and recommended products from a collection you choose. Once the visitor begins typing, live results appear organized into columns — products on one side, and suggestions, collections, articles, and pages on the other.
Follow these steps to add and configure predictive search in your Boardwalk theme header.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize.
In the Theme Editor sidebar, expand the Header section. You should see the Predictive Search block listed as a static block. Click on it to open its settings. If you don't see it, click Add block inside the header and choose Predictive Search from the list.
In the block settings, scroll to the Suggestions section. Enter a list of search phrases separated by commas (for example: New arrivals, Best sellers, Sale, Gift cards). These phrases appear as clickable buttons when the search overlay first opens, before the visitor starts typing. You can also customize the title that appears above the suggestions list.
Under the Recommendations section, use the collection picker to select a collection whose products will appear alongside the suggestions when the overlay opens. This is a great way to highlight trending items, new arrivals, or best sellers. You can also set how many products to display and customize the heading above the recommendations.
Note: The collection you choose must have active, published products in your Shopify admin. If the collection is empty or its products are in draft status, no recommendations will appear.
Scroll to the Product display section. Here you can choose whether to show product prices and vendor names on the product cards that appear in both the recommendations area and the live search results.
Under the Appearance section, select a color scheme for the search overlay. This controls the background and text colors of the entire predictive search dropdown.
Click Save in the Theme Editor. Preview your store and click the search icon in the header to verify that the search overlay, suggestions, and recommendations are displaying as expected. Try typing a few characters to confirm that live results appear.
These settings are available when you click the Predictive Search block inside the Header section in the Theme Editor sidebar.
The placeholder text displayed inside the search input field before the visitor starts typing.
The heading that appears above the list of suggested search phrases in the default state.
A comma-separated list of search terms that appear as clickable buttons in the search overlay. When a visitor clicks one, it automatically fills the search input and runs a search for that phrase.
The heading that appears above the recommended products grid in the default state.
Select a collection from your store. Products from this collection are displayed as recommended items when the search overlay first opens, before the visitor types anything. If no collection is selected, the recommendations area will not appear.
Controls how many products from the selected collection are shown in the recommendations grid. Range: 2 to 8.
When enabled, product prices are displayed below each product title in both the recommendations area and the live search results. Products on sale will show both the original and discounted prices.
When enabled, the product vendor name is displayed above the product title on each product card.
Select any defined color scheme to style the search overlay background and text.
Understanding the different states and behaviors of the search overlay will help you get the most out of this block.
When the search overlay first opens and the input field is empty, visitors see two areas side by side: your suggested search phrases on the left, and recommended products from your chosen collection on the right. This gives visitors a starting point, even before they type anything. Clicking a suggestion phrase automatically fills the input and triggers a search.
As the visitor types, the block fetches matching results in the background without a page reload. Results are organized into two columns: the left column shows search suggestions (alternative queries), collections, articles, and pages; the right column shows matching products displayed as image cards with titles and optional pricing. Only categories with results are shown — empty categories are hidden automatically.
If a search query doesn't return any matching products, collections, articles, or pages, the overlay displays a "No results found" message. The visitor can clear their input and try a different search term.
When live results are displayed, a View all results button appears at the bottom of the overlay. Clicking it takes the visitor to the full search results page for their query, where they can browse all matching content.
The Predictive Search block comes with features that work automatically — no apps or custom code needed.
Results appear as the visitor types, without a page reload. The search waits briefly after each keystroke before fetching results, so it doesn't make unnecessary requests while the visitor is still typing.
Searches across five content types at once: products, collections, articles, pages, and query suggestions. Each type is displayed in its own labeled section, making it easy for visitors to find exactly what they need.
As a visitor types, the search returns suggested queries from Shopify with highlighted matching text. Clicking a suggestion refines the search instantly. This helps visitors discover related terms and correct misspellings.
The pre-defined suggestion phrases you enter in the block settings appear as clickable buttons in the default state. Visitors can tap any phrase to immediately run that search without typing a single character.
Before a visitor types, the overlay can showcase products from a collection you choose — perfect for highlighting trending items, seasonal picks, or new arrivals. Product cards include images, titles, and optional pricing and vendor information.
When a product is on sale and prices are enabled, the original price appears with a strikethrough alongside the discounted price. Products with a range of variant prices show the minimum and maximum price.
The search opens as a full-width overlay from the top of the page with a blurred backdrop behind it. This focuses the visitor's attention entirely on the search experience. Page scrolling is disabled while the overlay is open.
The search overlay can be closed by pressing the Escape key. The search input is automatically focused when the overlay opens, so visitors can start typing immediately without needing to click. All interactive elements are accessible via the keyboard.
On desktop, the search displays a multi-column layout with suggestions and secondary results on the left, and products on the right. On mobile, the layout switches to a single-column, full-screen experience with a sticky "View all results" button at the bottom.
If the primary search method is unavailable for any reason, the block automatically falls back to an alternative search approach to ensure visitors always get results.