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

# Show all collections with Facet's collections grid

> Set up Facet's collection list page: the Collections grid section, columns, collections per page, and how each collection card picks its picture and count.

The collection list page shows every collection in your store as a grid of cards, at the address `/collections`. In Facet it is built from the **Collections grid** section. This page covers what each card shows and the section settings.

![The Collections grid section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/collection-list-page/collection-list-page-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=f0f1ce2a274dac128f30b4dd7600d32d)

## What this section controls

* How many collections show per page, with page numbers when there are more.
* How many columns the grid has on large screens.
* The colors and spacing of the page.

The page always opens with the heading "Collections". Each card shows:

* The collection picture. Without one, the picture of the collection's first product is used.
* A badge with the number of products in the collection.
* The collection title and a **View all** link.

## 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 list template**

In the template picker at the top of the Theme Customizer, choose **Collections list**. Then click **Collections grid** in the **Sections** panel.

**3. Set the grid**

Choose **Desktop columns** and **Collections per page**.

![The theme editor with the Collections grid 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-list-page/collection-list-page-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=9c15ca5a2fe05ee49efaf0804617719b)

## Section settings

### Grid

![Theme editor sidebar showing the Collections grid section settings: Collections per page, Desktop columns, Common settings, Color scheme, Top padding, Bottom padding, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/collection-list-page/collection-list-page-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=ab013d47b3cd2ffa377768f490d5d5a9)

* **Collections per page**: from 4 to 48, in steps of 4. Default: 12. When you have more collections, page numbers appear under the grid.
* **Desktop columns**: **2 columns**, **3 columns** or **4 columns** (default). Phones always show 2 columns.

### Common settings

* **Color scheme**: the colors of the section.
* **Top padding**: None, Small, Medium (default), 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.

## Best practices

* **Give every collection a picture.** Set a collection image in your Shopify admin under **Products**, then **Collections**, so the grid does not depend on whichever product comes first.
* **Use pictures of one shape.** Cards look tidier when all collection pictures share the same proportions.
* **Link to the page from your menu.** Add a menu item that points to **All collections** so shoppers can find this page.

## Related guides

> [card] [Collection page](https://docs.shopify.lightsout.agency/themes/facet/collections/collection-page.md)
>
> Set up the page each collection card opens.

> [card] [Collection highlights](https://docs.shopify.lightsout.agency/themes/facet/sections/collection-highlights.md)
>
> Feature chosen collections on any page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.