# Collection Page {% embed url="" %} ## Collection image To set up a collection image section: * Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section. * Select **Collections** > **Default collection**.

## From the side panel, select the Collection banner block.

Settings	Description
Default collection image	Use "Default collection image" to add the image to the section.
Show collection image	Enabling this checkbox will allow you to display the added image in the collection.
Show collection description	Enabling this checkbox will allow you to display the added description in the collection.
Layout	Customization of the "Layout" in the Collection banner is as follows: Column Overlay
Color	Modifying the color setting you can change the background and foreground colors of a Banner.

To display various images in the all collection, you can add images through the metafield. Please follow these guidelines : [Collection banner metafield](https://webibazaar.gitbook.io/cello-documentation/collection-page/collection-banner) *** ## Product Grid

Settings	Description
Products per page	"Products per page" is to specify how many products to show in this page. You can show a minimum of “8” and a maximum of “24” products.
Product card	Number of columns on desktop "Number of columns on desktop" is to specify how many columns to show in this page. You can show a minimum of “2” and a maximum of “4” columns on desktop.
Filtering and sorting	Enable filtering By enabling this checkbox you can display the “Product filter”. Desktop filter layout Product filter layout customizations in a page are as follows: Horizontal Vertical Drawer Enable sorting By enabling this checkbox you can display the “sorting select box”.
Pagination	Pagination type Pagination type customizations in a page are as follows: Paged navigation Load more button
Product-list description	By enabling this checkbox you can show the “Product-list description”.
Mobile layout	Number of columns on mobile "Number of columns on mobile" is used for the customization of product columns in Mobile devices. 1 Column 2 Columns

In the below screenshot, the product grid section is shown on a store’s Collection page. Inside the section, the checkbox options are set to Enable filtering and Enable sorting. With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price. ## Collection page filter Here's an overview of how to set up filters in the sidebar of your **Collection page** when using the OS 2.0 version. Here's an example showing a collection page sidebar. ### **Add filters to your collection page** Follow the below steps to select which product filters you want to display. 1. Install the "**Search & Discovery**" app and open it. Click on "Filters" and Add filter.

2. Select the source.

3. Check the box for any filters you want to display on the collection page. If you want to display product variant options (according to your store’s already existing product variants), then select Product options and you will be able to select which ones you want to display.

4. Check the relevant boxes, and select Done and Save to ensure the implementation of the changes is done before l leaving the area of the Shopify Admin. After selecting which filters you want to display in your collection page’s sidebar, you now need to return to the theme editor to set the collection page to display them on your store. ### **Display the filter in a sidebar** 1. Open theme editor. 2. Select **Collections** > **Default collection**.

3. After opening "**Default collection**", Check "**Enable filtering**" Option.

4. Select "**Save**" and ensure that your changes have taken effect before leaving the theme editor. ### **Collection page customization** {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://webibazaar.gitbook.io/cello-documentation/collection-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.