Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Search Feature Overview
Turbo's search feature includes the ability to add a search box within the header, enable predictive search, and add a search section to the homepage.
To enable the 'search feature' in your Header head into Customize > Header > Search > 'Show search'. On desktop view, the Search input will show up as a search box. On mobile, the search box gets minimized to a magnifying glass which users can then click on:
Within the Search Theme Settings (Customize > Theme Settings > Search) you can decide on the following:
- Have your search results display 'Products' or 'Everything'
- Pagination Type ('Page links', 'Load more results button', 'Infinite scroll') Read more about the Pagination options in our article here
- Enable 'Predictive search'
- Number of items to display for 'Predictive search'
Predictive Search
The '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 3 characters.
After 3 characters are inputted, the search will show results or give you an option to view all search results that contain the characters in your query. Enabling the predictive search will update both your Search box (located in your header) 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.
Homepage Search Section
To add in a 'search section' block on your Homepage, head into Customize > Sections > Add Section > Search: 
Section Settings
The section settings determine the look and layout of this section!
Within the Search Section, you can configure the following: Heading, Subheading, Text alignment, Placeholder text, and Background image:
Important to note: The same Search 'Theme Settings' apply to the 'Search Section' as well. Example: if you have 'Predictive Search' enabled, this will apply to the 'Search Section' as well:
Demo Shop Examples
While all of our Turbo demo shops have 'Search' enabled in the header, here's how we set up the 'Search' homepage section in each of them!
-
Portland
Section Settings:
Heading
Subheading
Text alignment: left
Placeholder text: 'Enter a keyword here'
Background image
-
Seoul
Section Settings:
Heading
Text alignment: left
Placeholder text: 'Enter a keyword or product name'
Background image
-
Florence
Section Settings:
Heading
Text alignment: center
Placeholder text: 'Find your next favourite piece'
Mobile Layout
When viewed on mobile, the 'search box' will turn into a 'search icon'. When clicked, a search input will appear below where customers can enter their search query! The homepage 'search section' will resize itself to fit within your mobile device's screen.
