# Collection list
The **Collection list** section displays selected collections as image cards, making it easy for customers to browse and navigate to your main product categories.
You can display collection cards in a **Grid** or **Carousel**, control how many cards appear per row, adjust spacing, and configure a separate layout for mobile devices.
## Presets
The Collection list includes two presets:
* **Collection list: Grid** — displays collection cards in rows.
* **Collection list: Carousel** — displays collection cards in a horizontally navigable carousel.
Both presets use the same section settings. You can switch between them at any time using the **Type** setting.
## How to customize the Collection list
1. In the theme editor (**Edit theme**), open the page where you want to display the section.
2. Click **Add section** and select **Collection list: Grid** or **Collection list: Carousel**.
3. Select the collections you want to display and arrange them in the preferred order.
4. Configure the layout, card style, spacing, and mobile display.
5. Customize the section header if needed.
6. Click **Save**.
## Section settings
### Collections
| Setting | Description | Options |
| --------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| **Collections** | Selects the collections to display. Collection cards appear in the same order you arrange them in the editor. | Select one or more collections |
Arrange your most important collections first so customers can reach your main categories quickly.
### Layout
Controls how collection cards are arranged on desktop and larger screens.
| Setting | Description | Options |
| ------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Container** | Controls the width of the section content. | **Full:** Uses the available page width.
**Fixed:** Keeps the content within the theme's fixed container width. |
| **Type** | Controls how the collection cards are arranged. | **Grid** or **Carousel**. |
| **Columns** | Sets the number of collection cards displayed across the row on larger screens. | **2–6 columns**. |
| **Horizontal gap** | Controls the horizontal space between collection cards. | **0–100px**. |
| **Vertical gap** | Controls the vertical space between rows of cards. | **0–100px**.
*Available when **Type** is set to **Grid**.* |
### Carousel settings
*These settings are available when **Type** is set to **Carousel**.*
**Carousel** is used on desktop and tablet. On mobile, the section follows the **Mobile layout** settings instead, using either a grid or swipeable row. Carousel arrows and dots are not shown on mobile.
| Setting | Description | Options |
| --------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Control type** | Controls the navigation shown for the carousel. | **None, Dots, Arrows + dots, Floating arrows,** or **Floating arrows + dots**. |
| **Control alignment** | Controls the horizontal position of the carousel controls. | **Left, Center,** or **Right**.
*Available when the selected **Control type** includes navigation controls.* |
| **Overflow content** | Controls whether cards extending beyond the content area remain visible. | **Hidden:** Clips cards at the content edge.
**Visible:** Allows part of the next card to remain visible. |
| **Show edge fade** | Adds a soft fade at the edge of the carousel to indicate that more content is available. | **On** or **Off**. |
Use **Overflow content: Visible** with **Show edge fade** when you want part of the next card to hint that customers can continue scrolling.
### Mobile layout
Controls how the Collection list appears on mobile devices.
| Setting | Description | Options |
| ---------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| **Enable swipe on mobile** | Controls whether customers can swipe horizontally through collection cards on mobile. | **On** or **Off**. |
| **Show edge fade on mobile** | Adds a soft fade at the screen edge to indicate that more cards are available. | **On** or **Off**.
*Available when **Enable swipe on mobile** is turned on.* |
| **Custom column width** | Lets you manually control the width of each collection card on mobile. | **On** or **Off**.
*Available when **Enable swipe on mobile** is turned on.* |
| **Custom width** | Sets the width of each collection card on mobile. | **20–90%**.
*Available when **Enable swipe on mobile** and **Custom column width** are turned on.* |
| **Mobile columns** | Sets the number of collection cards displayed per row on mobile. | **1 column** or **2 columns**.
*Available when **Custom column width** is turned off.* |
| **Horizontal gap** | Controls the horizontal space between collection cards on mobile. | **0–100px**. |
| **Vertical gap** | Controls the vertical space between rows of cards on mobile. | **0–100px**.
*Available when **Enable swipe on mobile** is turned off.* |
Turn on **Custom column width** and use a value below **90%** when you want part of the next card to remain visible and encourage customers to swipe.
### Appearance
Controls the visual style of the Collection list section.
| Setting | Description | Options |
| ------------------ | ------------------------------------------------ | ----------------------------------------------------------------------- |
| **Color scheme** | Applies a theme color scheme to the section. | Select an available color scheme. |
| **Border** | Controls whether the section has an outline. | **None** or **Solid**. |
| **Border width** | Controls the thickness of the section border. | **0–10px**.
*Available when **Border** is set to **Solid**.* |
| **Border opacity** | Controls the opacity of the section border. | **0–100%**.
*Available when **Border** is set to **Solid**.* |
| **Corner radius** | Controls how rounded the section corners appear. | **0–32px**. |
### Padding
Controls the top and bottom spacing separately for desktop and mobile.
| Setting | Description | Options |
| ----------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **Devices** | Selects which device-specific padding values you are editing. | **Desktop** or **Mobile**. |
| **Top** | Controls the space above the section content. | **0–100px**. |
| **Bottom** | Controls the space below the section content. | **0–100px**. |
| **Left** | Controls the space between the content and the left edge of the section. | **0–100px**.
*Available when **Container** is set to **Full**.* |
| **Right** | Controls the space between the content and the right edge of the section. | **0–100px**.
*Available when **Container** is set to **Full**.* |
Tablet and other in-between screen sizes use responsive values between the desktop and mobile settings.
## Blocks
The Collection list supports theme blocks that can be added above the collection cards.
The default presets include a **Text** block, used as the section header for adding a heading, supporting text, or other introductory content. [*See the **Text block documentation** for all available settings*](https://docs.foxecom.com/motrix-theme/theme-blocks/text).
The section also includes a built-in **Collection card** block that controls how the collection cards in that specific Collection list are displayed.
The built-in **Collection card** inside the Collection list is different from the standalone **Collection card** available under Theme blocks.
The standalone theme block includes additional settings and is documented separately in the [Collection card documentation](https://docs.foxecom.com/motrix-theme/theme-blocks/collection-card).
### Collection card
Select **Collection card** inside the Collection list section to control the layout, image ratio, alignment, and additional information shown on all collection cards in that section.
#### Collection card - Layout
Controls the overall design of each collection card.
| Setting | Description | Options |
| ---------- | -------------------------------------------------- | -------------------------------------------------------------------------------------- |
| **Layout** | Controls the visual layout of the collection card. | **Standard, Vertical card, Horizontal card, Circle thumbnail, or Overlay with badge.** |
#### Collection card - Media
Controls the shape of the collection image.
| Setting | Description | Options |
| ---------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Aspect ratio** | Controls the aspect ratio used for collection images. | **Use global settings:** Uses the image ratio configured in Theme settings.
**Auto:** Uses the image's original proportions.
**Square (1/1), Portrait (4/5), Portrait (3/4), Landscape (16/9),** or **Landscape (4/3)**. |
Use the same aspect ratio for all collection cards when you want the row to look consistent.
#### Collection card - Content
Controls the alignment and additional information displayed on each collection card.
| Setting | Description | Options |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------- |
| **Alignment** | Controls the alignment of the collection card content. | **Left, Center,** or **Right**. |
| **Show product count** | Displays the number of products in each collection. | **On** or **Off**. |
| **Enable preload image** | Loads the collection image earlier to help it appear faster when the section is visible as soon as the page loads. | **On** or **Off**. |
Use **Enable preload image** only when the Collection list is visible when the page first loads. Avoid enabling it for sections farther down the page.