# Collection and Search page

{% hint style="info" %}
**Theme settings -> Collection Page**
{% endhint %}

**Video Manual**

* [<mark style="color:blue;">How to configure a Sidebar</mark>](https://www.youtube.com/watch?v=DAAqU5rHx1Q\&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df\&index=15)

## Sidebar

### Sidebar visibility

&#x20;Here you can change the visibility of the sidebar. There are 3 options available for configurations:

1. **Desktop and mobile**

   If you choose this option, the sidebar will be shown both on the desktop and mobile versions of a page.
2. **Only desktop**

   If you choose this option, the sidebar will be shown only on the desktop version of the page.
3. **Hide**

   If you choose this option, the sidebar will be hidden both in the desktop and mobile versions of the page, and the sidebar position will be irrelevant:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf85DXcJlDyhOHqPbLQ%2F-Mf88LoVjCfhORdMSWPq%2FScreenshot_4.png?alt=media\&token=2ed71df2-cbab-4edb-8a5c-714159799f06)

### Sidebar position on desktop

&#x20;Here you can change the sidebar position to the left or right side of the page, or choose a dropdown. If you select the **“Popup & 'Filter' button”** option, the button with a slide-out filters popup will be shown.

{% hint style="warning" %}
**Please note,** if you enable the option **“Top & vertical filters”**, additional blocks such as [<mark style="color:blue;">**Products**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content/products), [<mark style="color:blue;">**Custom HTML**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content/custom-html), [<mark style="color:blue;">**Subscription**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content/subscription)**,** and [<mark style="color:blue;">**Promo box (Banner)**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content/promo-box-banner) will be hidden in the desktop mode and available only in mobile mode.
{% endhint %}

&#x20;Let's see some examples of how it might look:

{% tabs %}
{% tab title="Left" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf85DXcJlDyhOHqPbLQ%2F-Mf867xp2RSlPSDV7rzN%2FScreenshot_1.png?alt=media\&token=11ce5a60-caf8-4533-a878-106ba8734b8e)
{% endtab %}

{% tab title="Right" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf85DXcJlDyhOHqPbLQ%2F-Mf87Khw7KhEL2wLjPrR%2FScreenshot_2.png?alt=media\&token=6e732a42-8168-4140-a8e8-b0a936dc90d9)
{% endtab %}

{% tab title="Top & vertical filters" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FyCEkXezpxdvu3v25ZSh7%2Ftop%26vertical%20filters.png?alt=media\&token=a23bcf55-fdf3-49e9-af02-24e1a01cd7c2)

{% endtab %}

{% tab title="Popup & 'Filter' button" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf85DXcJlDyhOHqPbLQ%2F-Mf87dDayU0p-b_3mBFT%2FScreenshot_3.png?alt=media\&token=c34fe015-2312-4652-920c-c579651473c8)
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Please note**, that no matter what type of sidebar visibility you choose: right, left, or a dropdown, filters will be displayed in the slide-out popup on mobile by default!
{% endhint %}

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf88Ncbu2IcGGSNrqmb%2F-Mf8Akas6tTaWWPo2T7h%2FScreenshot_5.png?alt=media\&token=6033a446-35db-493d-9ffd-1e8f865fe8f1)

### Enable sticky sidebar

&#x20;This option enables you to fix a sidebar while scrolling down the page.

## Other

### Show filter result on the fly without page reloading (AJAX)

&#x20;Deactivate this option if you need to disable AJAX product loading. It may be reasonable for apps that reject AJAX product loading.

{% hint style="warning" %}
**IMPORTANT!** Works only with “Classic” or “Centered classic” pagination!&#x20;

Disable the option if you want to use “Button 'Load More'” or “Infinite scroll”**.**
{% endhint %}

&#x20;How to configure the Pagination type, you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/layout#pagination-type).