Predictive search (block)

We’ve re-imagined what you should expect from a “default” Shopify search.

Company XYZ's predictive search block was built from the ground-up to use Shopify’s powerful "instant" search API. Use our predictive search block to maximize your store's conversion, without the need for expensive/bloated search apps!

Settings

Placeholder text

The placeholder text setting will update the "default" text that is shown within the search field. This setting is not required; if nothing is added here, the field's placeholder text will automatically default to "Enter your search terms".

Button text

The button textsetting will update the text within the search field's call-to-action button ("CTA"). This setting is not required; if nothing is added here, the button's text will automatically default to "Search".

Center menu

The center menu setting will display thumbnails of the items within the menu in the main/center column of the predictive search window. These menu items will display when the predictive search window is opened or inactive; they will be replaced by the actual search results once the user enters their initial search terms.

To create a new menu for this setting, navigate to your site's Online Store > Navigation settings, and create a new menu.

Additional notes

  1. The menu's title will be displayed as the menu header within your predicitive search window, so make the menu title something descriptive and juicy, like "Trending searches".

  2. Only the top-level items in your menu will be displayed. It will not display any hierarchy (or "nesting") within your menu.

  3. We recommend setting this menu to 6 items, though you may chose to include more; users will be able to scroll within the window to view additional items.

  4. You can use any combination of products, collections, pages, or posts within this menu — this center menu will attempt to use the content's thumbnail.

Side menu

The side menu setting will display a simple list of menu items within left column of the predictive search window. These menu items will display when the predictive search window is opened or inactive; they will be replaced by the actual search results once the user enters their initial search terms.

To create a new menu for this setting, navigate to your site'sOnline Store > Navigation settings, and create a new menu.

Additional notes

  1. The side menu will display the first two levels of hierarchy (or "nesting") within your menu.

  2. The first level items are used as "headers" to enable separation of menu categories or types.

  3. This is a great way to feature different types of featured or important products or content — this will give users a nice visual hierarchy they can quickly scan.

  4. We recommend separating your menu into three groups: one for your popular products, one for popular collections, and one popular posts in this menu

  5. We recommend setting this menu to a maximum of 9 total items, though you may chose to include more; users will be able toscroll within the window to view additional items.

  6. You can use any combination ofproducts, collections, pages,orpostswithin this menu — this center menu will attempt to use the content's thumbnail.

Banner settings

You can display a custom banner in your Predictive search window. This is great for featuring a sale, popular product, or any other type of promotion.

Read more about available Banner settingshere.

Align theme