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

# Collection list: slider

### What It Does

The Collection list: columns section lets you add collection slider to your store.

{% hint style="success" %}

#### How to Add It

1. circle-check In the Shopify theme editor, click **Add section**.
2. circle-check Search for **"Collection list: slider"**.
3. circle-check Click the section to add it to your page.
4. circle-check Adjust the settings described below.
   {% endhint %}

***

### Settings

#### **Layout**

Controls the Layout. Choose from: Full width, Fit to width.

#### **Heading**

The title text displayed in the title element.

#### **Body text**

Rich text content with formatting options.

**Collection card**

#### **Type**

Controls the Type. Choose from: Box, Standard.

#### **Image ratio**

Controls the Image ratio. Choose from: Square, Portrait, Landscape.

#### **Maximum number of items per view / row (desktop)**

Sets how many items appear in each row on desktop.

#### **Maximum number of items per view / row (mobile)**

Sets how many items appear in each row on mobile devices.

**Collection card appearance**

#### **Gap**

Controls the spacing between collection columns.

#### **Overlay opacity**

Controls the transparency level of the collection image.

#### **Horizontal alignment**

Controls the text alignment.

#### **Vertical alignment**

Controls the vertical alignment. Choose from Top, Center, or Bottom. Vertical alignment only applies when the type is set to "Box."

#### **Padding**

Adjusts the spacing around the content.

#### **Border width**

Sets the thickness of the border.

#### **Border radius**

Rounds the corners of this element.

#### **Enable zoom effect on hover**

When enabled, a zoom effect is applied on hover. Disable it to remove the effect.

**Slideshow**

#### **Enable autoplay**

Enables autoplay. Disable it to turn it off.

#### **Enable loop**

Enables looping for the collection slider. Disable it to turn it off.

#### **Transition speed**

Adjusts the transition speed of the collection slider. Only works when autoplay is enabled.

#### **Show navigation arrows (desktop)**

When enabled, navigation arrows are displayed on desktop devices. Disable it to hide them.

#### **Show pagination**

When enabled, pagination is displayed. Disable it to hide it.

**Appearance**

#### **Heading font size**

Controls the heading text size in the title element. Choose from: Heading 6, Heading 5, Heading 4, Heading 3, Heading 2, Heading 1.

#### **Body text font size**

Controls the body text size in the title element.

#### **Text alignment**

Controls the text alignment in the title element.

#### **Color scheme**

Applies a predefined color scheme to this element.

{% hint style="info" %}
Color schemes are sets of coordinated colors you define under **Theme settings > Colors**. Choosing a scheme applies its background, text, and accent colors.
{% endhint %}

#### Button color scheme

Controls the Button color scheme. Choose from: Primary, Secondary.

**Spacing**

#### **Maximum padding top**

Adjusts the space above the content.

#### **Maximum padding bottom**

Adjusts the space below the content.

***

## Supported Blocks

### Collection

See the child document for full settings: [Collection](/agnes/sections/collection-list-slider/collection.md)

***