> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Set up Facet collection pages with filters and promo tiles > Configure Facet's collection page: product grid columns, filters in a sidebar or drawer, sorting, view toggles, pagination and promotional tiles in the grid. The collection page lists the products in one collection. In Facet it is built from the **Collection** section, which shows a toolbar with filters, sorting and view toggles above a grid of product cards. This page covers the section settings, the promotional tile you can place in the grid, and the other sections the default collection template uses. ![The Collection section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/collection-page/collection-page-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=0ab5f1eb641fb8e92a0ee65fe2081362) ## What this section controls * The collection title, description and product count. * How many products show per page, and how many columns on large screens. * Filters in a sidebar or a drawer, and the sort menu. * The toggle between a larger and a smaller grid. * Promotional tiles placed among the products. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Open the collection template** In the template picker at the top of the Theme Customizer, choose **Collections**, then **Default collection**. **3. Set up the grid** Click **Collection** in the **Sections** panel to choose the columns, products per page and filter layout. **4. Add a promotional tile** Under **Collection**, click **Add block**, then **Promotional tile**, and pick the row and column it sits in. ![The theme editor with the Collection section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/collection-page/collection-page-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=9b1483ae2bdba6da87a0c971335d7421) ## Section settings ### Header and grid ![Theme editor sidebar showing the Collection section settings: Show page title, Show description, Show product count, Products per page, Desktop columns, Enable filtering, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/collection-page/collection-page-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=146e9936d08a629fa8cf42a07f2712bd) * **Show page title**: on by default. Shows the collection title above the toolbar. * **Show description**: on by default. Shows the collection description under the title, when the collection has one. * **Show product count**: on by default. Shows the number of products in the toolbar. * **Products per page**: from 8 to 36. Default: 24. When a collection has more products, page numbers appear under the grid. * **Desktop columns**: **2 columns**, **3 columns** (default) or **4 columns**. Phones always show 2 columns. > [!NOTE] > > The default collection template opens with a [Page banner](https://docs.shopify.lightsout.agency/themes/facet/sections/page-banner.md) that already shows the collection title, description and image, so **Show page title** and **Show description** are turned off there. Turn them on if you remove the banner. ### Filters and sorting > [accordion] Enable filtering > > On by default. Shows the filters for the collection, such as availability, price, size or color. A **Filters** button in the toolbar shows how many filters are active, and chips under the toolbar let shoppers remove each one or **Clear all**. > > Facet shows availability as one **In stock only** switch and price as a slider with from and to fields. Color filters show as swatches when you choose swatches for them in Search & Discovery, or when their name is one of your color option names in [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md). > [accordion] Filter layout > > * **Sidebar** (default): filters sit in a column beside the grid on large screens. Shoppers can fold the column away with the **Filters** button, and choices apply as soon as they are made. > * **Drawer**: filters open in a panel from the side. Choices apply when shoppers click **Apply**. > > On tablets and phones, both layouts open the filters in a drawer. Appears only when **Enable filtering** is on. > [accordion] Enable sorting > > On by default. Shows a **Sort by** menu with Shopify's sort options, such as best selling, price and date. > [accordion] Show view toggles > > On by default. Shows two buttons that switch between larger and smaller product cards. The smaller view adds one column, up to 5. The shopper's choice is remembered in their browser. > [accordion] Show borders on filter and sort > > On by default. Draws borders around the **Filters** button, the sort menu, the view toggles and the active filter chips. Their corners follow the inputs setting in [Corner radius](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/corner-radius.md). > [!NOTE] > > The filters themselves come from Shopify's free **Search & Discovery** app. Install it, then open the app's **Filters** page to choose which filters show and in which order. If no filters are set up, the **Filters** button is hidden. ### Common settings ![Theme editor sidebar showing the Collection section settings (part 2, scrolled): Show view toggles, Show borders on filter and sort, Common settings, Color scheme, Top padding, Bottom padding, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/collection-page/collection-page-settings-2.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=3ee62882f62320c2ee2be9f0629ae55d) * **Color scheme**: the colors of the section. * **Top padding**: None (default), Small, Medium, Large or Extra large. * **Bottom padding**: None, Small, Medium, Large (default) or Extra large. * **Page width**: Narrow, Narrower, Fluid (default) or Full. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for what each option does. ## Blocks ### Promotional tile A tile that takes the place of one product card in the grid, with a picture, a heading, text and a button. The products flow around it. You can add several tiles. Tiles show on the first page of the collection only. > [tab] Content > > * **Image**: a picture that fills the tile, behind the text. Without one, the tile shows its color scheme. > * **Heading**: default "Thoughtful luxury". > * **Text**: default "Elevated wardrobe staples, made responsibly." > * **Button label**: default "Shop now". Leave it blank to hide the button. > * **Link**: where the button goes. > [tab] Position > > * **Column**: from 1 to 6. Default: 1. A column number higher than the grid has places the tile in the last column. On phones, the grid has 2 columns. > * **Row**: from 1 to 24. Default: 3. > [tab] Colors > > * **Color scheme**: the colors of the tile, its text and its button. ## Other sections on the collection template The default collection template comes with these sections, in this order. Each one can be edited, hidden, removed or reordered. * [Page banner](https://docs.shopify.lightsout.agency/themes/facet/sections/page-banner.md): the collection title, description and image, above the grid. * **Collection**: the section on this page. * [FAQ](https://docs.shopify.lightsout.agency/themes/facet/sections/faq.md): common questions and answers. * [Promotion banner](https://docs.shopify.lightsout.agency/themes/facet/sections/promotion-banner.md): a promotion with a countdown and a button. * [Testimonials](https://docs.shopify.lightsout.agency/themes/facet/sections/testimonials.md): customer quotes. ## Best practices * **Set up filters in Search & Discovery first.** Without filters in the app, shoppers only get sorting. * **Pick a calm tile picture.** The tile text sits directly on the picture, so a picture with a plain area keeps it readable. * **Keep tiles below the first row.** Placing a promotional tile on row 3 or later lets shoppers see products first. * **Match columns to your photos.** Tall product photos read well at 3 columns. Use 4 columns for small items or large catalogs. ## Related guides > [card] [Product cards](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/product-cards.md) > > Change how product cards in the grid look. > [card] [Collection list page](https://docs.shopify.lightsout.agency/themes/facet/collections/collection-list-page.md) > > Show all your collections on one page. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.