> 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/change-product-list-style.md).

# Change product list style

✨The **instant search widget** shows a product list as soon as customers start typing in the search bar. You can customize how this list looks - either as a **grid** or a **list** layout.

📍Example of a grid style:

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

***

### ✅ Steps to Change the Style

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

   <figure><img src="/files/lF8kIzE0b8PjEyqnRjHZ" alt=""><figcaption></figcaption></figure>
4. **Choose product list style**
   * Find the section called **Search Results:**
   * Choose your preferred style:
     * **Grid View** – products appear in rows and columns (like on collection pages).
     * **Carousel View** – products appear in a slider.

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

5. **Click Save**\
   After selecting your layout, click the **Save** button to apply changes.

***

### 💡 Tip

* The **Grid View** is ideal if your products have large images and you want a clean, modern look.
* The **List View** works well if you want to show more text details, like price or description.

***

### 💬 Need Help?

If you're not sure which layout works best for your store, or if you’re not seeing changes after saving, feel free to contact us at **<contact@globo.io>** - we're happy to help!


---

# 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/change-product-list-style.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.