Search input
Use the options from the following section to predict and show the items in the drop-down for a user's search query placed in the search bar.
Product suggestions
Enable search
Activate the option to display the search icon or search bar in the Header.
Tip: The header type you chose in Theme settings -> Layout determines the position of the magnifying glass icon for the search bar. It will be displayed either to the left or right of the Logo on desktop view.
The menu type of the Icons menu determines whether to display the search icon or search bar in the Header. To change the menu type, navigate to the Header -> Icons menu.
Use one of the options in the "Position on mobile devices" picker to change the Search appearance on mobile. If you select the "Header" option, the Search bar will appear beneath the Header. Activating the "Drawer" option will replace it within the menu popup, accessible at the top by pressing the menu button.
Change the Search bar appearance from the "Default input" to "Clear style" using the "Style on desktop devices" picker.
Note! The described option will not work for the "Popup" menu type. The menu type can be utilized in the Header -> Icons menu.
The design of each option can be viewed below:
Enable product suggestions
This option should be enabled to showcase the list of available products in the popup below the search box by entering a search term into the search input field. The product suggestions work on both desktop and mobile devices.
Show vendor
To display a product vendor above the product title in the popup, enable the option.
Show price
Tick the checkbox to display the product price.
In the following examples, you can view how the settings might display on desktop and mobile:
Categories
Ensure to use the Icons menu with the "Popup" menu type in the "Header" section to operate the following functionality.
The "All categories" search drop-down can be helpful in terms of searching for the desired product within the selected product category.
Enable categories select
Activate the option to display the " All categories" button next to the Search bar.
In the "Category" picker, decide whether to assign the suggested category to the product type or vendor.
The list of the predefined product categories can be set using the "Filters" input field. Set the list of categories using commas.
Example: FusionGlobe, HorizonX, NexusWorks, QuantumTech, StellarTech, TechSphere.
How to edit the text of the button?
Tip: The text of the "All categories" button can be edited in your Shopify admin -> Edit default theme content -> Theme content.
Press the dotted [...] button in the top left corner to navigate to Theme content:
Then, choose the tab "General" and scroll down to the search settings:
Last updated
