# Slider with multicolumn

![image](/files/UKqRBDuV6TdtYk7gIKqi)

The Slider with multicolumn section combines a large promotional slider with supporting image cards, making it easy to highlight campaigns, tell a brand story, and guide shoppers to key destinations without requiring multiple sections.

## How to add a Slider with multicolumn section to your Shopify store

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Add section.**
2. Locate **Slider with multicolumn.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Slider with multicolumn section

### Section settings

#### General

* **Container**: Choose whether the section displays in a fixed-width or full-width container.
* **Color scheme:** Select the color scheme applied to the section.

#### Slider settings

* **Auto-rotate content**: Automatically rotates slides.
* **Change slides every:** Controls how often slides change when auto-rotation is enabled.

#### Grid settings

* **Number of columns on desktop**: Sets the number of columns displayed in the image card grid.
* **Column gap**: Adjusts the spacing between columns.
* **Row gap**: Adjusts the spacing between rows.

#### Mobile layout

* **Number of columns on mobile:** Sets the number of image card columns shown on mobile devices.
* **Enable swipe on mobile:** Allows customers to swipe through image cards when there are more cards than available columns.

### Block settings

The section supports two block types:

* [Slide item block](#slide-item-block)
* [Image card block](#image-card-block)

#### Slide item block

Use **Slide item** blocks to create slides in the main slider area.

![image](/files/5DnPBZHboauabxAzyGDv)

* General settings:

| Setting               | Description                                      |
| --------------------- | ------------------------------------------------ |
| Color scheme          | Select a color scheme for the slide content.     |
| Image                 | Main desktop image displayed in the slide.       |
| Mobile image          | Optional image shown on mobile devices.          |
| Image overlay opacity | Adds a dark overlay to improve text readability. |

* Content settings:&#x20;

| Setting               | Description                                            |
| --------------------- | ------------------------------------------------------ |
| Content position      | Determines where the content appears within the slide. |
| Content alignment     | Aligns the content left, center, or right.             |
| Subheading            | Displays a small heading above the main title.         |
| Heading               | Main slide heading.                                    |
| Highlight style       | Applies a visual highlight effect to selected text.    |
| Highlight font style  | Sets the highlighted text to normal or italic.         |
| Highlight style color | Changes the highlight decoration color.                |
| Highlight text color  | Changes the highlighted text color.                    |
| Heading size          | Controls the heading size.                             |
| Text                  | Adds supporting content below the heading.             |

* Button settings:

| Setting      | Description                                  |
| ------------ | -------------------------------------------- |
| Button label | Text displayed on the button.                |
| Button link  | Destination URL when the button is clicked.  |
| Button style | Select a button style.                       |
| Button icon  | Displays an optional icon inside the button. |

#### Image card block

Use **Image card** blocks to create supporting cards displayed beside the slider. You can add up to **4 image card blocks** in each Slider with multicolumn section.

![image](/files/ex1Wq2LIQbfAqTydGCDg)

Available settings:

| Setting                | Description                                                           |
| ---------------------- | --------------------------------------------------------------------- |
| Color scheme           | Select a color scheme for the card.                                   |
| Image                  | Image displayed inside the card.                                      |
| Content alignment      | Aligns the card content left, center, or right.                       |
| Heading                | Card title.                                                           |
| Highlight style        | Applies a visual highlight effect to selected text.                   |
| Highlight font style   | Sets the highlighted text to normal or italic.                        |
| Highlight style color  | Changes the highlight decoration color.                               |
| Highlight text color   | Changes the highlighted text color.                                   |
| Heading size           | Controls the heading size on desktop.                                 |
| Heading size on mobile | Inherit desktop size or use a custom mobile size.                     |
| Custom heading size    | Sets a custom heading size for mobile devices.                        |
| Text                   | Additional descriptive content.                                       |
| Card link              | Makes the card clickable and links to a page, collection, or product. |

## Best practices

* Use high-quality images with a consistent visual style across slides and cards.
* Keep slide headings concise and action-oriented.
* Add clear call-to-action buttons that guide visitors to collections or products.
* Enable auto-rotation only when slides contain short and easy-to-read content.
* For mobile devices, consider enabling swipe functionality when using multiple image cards.