The Search drawer section adds a slide-out search panel to your storefront. Customers can open it from the header search icon or from the Search item in the Mobile Dock.
In Concept, the Search drawer can work as a regular search form or as a predictive search drawer, depending on your global search settings.
How to Set Up the Search Drawer in Concept
Steps:
Add or check the Search drawer section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
In the theme editor sidebar, open the Overlay group.
-
Look for the Search drawer section.
-
If the section is missing, check again if the section Search drawer is disable?
-
Click Save.
The Search drawer itself does not include many direct section settings. Most search behavior is controlled from Theme settings > Search.
Enable search in Theme settings
-
In the theme editor, click the Theme settings icon.
-
Open Search.
-
Enable Search.
-
Select Drawer.
-
Click Save.
When this setting is enabled, the search icon can appear in the header and the Search drawer can be opened from supported triggers.
If this setting is disabled, the Search drawer will not render on the storefront.
Configure predictive search
-
In Theme settings > Search, enable Predictive search if you want live results to appear while customers type.
-
Adjust Predictive search limit to control how many product results can appear.
-
Enable Show vendor if you want product vendors to appear in predictive product results.
-
Enable Show price if you want product prices to appear in predictive product results.
-
Click Save.
When predictive search is enabled, the drawer can show matching products, suggestions, articles, collections, and pages as customers type.
When predictive search is disabled, customers can still enter a search term and submit the form to the search results page.
Add recommended search links
-
In Theme settings > Search, find the Predictive search recommendation setting.
-
Select a menu that contains the links you want to show before customers type a search term.
-
Click Save.
Recommended search links are useful for highlighting popular searches, collections, support pages, or buying guides.
The selected menu can include simple links or nested menu items.
Configure the typewriter effect
-
In Theme settings > Search, enable Typewriter effect if you want animated placeholder text in the search field.
-
Add the starter text in Typewriter starter text.
-
Click Save.
The typewriter effect appears inside the search input area before customers start typing.
This effect is optional and only applies when predictive search is enabled.
Open the Search drawer from the header
-
Open the Header section in the theme editor.
-
Make sure search is enabled in Theme settings > Search.
-
Preview the storefront and click the search icon in the header.
-
The Search drawer should open from the side of the screen.
The header search icon is connected to the Search drawer automatically when the Search drawer section is available and search is enabled.
Open the Search drawer from the Mobile Dock
-
Open the Mobile dock section in the Overlay group.
-
Add or edit the Search block.
-
Set a short title, such as
Search. -
Click Save.
On mobile, customers can tap the Search item in the dock to open the Search drawer.
Search drawer behavior
- The drawer opens as an overlay panel.
- Customers can close it by clicking the close button or overlay area.
- The search field submits to the Shopify search results page.
- Predictive search results appear only when predictive search is enabled.
- Recommended links appear when a recommendation menu is selected.
- Product results can show vendor and price depending on the search settings.
- The drawer uses the same search logic as Shopify storefront search.
Troubleshooting
If the Search drawer does not open, make sure the Search drawer section exists in the Overlay group.
If the search icon does not appear, make sure Search is enabled in Theme settings > Search.
If predictive results do not appear, make sure Predictive search is enabled.
If recommended links do not appear, make sure a menu is selected in Predictive search recommendation and that the menu has links.
If product prices or vendors are missing, check the Show price and Show vendor settings in Theme settings > Search.
If the Search item in the Mobile Dock does not open the drawer, make sure both the Mobile dock section and Search drawer section are enabled in the Overlay group.
If search results seem incomplete, check your Shopify products, pages, articles, and collection visibility settings.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Featured Collection Section in Concept
How to Configure 3 Search Types in Concept