> For the complete documentation index, see [llms.txt](https://vodoma-docs.boostheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vodoma-docs.boostheme.com/static-sections/collection-pages/old-collection-pages.md).

# Version 2.2.1 or older

{% hint style="info" %}
This guide only matches with version 2.2.1 or older. If you want are using version 3.0.0 or newer, please refer to [the new guide](/static-sections/collection-pages.md).
{% endhint %}

## 1. Open Collection pages section

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Collections > Default collection**.

![](/files/-MfrrxZGVqU-Nt72LZCW)

![](/files/-Mfrs0pFn6kTro3Onj07)

## 2. Section settings

To open section settings, click the section name on the left sidebar.

![](/files/-MfryLTwoSQ-6vj-6yqN)

* **Limit:** adjust the number of products per page. If you turn on the infinity loading feature, the **Limit** is the number of products per one loading time.
* **Show collection image:** show/hide the featured image of the collection.
* **Hide collection image in mobile screen:** not show the collection image on the mobile screen even **the Show collection image setting** is ticked.

## 3. Toolbar

![](/files/-MHMT2VLCt4RbVrcxIs9)

* **Enable toolbar:** show/hide the toolbar.
* **Enable sorting:** show/hide the sort select box.

## 4. Infinity loading products:

By default, the pagination with the numbers will be shown.

![](/files/-MHMVWTN3IfpmOZvdeCC)

If you turn on the infinity loading products feature, the pagination with numbers will be replaced by the load more button or infinity scrolling.

![The "Click load more button" checkbox is ticked](/files/-MHMVygWUPj4m7tUmdGQ)

![The "Scroll to load more button" checkbox is ticked](/files/-MHMY4o2hF8OoDvYIwuU)

## 5. Product item settings

Please refer to [this guide](/tips.md#product-item-settings) for more details.

## 6. Filter settings

![](/files/-MK8WYDh3_4vq6QVyN60)

* **Enable the filter sidebar**: turn on/off the filter sidebar.
* **Enable auto filter feature:** turn on/off the auto filter feature.

{% hint style="info" %}
The auto filter is a new feature that is only available from version 1.3.0. This feature will help you display the filter sidebar in more values without adding product tags for a hundred of products like the old method. Just specify the option name you want to show, all corresponding product option values will be shown.&#x20;
{% endhint %}

{% hint style="danger" %}
The auto filter feature can only use for a store that has less than 1000 products. If your store has more than 1000 products, it will be working incorrectly.&#x20;
{% endhint %}

Scroll down to the bottom, you will see an **Add content** button, click this button to add a new filter item. Or you can click one of the available filter items to edit/remove it and drag/drop items to rearrange them.

![](/files/-MHMaDlf3fIXqlhIzOSh)

Our theme provides 4 filter item types: "**Filter Item - Colors**", "**Filter Item - Checkboxes**", "**Filter Item - Price range**", and "**Categories**". Below are details of 4 filter item types:

### A. Categories

![](/files/-MHQBfx2_jpC0p7ySfEs)

* **Enable:** show/hide this item.
* **Get data from:**
  * **Shopify Navigation(link list):** use a link list to display as categories.
  * **The collection tree from the Boostheme Toolkit app:** choose this option if you want to display the collection tree. You can edit the collection tree by dragging & dropping easily. Please refer to [this guide](/shopify-apps/boostheme-toolkit-app.md#6-collection-tree) for more details.
* **Choose a link list:** pick a link list. Only work if the **"Get data from"** setting is configured to **"Shopify Navigation(link list)"**.
* **Expand/Collapse state:** set the default state of the filter item.

### B. Option - Colors format ( old name: **Filter Item - Colors )**

![](/files/-MHP3LHwy-mUl1BeIeNu)

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Color format:** specify to display the color swatches in square or circle.
* **Swatch size:** adjust the size of all colors.
* **Expand/Collapse state:** set the default state of the filter item.
* **Option name:** if you turn on **the** **Auto filter feature**, you need to add the product option name, something like "*Color*",... All values of this option name will be shown.

All colors in this filter item are configured in Theme settings > Product settings > Custom color codes. Please refer to [this guide](/theme-settings/product-settings.md#custom-color-codes) for more details.

### C. Price range ( old name: Filter Item - Price range )

![](/files/-MHP4rvZfs9AiyLOOoKY)

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Keys:** add your product tags. Each tag is separated by a comma. Ex: tag1, tag 2, tag 3, ... You should ignore this field if you turn on the Auto filter feature.
* **Expand/Collapse state:** set the default state of the filter item.

{% hint style="info" %}
**Note:** Always use "**$**" when typing your tags that contain price. The theme will convert all prices to the currency users are viewing.
{% endhint %}

### D. Option - Checkbox format ( old name: Filter Item - Checkboxes )

![](/files/-MHQDJk53eRVhY9C5jUy)

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Keys:** add your product tags. Each tag is separated by a comma. Ex: tag1, tag 2, tag 3, ... You should ignore this field if you turn on the Auto filter feature.
* **Expand/Collapse state:** set the default state of the filter item.
* **Option name:** if you turn on **the Auto filter feature**, you need to add the product option name, something like "*Size*",... All values of this option name will be shown.

### E. Product type

Show all types of all products in the current collection or search result.

{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.

### F. Brand ( Vendor )

Show all vendors of all products in the current collection or search result.

{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.

### G. Metafields

Just specify the namespace and key, the filter block will show all meta field values of all products in the current collection or search result.

{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}

#### General settings

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.

#### Meta field settings

* **Namespace:** add your meta field namespace.
* **Key:** add your meta field key.
* **Type:** let the filter block know the type of your meta field value.

### H. Average rating

Show the rating levels.

{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}

* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.
* **The minimum rating to show:** adjust the min level to show.
