# 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkxASCKq3kSKBM65PYQwz%2Fdefault-collection.png?alt=media&#x26;token=c8053ce0-c61c-47cf-b361-3b5f1b457481" 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>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</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>Show collection description</td><td>Enabling this checkbox will allow you to display the added description in the collection.</td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Open this link in a new window</td><td>By using the "Open this link in a new window" option, the link will open in a new tab.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" in the Image with text section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of "Content alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Layout</td><td><p>Customization of the "Layout" in the collection banner is as follows:</p><ul><li>Column</li><li>Overlay</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.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FIXl2obmjyUB8UibrOzpa%2Fcollection-banner.png?alt=media&#x26;token=b02304b4-cb23-4b81-806c-555fa5788af1" 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>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>Product card</td><td><strong>Enable product-list description</strong><br>By enabling this checkbox you can show the “Product-list description”.</td></tr><tr><td>Filtering and sorting</td><td><p><strong>Enable filtering</strong><br>By enabling this checkbox you can display the “Product filter”.<br></p><p><strong>Desktop filter layout</strong></p><p>Product filter layout customizations in a page are as follows:</p><ul><li>Horizontal</li><li>Vertical</li><li>Drawer</li></ul><p><strong>Enable sorting</strong><br>By enabling this checkbox you can display the “sorting select box”.</p><p></p><p><strong>Enable collections filter</strong></p><p>By enabling this checkbox you can display the “collections filter”.<br><br><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Collections filter block</strong><br>Click on "Select menu" to add a menu in the collection filter block.</p></td></tr><tr><td>Pagination</td><td><p><strong>Pagination color</strong></p><p>In this section, you can change the background and foreground color of a pagination using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul><p><br><strong>Pagination type</strong></p><p>Pagination type customizations in a page are as follows:</p><ul><li>Paged navigation</li><li>Load more button</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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F1peFZDE7JctGscUVX7xe%2Fproduct-grid.png?alt=media&#x26;token=0e4db012-fd2f-4d6c-b018-9939fe0c57c5" alt=""><figcaption></figcaption></figure>

## Add block

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

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Position in results</td><td>Inserts the media promotion before the product card in this position. only applies to the first page of results.</td></tr><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the banner image.</td></tr><tr><td>Heading</td><td>Enter text to display as on the "heading" section.</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>Sub heading</td><td>Enter text to display as on the "sub heading" section.</td></tr><tr><td>Description</td><td>Enter text to display as a "description" in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in this section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Open this link in a new window</td><td>By using the "Open this link in a new window" option, the link will open in a new tab.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Show container</td><td>When 'Show container' is enabled, the banner's content container box will be visible.</td></tr><tr><td>Container overlay opacity</td><td>By enabling this checkbox, you have the ability to change the container overlay opacity. Modify the "Container overlay opacity" setting to increase or decrease the opacity level of the overlay on the banner content.</td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in this section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices 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.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FleQhSpZcx0za2qWAOQFW%2Fproduct-grid-block.png?alt=media&#x26;token=7ad299c4-435c-44cd-8eb6-aa3423759937" 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.

## 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdxyWv1fWcKTAlHUX2JbC%2Fcoll-filter3.png?alt=media&#x26;token=2a697d1b-51dc-4841-9312-3770717b1515" alt=""><figcaption></figcaption></figure>

2. Select the source.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FFBEy7tvfFy8tGAdDb6Bt%2Ff2.png?alt=media&#x26;token=2f815068-8d64-460a-ad78-f8145c692f68" 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.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fat9cclyP79Zps50ZUbU0%2Ff4.png?alt=media&#x26;token=ef464a71-5387-4ffd-8860-eef34e5ad4dd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FyhxnHukVuHxi8TMEnT4G%2Ff5.png?alt=media&#x26;token=a722af3a-9e24-41e6-9ced-90d037630c0f" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkxASCKq3kSKBM65PYQwz%2Fdefault-collection.png?alt=media&#x26;token=c8053ce0-c61c-47cf-b361-3b5f1b457481" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F0FKzsMQoeXJy2I2KpmrT%2Fenable-filter.png?alt=media&#x26;token=ad5a23e7-1316-4e13-be88-436ed46147b2" alt=""><figcaption></figcaption></figure>

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

### **Collection page customization**

{% embed url="<https://youtu.be/29IQ5TqfrrQ>" %}


---

# 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://sitar-doc.winterinfotech.com/collection-page.md?ask=<question>
```

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.
