> 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/filter-sidebar/change-filter-tree-style.md).

# Change filter tree style

✨Want your filter sidebar to look more on-brand or visually appealing?\
You can customize the **Filter Tree Style** in just a few clicks using the settings in the **Smart Product Filter & Search** app.

For example:

* Vertical (Click [here ](https://demo-smart-product-filter-1.myshopify.com/collections/all)for a demo).

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

* Horizontal (Click [here](https://demo-smart-product-filter-2.myshopify.com/collections/all) for a demo).

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

* Off-canvas (Click [here](https://demo-smart-product-filter-3.myshopify.com/collections/all) for a demo).<br>

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

### ✅ Step-by-Step: Change Filter Tree Style

1. From your Shopify admin, go to the **Smart Product Filter & Search** app.
2. Navigate to **Filter > Filter Tree**
3. Under the **Filter Layout** section, choose a suitable filter sidebar layout with your Shopify store.\
   🖱️ Click on a style to preview it instantly.
4. After selecting a style, scroll up and click **Save** to apply it to your store.

<figure><img src="/files/8CYSprRTHWdB5pZj1dg9" alt=""><figcaption></figcaption></figure>

### 💬 Need Help?

If you have any questions or need support customizing the filter layout,\
just email us at: **📩 <contact@globo.io>**