Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Search Feature
The Flex theme includes a couple different ways to include search functionality in your shop! Search can be enabled in all of Header layout styles included in the theme. A search block can also be included in sidebars throughout the theme (collection pages, blog etc.) Additionally, Flex includes a search focus header style that features a search-centric navigation bar.
When the search functionality is activated in your shop, you can select the display style to either be an overlay display style or popup display style. However, the display styles will not apply to the search focus header style as it features it's own specific layout for search functionality.
The Flex theme also includes predictive search that you can choose to enable in your shop. Once enabled, the predictive search will apply to all the search features throughout your site!
How Search appears in each Header style
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:
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:
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).
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. However, the 'search results' and 'placeholder text' will apply to all header styles.
Search Results
The search functionality in Shopify will allow you to either set your search results to display products or everything.
Heading/Text/Heading Color
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.
Please note, the placeholder text will apply to the search focus header style, but the 'heading' will not.
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 Sections > 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, you can select a background color for the popup itself here.
Menu
A menu can be added to both the overlay and popup display styles. Please note that the menu will not show drop-down 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 inputted, 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 enable the 'predictive search' head into Customize > Theme Settings > Search > under 'Predictive Search' click 'Enable'. You can also choose the number of 'items to display' here as well. You can choose between 2 and 10.
Examples of Predictive Search
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:
