# Version tf-3.5 or older

## 1. Open Collection pages section <a href="#id-1-open-collection-pages-section" id="id-1-open-collection-pages-section"></a>

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 **Collection pages**.
4. Click **Collection pages**.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKdEpzF5g3R9f1awfuc%2F-MKdGqTzlSA6pHNRaKd-%2Fcollection-page.jpg?alt=media\&token=44c30c55-c994-43d2-9339-267096d8a916)

## 2. General settings <a href="#id-2-general-settings" id="id-2-general-settings"></a>

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

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHMOzZ0MFDLUCo53mYv%2F-MHMT2VLCt4RbVrcxIs9%2Fcollection-pages-toolbar.jpeg?alt=media\&token=0345b19e-da90-42db-b4cc-bc78dcc55fc8)

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

## 4. Infinity loading products: <a href="#id-4-infinity-loading-products" id="id-4-infinity-loading-products"></a>

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

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHMOzZ0MFDLUCo53mYv%2F-MHMVWTN3IfpmOZvdeCC%2Fcollection-pages-pagination.jpeg?alt=media\&token=5dbf5d0d-c4ae-4dac-b85f-d8357b239f3e)

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

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHMOzZ0MFDLUCo53mYv%2F-MHMVygWUPj4m7tUmdGQ%2Fcollection-pages-infinit.jpeg?alt=media\&token=3fa73b53-536e-49c1-8ad6-b4bdc661824b)

The "Click load more button" checkbox is ticked

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHMOzZ0MFDLUCo53mYv%2F-MHMY4o2hF8OoDvYIwuU%2Fcollection-pages-infinite-scrolling.jpeg?alt=media\&token=902b8e93-c588-4803-b389-d2c0ed0d89e0)

The "Scroll to load more button" checkbox is ticked

## 5. Product item settings <a href="#id-5-product-item-settings" id="id-5-product-item-settings"></a>

Please refer to [this guide](https://beloria-docs.boostheme.com/tips#product-item-settings) for more details.

## 6. Filter settings <a href="#id-6-filter-settings" id="id-6-filter-settings"></a>

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn9VdTZdMTEoEhpW7V%2F-MKnAhLvQTvyQPdfO7Ij%2Ffilter-collections.jpg?alt=media\&token=815a1f10-40a9-47cc-a09a-3faf27e89dbe)

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

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnApvJlyi5smTqcPro%2F-MKnCSTismsN4cFam1UF%2Fadd-content-filter-collection.jpg?alt=media\&token=94f40abe-f2a2-4f8e-8cb3-8e1b9119a3ce)

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 <a href="#a-categories" id="a-categories"></a>

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnD433llvXy9qrUc5M%2F-MKnDYuiaorodR5lpKan%2Fcategory-colletion.jpg?alt=media\&token=501f4a75-ca5c-4c58-9f28-a303f86628c5)

* **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](https://beloria-docs.boostheme.com/shopify-apps/boostheme-toolkit-app#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 )** <a href="#b-filter-item-colors" id="b-filter-item-colors"></a>

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHOzZoPHasahI3LAyyF%2F-MHP3LHwy-mUl1BeIeNu%2Fcollection-pages-filter-colors.jpeg?alt=media\&token=c7691332-a5f2-412c-805c-86381a2d5349)

* **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](https://beloria-docs.boostheme.com/theme-settings/product-settings#custom-color-codes) for more details.

### C. Price range ( old name: Filter Item - Price range ) <a href="#c-filter-item-price-range" id="c-filter-item-price-range"></a>

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHOzZoPHasahI3LAyyF%2F-MHP4rvZfs9AiyLOOoKY%2Fcollection-pages-filter-price.jpeg?alt=media\&token=f33bf5d2-86d4-4598-b4af-a0cc3a2ce840)

* **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 ) <a href="#d-filter-item-checkboxes" id="d-filter-item-checkboxes"></a>

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHQDBfxEmg8AFA5oUhN%2F-MHQDJk53eRVhY9C5jUy%2Fcollection-pages-filter-checkboxes.jpeg?alt=media\&token=52d8fd4c-d280-4057-a5ab-314e403a822b)

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