> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/collections/collection-list-grid-slider.md).

# Collection List - Grid/Slider

The Collection list section lets you showcase selected collections in one place. It helps customers quickly jump to the parts of your store that interest them.

The Collection List section displays multiple collections in a grid or slider layout. This section helps you showcase different product categories, featured collections, or curated shopping experiences directly on your homepage or other pages, making it easy for customers to browse and discover your product collections.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FFTq8GrufV9ZRjbBdbvRE%2FCapture%20d'%C3%A9cran%202026-02-20%20160209.png?alt=media&amp;token=85002a0b-005c-47be-8cc7-23cc4d86495d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Collection list**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Content

* **Collections**: Select which collections to display. You can add up to 16 collections. You can create and manage collections in your Shopify admin under Products > Collections.

#### **Heading**

* **Heading**: Enter a title for this section, such as "Shop by Category" or "Our Collections". Leave blank to hide the heading.
* **Heading size**: Choose how large the heading appears, from XS (extra small) to 2XL (extra extra large).
* **Underline**: When enabled, adds a decorative underline beneath the heading.
* **Header text position**: Controls where the heading appears horizontally - left, center, or right.

#### Layout

* **Show collection product count**: When enabled, displays the number of products in each collection on the collection cards.
* **Image ratio**: Choose the aspect ratio for collection images - Landscape (wide), Portrait (tall), Square, or Tall (extra tall).
* **Collections to show**: Set how many collections to display (between 2 and 16 collections).
* **Columns**: Choose how many columns of collections appear on desktop screens (1 to 6 columns).
* **Slider display**: When enabled, collections scroll horizontally in a slider on desktop instead of displaying in a static grid. This is useful when you have more collections than can fit in the columns.
* **Slider buttons position**: When slider display is enabled, choose whether navigation buttons appear above the cards or overlaid on the cards.
* **Show progress bar**: When enabled, displays a progress indicator to show how far through the slider you've scrolled.
* **Progress bar position**: Choose whether the progress bar appears at the top or bottom of the slider.
* **Full width**: When enabled, the section stretches across the entire width of the page instead of being contained within the standard page width.
* **Show "View all" button**: When enabled, displays a button that links to your collections page. This only appears if you have more collections than what's shown in this section.
* **"View all" style**: Choose how the "View all" button appears - as a text link, outline button, solid button, or transparent button.
* **View all button position**: Choose whether the "View all" button appears at the top or bottom of the section. This setting only works when the button style is set to "Link".
* **Color scheme**: Select a color scheme for the section background and text. Note that collection card colors are controlled in your theme settings.

#### Mobile layout

* **Columns**: Choose how many columns of collections appear on mobile devices (1 or 2 columns). Collections will automatically scroll in a slider on mobile for better usability.
* **Show progress bar**: When enabled, displays a progress indicator on mobile devices to show how far through the slider you've scrolled.

#### Padding

* **Top**: Adjust the spacing above the section (0 to 400 pixels).
* **Bottom**: Adjust the spacing below the section (0 to 400 pixels).

***

### Tips

* If you publish lots of collections, enable the “View all” button to guide customers.
* Use this section to create a "Shop by Category" experience that helps customers navigate your store by product type or theme.
* Enable the product count to show customers how many products are in each collection, which can help them decide which collections to explore.
* Use the slider display when you have many collections to showcase - it creates a more interactive browsing experience.
* Consider your collection image dimensions when choosing an image ratio - square works well for most collections, while landscape ratios can showcase collection banners effectively.
* Arrange your collections in order of importance or popularity, as they'll appear in the order you select them.