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. 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 1.0 release of Flex does not include predictive search, however, this will be added in an update to the theme.
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:
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.
The search functionality in Shopify will allow you to either set your search results to display products or everything.
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.
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.
If you've chosen the popup display style, you can select a background color for the popup itself here.
A menu can be added to both the overlay and popup display styles. Please note that the menu will not show drop-down items.
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.