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: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters