> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Search Result template & Quick Search

**Theme:** Blum · **Section type:** Template (Search) and Overlay section (Quick search)

Blum gives customers two ways to search. **Quick search** opens over the page when customers click the search icon and shows results as they type. The **Search** template is the full results page, with filters, sorting, and pages of results.

> **Note:** Quick search is a section in the **Overlay group**, so you set it up once for the whole store. It works only when **Enable Quick search** is turned on in **Theme settings** > **Search**.
![Search page with results, filters, and the sort menu](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/a5-s1_1fm53p3.png)

**What you can do**
- Turn on Quick search
- Set up Quick search results and suggestions
- Set up the Search page
- See what customers see
- Change the Quick search and Search page settings
- Fix common problems

---

## Turn on Quick search
1. In the theme editor, click **Theme settings** > **Search**.
2. Select **Enable Quick search**.
3. Click **Save**.

> **Note:** You choose what Shopify searches (for example product titles, tags, or vendors) in the Shopify **Search & Discovery** app, not in the theme editor.

## Set up Quick search results and suggestions
1. In the left sidebar, under **Overlay group**, click **Quick search**.
2. Under **Product results**, choose the **Card direction**, select **Show vendor** and **Show price**, and choose the items per row.
3. Under **Collection results**, choose the **Card direction**, select **Show product count**, and choose the items per row.
4. Under **Empty state**, select **Suggested links**, **Suggested products**, and **Suggested collections**, and enter a heading for each.
5. Click **Save**.

> **Tip:** Customers see the empty state as soon as they open search, before they type. Use it for your best-selling products or most popular categories.

| Setting | What it does |
| ---- | ---- |
| Card direction | Vertical shows the image above the details. Horizontal shows a small image beside the details. |

## Set up the Search page
1. In the theme editor, open the page selector at the top center and click **Search**.
2. In the left sidebar, click **Search page**.
3. Under **General**, select the **Items per page** and the **Load product methods**.
4. Under **Layout**, choose the card **Style** and the items per row.
5. Under **Filter**, select **Enable filter** and **Enable Sort**, and choose the **Filter and sort layout on large screen**.
6. Click **Save**.

## What customers see
- **Opening Quick search:** customers click the search icon in the header. A search panel opens over the page and shows your suggested links, products, and collections.
- **Typing:** results update as customers type. They're grouped as Suggestions (up to 5), Products (up to 10), Collections, Articles (up to 5), and Pages. Products and Articles have a **View all** link that opens the Search page with those results.
- **Closing:** customers close Quick search with **×**, by clicking outside the panel, or by pressing **Esc**.
- **Pressing Enter:** opens the Search page with all results for the search term.
- **Search page:** results include products, blog posts, and pages. Customers can filter and sort products, see the number of results, and search again from the search bar at the top.
- **Filters:** with **Vertical sidebar**, the filters appear in a column beside the results on large screens. With **Horizontal toolbar**, and on mobile, customers click **Filter** to open them in a drawer.
- **More results:** with **Pagination**, page numbers appear below the results. With **Infinite scrolling**, more results load as customers scroll.
![Quick search panel with suggestions and product results for a search term](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/a5-s2_1hreu0v.png)

## Settings reference
### Theme settings > Search
| Setting | What it does |
| ---- | ---- |
| Enable Quick search | Shows live results in the search panel as customers type. |

### Quick search: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the search panel. Edit the schemes in Theme settings > Colors. |

### Quick search: Product results
| Setting | What it does |
| ---- | ---- |
| Card direction | Shows product results Vertical (image on top) or Horizontal (image beside the details). |
| Show vendor | Shows the product vendor on product results. |
| Show price | Shows the price on product results. |
| Items per row on desktop | Shows 3, 4, or 5 products in each row on large screens. |
| Items per row on mobile | Shows 1 or 2 products in each row on mobile. |

### Quick search: Collection results
| Setting | What it does |
| ---- | ---- |
| Card direction | Shows collection results Vertical (image on top) or Horizontal (image beside the title). |
| Show product count | Shows the number of products on collection results. |
| Items per row on desktop | Shows 3, 4, or 5 collections in each row on large screens. |
| Items per row on mobile | Shows 1 or 2 collections in each row on mobile. |

### Quick search: Empty state
| Setting | What it does |
| ---- | ---- |
| Suggested links | Selects a menu whose links appear before customers type. |
| Suggested links heading | Sets the heading above the links. If you leave it empty, the menu title is used. Appears after you select a menu. |
| Suggested products | Selects products to show before customers type. |
| Suggested products heading | Sets the heading above the suggested products. Appears after you select products. |
| Suggested collections | Selects collections to show before customers type. |
| Suggested collections heading | Sets the heading above the suggested collections. Appears after you select collections. |

### Search page: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. |
| Items per page | Shows 12, 24, or 36 results on each page. |
| Load product methods | Shows page numbers (Pagination), or loads more results as customers scroll (Infinite scrolling). |

### Search page: Layout
| Setting | What it does |
| ---- | ---- |
| Style | Standard shows the product details below the image. Card shows them on the image, over a mask overlay. |
| Items per row on desktop | Shows 3, 4, 5, or 6 results in each row on large screens. |
| Items per row on mobile | Shows 1 or 2 results in each row on mobile. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Search page: Filter
| Setting | What it does |
| ---- | ---- |
| Enable filter | Shows the filters. Set up the filters in the Shopify Search & Discovery app. |
| Expand all filter options by default | Opens every filter group when the page loads. |
| Enable Sort | Shows the sort menu. |
| Filter and sort layout on large screen | Shows the filters in a Vertical sidebar beside the results, or in a Horizontal toolbar above them. |

Product cards on the Search page use Theme settings > Product card for vendor, badges, image ratio, and quick shop.

## Troubleshooting
**Nothing appears as customers type in the search panel.**
Turn on **Enable Quick search** in **Theme settings** > **Search**.

**The search icon does nothing.**
The **Quick search** section is hidden. In the left sidebar, under **Overlay group**, show the **Quick search** section.

**The vendor appears on the Search page but not in Quick search.**
Quick search has its own **Show vendor** and **Show price** settings under **Product results**. The Search page uses **Theme settings** > **Product card**.

**The filters don't appear on the Search page.**
Select **Enable filter** under **Filter**. Filters appear only when the search returns results, and you set them up in the Shopify **Search & Discovery** app.

## Related articles
- [Blum Header](https://doc.ecomx.co/en/article/blum-header-12ft7y5/)
- [Blum Product Card](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/)
- [Blum Collection template](https://doc.ecomx.co/en/article/blum-collection-template-1tog81y/)
- [Blum Theme Settings](https://doc.ecomx.co/en/article/blum-theme-settings-1esrmj4/)