Predictive search UX guidelines

• The predictive search API by default returns a maximum of ten results across all resource types, so consider tailoring responses to include a mix of resources. For example, a query that matches on both products and pages would return a maximum of ten matching resources across products and pages.
• Limit the overall number of suggestions to avoid overwhelming the user or taking up too much space on the screen. You can also adjust the number of suggestions to display depending on the context of where they appear. Different suggestions should be labeled uniquely or use distinct styling.

Include a close button, in the form of an icon or text, that leaves the search experience and closes the product suggestion dropdown. This action should not clear the query.

Include a search button, in the form of an icon or text, that takes the user to the search results page. This should also be able to be achieved by clicking enter on a keyboard, or "go"/"search" on a mobile keyboard.

The query should stay in the search field until the customer explicitly clears the query or navigates to a different page. The searched query should be also repeated on the search results page.

Hide the empty-state drop-down when there are no product suggestions that match the query. The lack of feedback from predictive search should encourage customers to continue their search from the results page.

• Focus the search field when tapping on the search icon to reduce the number of interactions required to use search.
• Make sure that scrolling within the display is not interfered with.

• Don’t hide information behind a scroll or use fixed height. Instead, ensure that the height of the dropdown adjusts to display all content.

Reduce search interface content and resource data to the minimum amount necessary to make selection meaningful. Using the API, you can control which elements are exposed or hidden, so you can adapt this to the needs of the merchant, however you should consider only exposing the following fields:

Query fields

• styled_text

• image
• product
• title
• price

• title

• title

• title

As you add query suggestions to your theme, we recommend to highlight the suggested portion instead of what the buyer types. For example, if the buyer types card and the query suggestion is cardigan, then present it as cardigan instead of cardigan. This makes it easier for buyers to scan the list of suggestions.

Only show a "Sold out" label for suggested products when the entire product is unavailable.

Use a heading to label product suggestions to help users anticipate the type of results they can expect. For example, use a "Products" heading for product suggestions.

Include a clear button, or text, in the search field to delete any query entered.

Display the search field, or at least the search icon, in the header of all pages. If search is a significant element of the overall experience you want to provide, then make sure that it’s displayed prominently.

For stores with only one product or a small number of products, the search field can be located within a hamburger menu.

As you design the overall predictive search dropdown, darken other parts of the page background while autocomplete is active to help buyers focus.

Display a link in the list of product suggestions to indicate that there might be more results on the search results page.

For example, the link could include the text "Search for [your query]", where [your query] is what the user has entered in the search field, or "View all results."