# Collection body
On this section (located on the Collection page) customers can see products from the collection. Customers can use filters to show the products they are looking for.
## **Adding a Section**
The section is static on the **collection page** template, it was added initially and cannot be removed.
## **Section settings**
### General
1. **`Filters type`** - setting allows choosing the view of filters: “Sidebar” or “Horizontal”. Setting works only for desktop resolution. On the mobile filters will be always in the “Drawer” view;
2. **`Show grid buttons`** - the setting displays a certain number of cards per page. The minimum number is 12, the maximum number is 50;
3. **`Show color swatch in filters`** - if checked, the filter group with name, specified in the Theme settings / Product / Swatch option ("Color" by default) will show a checkbox like color swatch;
4.
```
```
5. **`Disble lazy-load`**- the setting is responsible for disabling lazy-load for the first two products. Use this if you hide the collection image banner;
6. **`Paginate by`** - the setting is responsible for displaying a certain number of cards per page. The minimum number is **12**, the maximum number is **50**;
7. **`Pagination type`** - the setting is responsible for the type of loading of product cards. Can be “Pagination”, “Load more”, or “Infinity scrolling”.
### **Blocks settings**
### Layout
1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.
### General
1. **`Image`** - the setting is responsible for the banner image;
2. **`Heading`** - the setting is responsible for the banner heading;
3. **`Button label`** - the setting is responsible for the banner button label;
4. **`Button link`** - the setting is responsible for the banner button url.
## **Colors**
1. **`Background`** - the setting is responsible for the banner background color;
2. **`Text`** - the setting is responsible for the banner text color;
3. **`Button label`** - the setting is responsible for the banner label color;
4. **`Button background`** - the setting is responsible for the banner button background color;
5. **`Button border`** - the setting is responsible for the banner button border color;
6. **`Button label (hover)`** - the setting is responsible for the banner button label color on hover;
7. **`Button background (hover)`** - the setting is responsible for the banner button background on hover;
8. **`Button border (hover)`** - the setting is responsible for the banner button border color on hover.
## **Additional information**
1. Shopify Filtering Tutorial:
%20(1).png)
%20(1).png)
.png)
.png)
.png)
.png)
.png)