Search modal
Open a full search window from anywhere on your store, with live results, quick links, popular searches and recently viewed products.
The Search modal section is the search window that opens when shoppers click the search icon in the header or the mobile dock. Before they type, it shows quick links, popular searches, featured products, their recent searches and recently viewed products. As they type, it shows matching products, collections, pages, articles and search suggestions. It lives in the Overlay group, so one Search modal serves every page of your store.
1. Our guide to set up a Search modal section:
2. Section settings
Color scheme: Color scheme of the search window: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
Layout
Position: Where the window opens on the screen: Top / Center.
Width: Maximum width of the window, 56–96rem.
Backdrop opacity: How much the page behind the window is darkened, 0–80%.
Corner radius: Roundness of the window corners, 0–32px.
Blur page behind modal: Blurs the page behind the window.
Show icons next to links: Shows an icon beside each quick link and popular search.
Search input
Placeholder: Text shown in the empty search field.
Open with ⌘K / Ctrl+K: Lets shoppers open the search window with the keyboard shortcut.
Show keyboard hints in footer: Shows navigation hints (↑ ↓ to navigate, ↵ to select, esc to close) at the bottom of the window. Desktop only.
Quick links
Heading: Title shown above the Quick link blocks.
Results
Show results while typing: Shows live results as shoppers type. When off, shoppers press Enter to go to the search results page.
Show suggestions: Shows suggested search terms.
Show products: Shows matching products.
Sold-out products: How sold-out products appear in results: Show last / Show / Hide.
Products to show: Maximum number of products in results, 2–8. Only shown when Show products is on.
Show collections: Shows matching collections.
Show pages: Shows matching pages.
Show articles: Shows matching blog articles.
Results to show: Maximum number of collections, pages and articles shown in each group, 2–6.
Product card
Show image: Shows the product image in product rows.
Show price: Shows the product price in product rows.
Show vendor: Shows the product vendor in product rows.
Recent searches
Show recent searches: Shows the shopper's own recent searches, with a Clear button. Saved in the shopper's browser.
Number to show: 3–8. Only shown when Show recent searches is on.
Recently viewed products
Show recently viewed products: Shows products the shopper recently viewed. Saved in the shopper's browser.
Number to show: 2–6. Only shown when Show recently viewed products is on.
3. Quick link block settings
Quick links appear at the top of the window before the shopper types. You can add up to 6.
Icon: Star / Heart / Shopping bag / Store / Truck / Percent / Price tag / Sun / Snowflake / Timer / Globe / User.
Label: Text of the link.
Link: Where the link goes.
4. Popular searches block settings
You can add 1 Popular searches block. Clicking a term runs that search.
Heading: Title shown above the terms.
Search terms: The terms to suggest, separated with commas.
5. Featured products block settings
You can add 1 Featured products block. The products appear before the shopper types.
Heading: Title shown above the products.
Products: Up to 4 products.
6. Tips
Reorder the Popular searches and Featured products blocks to change the order they appear in. Quick links always appear first; recently viewed products and recent searches appear last.
Use Quick links for your most visited pages, such as New arrivals, Sale or Shipping info.
Recent searches and recently viewed products only appear once a shopper has searched or viewed products on your store.
If you remove the Search modal section, the search icon takes shoppers straight to the search results page instead.