> 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>**