> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/search.md).
# Search
**Search** lets shoppers find products from anywhere in your store without leaving the page they are on. When it is activated, a search bar appears in an overlay or drawer, and results update as the shopper types. Alongside live results, the overlay can show product recommendations, so shoppers discover popular or related items even before they finish typing a query.
The layout is optimized for both desktop and mobile, so the experience stays consistent across devices. Search is a global section: it is reachable from the search icon in the header on every page.
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the **Header** section and turn on **Show search icon** so shoppers can reach the overlay.
3. In the left sidebar, open the **Overlay** group and click **Search**.
4. Click the search icon in the preview to open the overlay and check it.
{% endhint %}
*Result:* clicking the search icon opens the search overlay on top of the current page.
### Section setting
| Setting | Description |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type** | Choose how the search interface opens. **Popup** displays search in a centered overlay, while **Drawer** slides in from the side of the screen. |
| **Popular search** | Add commonly searched keywords to help shoppers start searching more quickly. Separate each keyword with a comma. |
| **Products recommendation** | Select products to display before the shopper enters a search term. Use this area to highlight popular, seasonal, or featured products. |
| **Show product price** | Displays the product price in the recommended products area and search results. |
| Setting | Description |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Search placeholder** | Sets the placeholder text shown inside the search field before the shopper begins typing. |
| **Enable quick shop** | Lets shoppers add a product to the cart or select product options directly from the search results without opening the product page. |
| **Enable color swatches** | Displays available color options as swatches on product cards when color option data is available. |
| **Show rate** | Displays the product rating when rating data is provided by a compatible review app or product rating metafield. |
| **Show secondary image** | Shows the product’s second image when the shopper hovers over the product card. |
| **Image ratio** | Controls the shape of product images in the search results. Choose a fixed ratio or use **Adapt to image** to preserve the original image proportions. |
| Setting | Description |
| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Play video on hover** | Plays the product video when the shopper hovers over the product card. This setting works with supported video formats such as MP4. |
| **Show quick add button on mobile** | Displays the quick add button on mobile devices so shoppers can add products directly from the search results. |
| **Enable image lazy loading** | Delays loading product images until they are close to entering the screen, helping reduce the initial page load. |
| **Scroll animation** | Applies an entrance animation to product cards as they come into view while the shopper scrolls. |
| **Show currency codes** | Displays the currency code beside product prices, such as **USD**, **EUR**, or **GBP**. |
| **Show badge** | Displays available product badges, such as sale, sold out, new, or custom badges, on product cards. |
### What changes on the storefront
* Shoppers stay on the page they were browsing. The overlay closes and returns them there.
* Results appear while typing, so shoppers can reach a product in a few keystrokes instead of browsing the menu.
### Related pages
* [Overlay group](/velare/customize-your-pages/overlay-group.md): the other panels and popups
* [Header](/velare/set-up-your-store/header-group/header.md): the **Show search icon** setting that opens this overlay
* [Search behavior](/velare/customize-your-pages/search-behavior.md): what the store searches and returns
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/search.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.