# Collection Page

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

## Collection image <a href="#collectionimage" id="collectionimage"></a>

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

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2F4C09QSS0M0qPKdtTO7tW%2Fcollection_1.png?alt=media&#x26;token=fef65b5f-5fb3-44d4-bcd5-3e7d993a1341" alt=""><figcaption></figcaption></figure>

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

<table><thead><tr><th width="273">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in this section is as follows:</p><ul><li>Wide</li><li>Container</li></ul></td></tr><tr><td>Default collection image</td><td>Use "Default collection image" to add the image to the section.</td></tr><tr><td>Show collection image</td><td>Enabling this checkbox will allow you to display the added image in the collection.</td></tr><tr><td>Layout</td><td><p>Customization of the "Layout" in the collection banner is as follows:</p><ul><li>Row</li><li>Overlay</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "alignment" in the collection banner is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6 and so on.</li></ul></td></tr><tr><td>Background overlay</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Background overlay" setting to increase or decrease the opacity level of the overlay on the collection banner image.</td></tr></tbody></table>

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2Fjm6VwAh9XhE0Wxi1mMGa%2Fcollection_banner.png?alt=media&#x26;token=3a79d65b-ad29-4959-821a-6cd3c90514bc" alt=""><figcaption></figcaption></figure>

## Product Grid <a href="#productgrid" id="productgrid"></a>

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6 and so on.</li></ul></td></tr><tr><td>Products per page</td><td>"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.</td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” product card.<br>Applicable in grid mode.</td></tr><tr><td>Listing mode</td><td><p>Listing mode customizations in a page are as follows:</p><ul><li>Grid</li><li>List</li><li>Gallery</li></ul></td></tr><tr><td>Product list description</td><td>By enabling this checkbox you can display the “Product-list description”.</td></tr><tr><td>Card product timer</td><td><p>Add date to the particular product using metafield.</p><p><br><strong>Show countdown</strong><br>By enabling this checkbox, you can show section countdown.<br></p><p><strong>Color scheme</strong><br>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6 and so on.</li></ul><p></p><p><strong>Text</strong><br>Enter text to show product timer title.</p></td></tr><tr><td>Filtering</td><td><p><strong>Enable filtering</strong><br>By enabling this checkbox you can display the “Product filter”.<br><br><strong>Vertical filter color scheme</strong></p><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6 and so on.</li></ul><p></p><p><strong>Desktop filter layout</strong></p><p>Product filter layout customizations in a page are as follows:</p><ul><li>List</li><li>Sidebar</li><li>Drawer</li></ul><p></p><p><strong>Show filter value match count</strong></p><p>By enabling this checkbox you can display filter value match product count.</p><p></p><p><strong>Expand filter options</strong></p><p>Expand filter customizations in a page are as follows:</p><ul><li>Expand the first</li><li>Expand all</li><li>None</li></ul><p></p><p><strong>Enable "Show more" link after amount of filters</strong><br>This is used for the customization of collection filter.</p><ul><li>minimum 2px</li><li>Maximum 20px</li></ul><p><br><strong>Collection list</strong></p><p>Select multiple collection to show inside filter.</p></td></tr><tr><td>Hide/show filter button</td><td><strong>Show button</strong><br>By enabling this checkbox you can display the filter button on top.<br><br><strong>Background and text color</strong><br>Select background and text color to display button background and color.</td></tr><tr><td>Sorting and results count</td><td><p><strong>Enable sorting</strong><br>By enabling this checkbox you can display the “sorting select box”.      </p><p></p><p><strong>Enable results count</strong> </p><p>By enabling this checkbox you can display  product count after apply filtering and sorting.</p></td></tr><tr><td>Pagination</td><td><p><strong>Type</strong></p><p>"Type" is used for the customization of collection page</p><ul><li>Pagination</li><li>Load more</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of product columns in Mobile devices.</p><ul><li>1 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FjlzlKBGXBpmc4YQBJhtv%2Fcollection_section.png?alt=media&#x26;token=4ed9fb68-02f3-42ef-a788-f2a16adfb576" alt=""><figcaption></figcaption></figure>

## Add Media <a href="#collectionfilter" id="collectionfilter"></a>

To add block to the product grid, click on the 'Add media'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Media position in rows</td><td>Use this settings to set banner position in row number of this section. You can set row number in range of 1 to 10.</td></tr><tr><td>Image</td><td>Use "Image" to add the banner image to the section.</td></tr><tr><td>Subheading</td><td>Enter text to display as a subheading in banner. </td></tr><tr><td>Heading</td><td>Enter text to display as a main heading in banner. </td></tr><tr><td>Heading size</td><td><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Button</td><td><p><strong>Label</strong>   </p><p>Use "Label" to add a label to the Button on the banner. </p><p></p><p><strong>Link</strong> </p><p>Use "Link" to add button link in banner button.</p><p><br><strong>Style</strong></p><p>Customization of the button style is as follows:</p><ul><li>Link</li><li>Outline</li><li>Solid</li></ul></td></tr><tr><td>Desktop content position</td><td><p>Customization of the banner content position in desktop is as follows: </p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of the banner content alignment is as follows: </p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Show content background</td><td>Enable this checkbox to show banner content background.</td></tr><tr><td>Content background opacity</td><td>Using this settings, you have the ability to change the content background opacity. Modify the "Content background opacity" setting to increase or decrease the opacity level of the overlay on the banner content. </td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6 and so on.</li></ul></td></tr></tbody></table>

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FbEE8mzNfdJJtgTvTGB0V%2Fcollection_block.png?alt=media&#x26;token=47c96726-9217-439a-8267-e7385e531d75" alt=""><figcaption></figcaption></figure>

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.&#x20;

With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price.

* <mark style="background-color:orange;">You can use metafields to add different media for each collection. To add media through metafields, please follow the process of the '</mark>[<mark style="background-color:orange;">Collection Banner</mark>](https://webibazaar.gitbook.io/koto-documentation/collection-page/collection-banner)<mark style="background-color:orange;">' meta</mark>

## Collection page filter <a href="#collectionfilter" id="collectionfilter"></a>

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.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/oqpFKB2h99OE5M3Jn9YK/coll-filter3.png" alt=""><figcaption></figcaption></figure>

2. Select the source.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/YKjQbrLw75GOnXYyeSMI/f2.png" alt=""><figcaption></figcaption></figure>

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. Then Save.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/AYzBsITJ4L2d79jVB35b/f4.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/nzraMCfJKYcCAMjqAPrz/f5.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2F4C09QSS0M0qPKdtTO7tW%2Fcollection_1.png?alt=media&#x26;token=fef65b5f-5fb3-44d4-bcd5-3e7d993a1341" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FuZf5MpAVviEm0SOcCGjJ%2Fcollection_filter.png?alt=media&#x26;token=8a0009c3-80d5-4428-84d9-c850064dde87" alt=""><figcaption></figcaption></figure>

1. Select "**Save**" and ensure that your changes have taken effect before leaving the theme editor.