> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/lyra-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/lyra-documentation/collection-page.md).

# Collection Page

## 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="/files/Uuu0X52b0RKv9NquftSe" alt=""><figcaption></figcaption></figure>

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

The **Collection Banner** section helps you create an attractive header area for your collection pages. You can display a collection image, description, and collection icons to help customers easily browse different categories.

<table><thead><tr><th width="273">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Choose how the collection banner is displayed.</p><ul><li><strong>Full width —</strong> Stretches across the entire screen width.</li><li><strong>Container —</strong> Displays content within your theme's standard content width.</li></ul></td></tr><tr><td>Default collection image</td><td><p>Select a fallback image that will be displayed if the collection does not have its own featured image. </p><p>For display a unique banner image for each collection, add collection banner image in each collection using metafield.  <a href="/pages/Pu0riUIQDRsB84OA55Rw">Learn more</a></p></td></tr><tr><td>Show collection image</td><td>Enable this option to display the collection's featured image inside the banner.</td></tr><tr><td>Show collection description</td><td><p>Enable this option to display the collection description. </p><p></p><p><strong>To add a collection description:</strong></p><ol><li>Go to <strong>Products → Collections</strong>.</li><li>Open a collection.</li><li>Enter content in the <strong>Description</strong> field.</li><li>Save the collection.</li></ol><p>The description will automatically appear in the banner.</p></td></tr><tr><td>Content horizontal position</td><td><p>Customization of the "Content horizontal position" in the collection banner is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Content vertical position</td><td><p>Customization of the "Content vertical position" in the collection banner is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of the "Content alignment" in the collection banner is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image height</td><td><p>Control the height of the collection banner image.</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></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>Banner background</td><td>Select a custom background color for the banner section.</td></tr><tr><td>Banner text</td><td>Choose the text color for headings and descriptions.</td></tr><tr><td>Background overlay</td><td><p>Adds a dark or light overlay on top of the banner image to improve text readability.</p><p>Higher values create a stronger overlay effect.</p></td></tr><tr><td>Collection Icons</td><td><p>Collection icons allow customers to quickly navigate between related collections.</p><p></p><p><strong>Enable box shadow</strong></p><p>Adds a subtle shadow around collection icon items.  </p><p></p><p><strong>Color scheme</strong> </p><p>Choose a color scheme for collection icon cards.</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</li><li>Scheme 7</li></ul></td></tr></tbody></table>

<figure><img src="/files/YtsvCMQyGTfrtsJZoXf9" alt=""><figcaption></figcaption></figure>

## Add Collection icon block <a href="#productgrid" id="productgrid"></a>

The **Collection Icon** block allows you to create quick navigation links to other collections directly from the Collection Banner section. Each icon can display a collection image, custom image, and custom title to help customers easily browse related collections.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td>Choose the collection you want customers to visit.</td></tr><tr><td>Image</td><td>Upload a custom image representing that collection.</td></tr><tr><td>Custom title</td><td>Enter a title for the collection.</td></tr></tbody></table>

After saving, customers will see clickable collection icons below the collection banner.

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

