The Flex theme includes several options to add search functionality to your storefront—enable search for any of the Header layout styles, add a search field to the page sidebars throughout the theme (collection pages, blog, etc.), enhance a page with a search section, or apply a search-focused header style.
Header Styles and Search
Each of the header styles (Classic, Centered, Search Focus, and Vertical) feature a search option.
Classic
If you've chosen the Classic header style, you can enable search by heading into Customize > Header > Search > Show search. The search will appear as an icon in your main header area next to your cart icon.
Centered
If you've chosen the Centered header style, you can enable search by heading into Customize > Header > Search > Show search. The search will appear as an icon in the top bar next to your cart icon:
Vertical
If you've chosen the Vertical header style, you can enable search by either adding a search form content block (Customize > Header > Add content > Search form) to display a search field, and/or you can add a search icon. (Sections > Header > Add content > Icons > Show search icon).
Search focus
If you've chosen the Search focus header style, a full-width search bar will appear within the header.
Search Settings
Once you've either enabled search in the Classic, Centered, or Vertical header styles, or chosen the Search focus header, you can then check out the search settings under Theme Settings > Search.
The search settings will mostly impact the search feature in the classic, centered, and vertical header styles. The Search results and Placeholder text settings apply to each header style.
Search results
The search functionality in Shopify will allow you to either set your search results to display Products or Everything.
Heading and text
For both the overlay display style and the popup display style, you can enter a Heading and Placeholder text (that will display in the search input field). You can then select a color for your heading as well.
Display style
There are two options available for the Display style of your search: Popup and Overlay. If you are using the Classic or Centered header layout, you can select either of these.
If you are using the Vertical header style, only the popup display style can be used if you have enabled the search icon (in addition to or instead of the search box). The search icon can be added to the vertical header by going into Header > Add content > Icons > Show search icon.
In the Popup style, when you click the search icon in the header, a search box will pop up and the query will be entered.
In the Overlay style, when you click on the search icon, a search box will drop-down full width and overlay the top of your page.
Display styles do not apply to the search focus header
Background
If you've chosen the Popup display style, select a Background color for the popup itself here.
Menu
Add a Menu to both the overlay and popup display styles. Please note that the menu will not show dropdown items.
Overlay
Popup
Predictive Search
Predictive search allows search inquires to Auto-complete as a customer types them in. It is important to note that the predictive search will kick in After inputting 4 characters.
After 4 characters are added, the search will Show results and give you an option to View all search results that contain the characters in your query. Enabling the predictive search will update the search feature in the Header (popup and overlay styles as well as the search block in the Vertical header option), search blocks added to any sidebars, and the Search section block to use this functionality.
To activate the predictive search feature, open the search portion of the Theme settings to select Enable below Predictive search. Control the number of Items to display with the provided slider (between 2 and 10).
Popup search style with predictive search enabled
Overlay search style with predictive search enabled
Search focus header with predictive search enabled
Search form block in Vertical header with predictive search enabled
Search block in sidebar with predictive search enabled
Mobile Layout
When viewed on a mobile device, no matter which header layout style you've selected, the search feature will display as a search icon within the header.
If you have predictive search enabled, the function will remain on mobile and the list of search results will resize to fit your screen size:
