> 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/informative/multicolumn.md).

# Multicolumn

The Multicolumn section lets you display multiple columns of content side by side, perfect for showcasing features, benefits, or any information in an organized grid layout. Each column can include an icon, image, or video along with a heading and description. This section is ideal for highlighting product features, service offerings, or creating visual content blocks that help break up long pages and make information easier to scan.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2Fhu2PGf66bmSGxt7p9p97%2FCapture%20d'%C3%A9cran%202026-02-20%20165551.png?alt=media&amp;token=36070e03-e316-4417-a689-2701f1b81826" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

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

### Settings

#### Heading

* **Heading**: The main title that appears above the multicolumn section. This helps visitors understand what the section is about.
* **Heading size**: Controls how large the heading appears, from extra small (XS) to extra extra large (2XL).
* **Underline**: Adds a decorative underline beneath the heading when enabled.
* **Text position**: Controls where the heading is positioned horizontally (left, center, or right).

#### Layout

* **Color scheme**: Choose a color scheme that matches your store's design. This affects the background and text colors of the section.
* **Columns**: Set how many columns appear side by side on desktop screens. You can choose from 1 to 6 columns.
* **Column alignment**: Controls how content within each column is aligned. Choose left alignment for a traditional look or center alignment for a more balanced appearance.
* **Full width**: When enabled, the multicolumn section spans the entire width of the browser window instead of being contained within the page margins.
* **Use custom border and layout settings**: When enabled, you can customize the border radius, border width, and grid spacing specifically for this section, overriding the global theme settings.

#### Custom border and layout settings

These settings only appear when "Use custom border and layout settings" is enabled.

* **Border radius**: Controls how rounded the corners of each column card are. Higher values create more rounded corners.
* **Border width**: Sets the thickness of the border around each column card. Set to 0 to remove borders completely.
* **Grid spacing**: Adjusts the space between columns. Higher values create more separation between columns.

#### Mobile layout

* **Columns**: Choose how many columns appear on mobile devices. You can display 1 or 2 columns per row on smaller screens.
* **Carousel**: When enabled, columns become swipeable on mobile devices, allowing visitors to scroll through them horizontally.

#### Block settings

* **Color scheme**: Choose a color scheme for the individual column cards. This can be different from the section's main color scheme.
* **Background color**: Choose whether column cards have a transparent background or a filled background color.
* **Column width**: When using a single column layout, choose how wide that column should be. Options include small, medium, or full width.
* **Image width**: Controls how wide images appear within each column. Options range from extra small (15% of column) to full width (100% of column).
* **Image ratio**: Sets the aspect ratio for images. Choose auto to maintain the original image proportions, or select landscape, portrait, tall, or square for consistent sizing.
* **Icon size**: When using icons instead of images, choose how large they appear. Options range from small to extra large.
* **Block header text size**: Controls the size of headings within each column block, from small (S) to extra large (XL).
* **Block description text size**: Adjusts the font size of the description text within each column, measured in pixels.

#### Button

* **Label**: The text that appears on the button below the columns. Leave blank to hide the button.
* **Link**: The URL where the button leads when clicked.
* **Button align**: Controls where the button appears horizontally (left, center, or right).

#### Padding

* **Top**: Adds space above the multicolumn section to create visual separation from other content.
* **Bottom**: Adds space below the multicolumn section to create visual separation from other content.

***

#### **Block:** Column

Each column block represents one item in your multicolumn section.

**Content type**

* **Content type**: Choose what visual element appears at the top of the column. Options include icon, image, or video.

**Image**

* **Image**: Upload an image to display in this column. The image appears above the text content.

**Icon**

* **Icon**: Select an icon to display instead of an image. Icons are great for simple, clean designs. If both an image and icon are set, the image takes priority.

{% hint style="info" %}
If the icon you need is not available in the built-in list, you can simply upload it as an image. For example, you can use a **PNG or SVG file** (SVG is preferred because it is scalable and stays sharp on all devices) from an icon library such as Google Icons, then upload it as an image to display it just like a regular icon.
{% endhint %}

**Video**

* **Video**: Upload a video file to display in this column instead of an image or icon.
* **Autoplay**: When enabled, the video starts playing automatically when the page loads.
* **Mute video**: When enabled, the video plays without sound by default.
* **Enable video looping**: When enabled, the video automatically restarts when it reaches the end.
* **Show controls**: When enabled, video playback controls (play, pause, volume) are visible to visitors.

**Content**

* **Heading**: The title for this column. This appears below the image, icon, or video.
* **Description**: The main text content for this column. Use this to explain features, benefits, or provide details.
* **Link**: The URL where visitors go when they click on this column. If you leave the link label blank, the entire column becomes clickable.
* **Link label**: Optional text for a separate link button at the bottom of the column. Leave blank to make the entire column clickable with a hover effect.

{% hint style="info" %}
Leave the **link label** blank to make the entire block clickable. Add text to create a separate link button at the bottom.
{% endhint %}

***

### Tips

* Use consistent image ratios across all columns for a cleaner, more professional appearance. The "Auto" ratio option maintains each image's original proportions, while fixed ratios create uniform sizing.
* When using icons, keep them simple and relevant to your content. Icons work best when they clearly represent the feature or benefit described in the text.
* For mobile devices, consider using the carousel option if you have more than 2 columns, as it makes browsing easier on smaller screens.
* If you want the entire column to be clickable, leave the link label blank. This creates a hover effect that makes it clear the whole block is interactive.
* Mix different content types (icons, images, videos) across columns to create visual variety, but keep the overall design cohesive with consistent spacing and alignment.
* Use the custom border and layout settings to create unique card styles that match your brand, but remember these override your global theme settings.