When a customer clicks the search icon in the header, Checkmate opens a search field with suggestions. Before they type, it can show quick search tags, a row of products and links you choose. Once they type two letters, results replace those: a row of matching collections, blog posts and pages, and a grid of matching products.
On phones and tablets, Search in the bar at the bottom of the screen opens the same search. The search icon in the header shows when Search icon is on in the Header section, as it is by default.
Turn on the result types you want: Include suggested searches, Include collections, Include blog posts and Include pages.
Click Save.
With Show results while typing on, results show up to 4 collections, 4 blog posts and 4 pages in one row, and up to 10 products in a grid under it with a View all results link. Products always show. With it off, the field shows no results, and pressing Enter opens the search results page. The result type settings show only when Show results while typing is on. With Include suggested searches on, the field shows the rest of the first suggested search after what the customer typed, and the right arrow key fills it in.
Choose a panel or a drawer
Search style in the Header section decides how search opens.
Panel, the default, opens under the header with the page still in view. It shows the quick search tags and the product row, and its results show products in a grid.
Drawer opens from the right edge of the screen, over the page, with a Search title. It shows the quick search tags and the links at the bottom, but no product row. Its results show each product as a row.
In the editor sidebar, under Header, select Header.
Under Search style, select Panel or Drawer.
Optional. In Search field placeholder, enter the gray hint that shows in the empty field, such as Search coffee, mugs, gifts....
Click Save.
Add quick search tags
Quick search tags are short words under the search field, such as Espresso or Decaf. Clicking one opens the search results page for that word. The search results page takes its own tags and row of products, which show while it has no results, as the Search section describes.
In the editor sidebar, under Header, select Header.
Under the Header section, click Add block and select Product carousel.
Under Collection, select the collection whose products show. With no collection, the row is hidden.
Optional. Change Heading, Maximum products (2 to 10, 6 by default) and Show product actions, which shows the quick view and add to cart buttons on each card.
Click Save.
Add links to the drawer
The Search drawer link block adds a link with an icon at the bottom of the search drawer, such as a link to your bestsellers. It shows with the Drawer style only.
When a customer clicks the search icon in the header, Checkmate opens a search field with suggestions. Before they type, it can show quick search tags, a row of products and links you choose. Once they type two letters, results replace those: a row of matching collections, blog posts and pages, and a grid of matching products.
On phones and tablets, Search in the bar at the bottom of the screen opens the same search. The search icon in the header shows when Search icon is on in the Header section, as it is by default.
Choose what shows while customers type
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, click Theme settings.
Select Search.
Turn Show results while typing on or off.
Turn on the result types you want: Include suggested searches, Include collections, Include blog posts and Include pages.
Click Save.
With Show results while typing on, results show up to 4 collections, 4 blog posts and 4 pages in one row, and up to 10 products in a grid under it with a View all results link. Products always show. With it off, the field shows no results, and pressing Enter opens the search results page. The result type settings show only when Show results while typing is on. With Include suggested searches on, the field shows the rest of the first suggested search after what the customer typed, and the right arrow key fills it in.
Choose a panel or a drawer
Search style in the Header section decides how search opens.
Panel, the default, opens under the header with the page still in view. It shows the quick search tags and the product row, and its results show products in a grid.
Drawer opens from the right edge of the screen, over the page, with a Search title. It shows the quick search tags and the links at the bottom, but no product row. Its results show each product as a row.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, select Header.
Under Search style, select Panel or Drawer.
Optional. In Search field placeholder, enter the gray hint that shows in the empty field, such as
Search coffee, mugs, gifts....Click Save.
Add quick search tags
Quick search tags are short words under the search field, such as Espresso or Decaf. Clicking one opens the search results page for that word. The search results page takes its own tags and row of products, which show while it has no results, as the Search section describes.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, select Header.
Under the Header section, click Add block and select Quick search tag.
In Label, enter the word customers see.
Optional. In Search term, enter the words to search for, if they differ from the label. Leave it empty to search for the label.
Click Save.
Add a row of products to the panel
The Product carousel block shows a row of product cards under the tags, with the Panel style only. The header takes one.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, select Header.
Under the Header section, click Add block and select Product carousel.
Under Collection, select the collection whose products show. With no collection, the row is hidden.
Optional. Change Heading, Maximum products (2 to 10, 6 by default) and Show product actions, which shows the quick view and add to cart buttons on each card.
Click Save.
Add links to the drawer
The Search drawer link block adds a link with an icon at the bottom of the search drawer, such as a link to your bestsellers. It shows with the Drawer style only.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, select Header.
Under the Header section, click Add block and select Search drawer link.
Enter the Label and the Link.
Under Icon, select an icon, such as Bag or Truck.
Click Save.
Search settings and the Header section describe each setting. To change the search results page itself, see Search section.