> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/filter/search-widget/instant-search-widget-layout/customize-instant-search-layout.md).

# Customize instant search layout

✨The **Instant Search Widget** lets customers see live product suggestions as they type. With Smart Product Filter & Search, you can customize how this widget looks on your store.

* **Overlay fullwidth:**

<figure><img src="/files/tksoNAZo482i5FtEIMaY" alt=""><figcaption></figcaption></figure>

* **Dropdown one column:**

<figure><img src="/files/xzXlCXikOEcEM0WJIRo2" alt=""><figcaption></figcaption></figure>

* **Dropdown two columns**

<figure><img src="/files/9RBiXKBNbXUnNXFC0vZa" alt=""><figcaption></figcaption></figure>

***

### 🛠 How to Customize the Layout

1. **Open the App**\
   From your Shopify admin, go to **Apps** → **Smart Product Filter & Search**.
2. **Go to Instant Search Settings**\
   In the left sidebar, click **Search** → then scroll down to the **Instant Search Widget** tab.
3. **Choose preferred search widget layout**\
   Find the section called **Search widget layout** and choose one layout:

   * Overlay full width
   * Dropdown two columns
   * Dropdown one column<br>

   <figure><img src="/files/2NkCtFkt9qGZrsaJClXF" alt=""><figcaption></figcaption></figure>
4. Click **Save** to apply the changes.

***

### 🛠 Customize Layout Details (Optional)

1. You can configure the product list layout (Grid/carousel).
2. You can set:
   * The **maximum number of products** shown in the instant search widget.
   * Whether to **show product prices**, **product vendors**, etc.
3. After adjusting your settings, click **Save**.

***

### 💡 Tips

* Choose a layout that fits your brand and product range for the best customer experience.

***

### 💬 Need Help?

If you need assistance customizing your search layout, feel free to contact our support team:\
📧 **<contact@globo.io>**


---

# 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:

```
GET https://docs.globo.io/filter/search-widget/instant-search-widget-layout/customize-instant-search-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.