The **Product Grid** section displays products from the current collection and provides customers with filtering, sorting, and browsing options to help them find products quickly.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Choose how the product grid is displayed on the page. </p><ul><li><strong>Full Width</strong> – Uses the entire browser width.</li><li><strong>Container</strong> – Displays products within the theme's standard content width.</li></ul></td></tr><tr><td>Products per page</td><td><p>Control how many products are displayed before pagination is applied. </p><p>You can show a minimum of “8” and a maximum of “24” products.</p></td></tr><tr><td>Color scheme</td><td><p>Select a color scheme for the product grid section. </p><p>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><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr><tr><td>Select collections</td><td>Display quick collection filter buttons above the product grid.</td></tr><tr><td>Filtering and sorting</td><td><p>These settings help customers narrow down products and improve product discovery.</p><p></p><p><strong>Enable filtering</strong><br>By enabling this checkbox you can display the “Product filter”.<br><em><strong>Note:</strong> Filters are managed through Shopify's <strong>Search &#x26; Discovery</strong> app.</em></p><p><a href="#collection-filters-setup"><mark style="color:blue;">Learn more</mark></a></p><p></p><p><strong>Enable image switcher</strong> </p><p>Allow customers to switch between Product and Model images directly from the collection page. </p><p>This feature overrides the image-hover effect and provides an enhanced product browsing experience.</p><p></p><p><strong>Desktop filter layout</strong></p><p>Choose how filters appear on desktop devices.</p><ul><li><strong>List —</strong> Displays filters horizontally above the product grid.</li><li><strong>Sidebar —</strong> Displays filters in a vertical sidebar beside products.</li><li><strong>Drawer —</strong> Displays filters like drawer.</li></ul><p><a href="#display-the-filter-in-a-sidebar"><mark style="color:blue;">Learn more</mark></a></p><p></p><p><strong>Enable sticky filter</strong></p><p>Available when using the Sidebar layout.</p><p>Allows filter groups to expand and collapse for a cleaner browsing experience.</p><p></p><p><strong>Collapsible filter</strong></p><p>By enabling this checkbox you can display the collapsible filter when sidebar layout is set.</p><p></p><p><strong>Enable sorting</strong><br>Displays the sorting dropdown menu.</p><p></p><p><strong>Enable product-list description</strong></p><p>Displays collection or category descriptions within the product listing area.</p></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="/files/EdCt5peTqbtU2PB112Do" 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;

<figure><img src="/files/pzdXQ1DkfcbRNbi4lpqN" alt=""><figcaption></figcaption></figure>

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

## Add scrolling bar block

The **Scrolling Bar** block allows you to display continuously moving promotional messages, announcements, offers, or highlights within your collection page. This is a great way to draw attention to special deals, product categories, or important store information.

#### Add a Scrolling Bar

1. Open **Online Store → Themes → Customize**.
2. Open a **Collection Page** template.
3. Select the **Product Grid** section.
4. Click **Add Block**.
5. Select **Scrolling Bar**.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Bar position in rows</td><td><p>Choose where the scrolling bar appears within the product grid. </p><p></p><p><strong>Note:</strong> This setting only applies to the first page of collection results.</p></td></tr><tr><td>Color scheme</td><td><p>Choose a color scheme for the scrolling bar. </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</li><li>Scheme 7</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong></p><p>Enter the message you want to display in the scrolling bar. </p><p></p><p><strong>Size</strong></p><p>Adjust the text size. </p><p>Higher values create larger text and increase visibility.</p></td></tr><tr><td>Space Between Text</td><td><p>Control the spacing between repeated messages.</p><p>Increase this value to create more space between announcements.</p></td></tr><tr><td>Speed</td><td><p>Adjust how quickly the scrolling text moves.</p><ul><li>Lower values = Faster movement</li><li>Higher values = Slower movement</li></ul><p>Choose a speed that remains easy for customers to read.</p></td></tr><tr><td>Direction</td><td><p>Choose the scrolling direction.</p><ul><li>Left to Right</li><li>Right to Left</li></ul></td></tr><tr><td>Separator Between Text</td><td><p>Choose how repeated messages are separated. </p><ul><li>Dots</li><li>Pipe</li><li>None</li></ul></td></tr></tbody></table>

## Collection Filters Setup

To create custom collection filters:

#### Step 1: Install Shopify Search & Discovery

1. Open **Apps** in Shopify Admin.
2. Install **Search & Discovery**.
3. Open the app.

#### Step 2: Create Filters

1. Open **Search & Discovery**.
2. Click **Filters**.
3. Add desired filters such as:
   * Color
   * Size
   * Material
   * Product Type
   * Vendor
4. Save changes.

The filters will automatically appear on collection pages when **Enable Filtering** is turned on.

### For more details follow below screenshot

Follow the below steps to select which product filters you want to display.

1. To add a filter to the Collection page, go to Online Store > Navigation > Collection and search filters > Open.

<figure><img src="/files/UGhUdRUNuaes6rZMSH9v" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/aHhv20PHVnaLuluKQNeW" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mRrLKMrcezx1GeNjBq76" alt=""><figcaption></figcaption></figure>

2. 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="/files/fOgK6OAzBcnlXjv3EjWp" alt=""><figcaption></figcaption></figure>

3. 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="/files/Uuu0X52b0RKv9NquftSe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/UDSOUDVeit04Pwhlppkf" 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/XPsBEa8hM98>" %}