> 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/media-columns-columns.md).

# Media columns: columns

### What It Does

The Media columns: columns section lets you display customizable media columns in your store.

{% hint style="success" %}

#### How to Add It

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

***

### Settings

#### **Layout**

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

#### **Heading**

The heading text displayed in the title element.

#### **Body text**

Rich text content with formatting options.

**Column**

#### **Image ratio**

Applies only to 'Image slide' or 'Video slide'. Choose from: Square, Portrait.

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

Sets how many items appear in each row.

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

Controls the number of columns. Choose from: 2 columns, 1 column.

**Column appearance**

#### **Gap**

Controls the spacing between items.

#### **Overlay opacity**

Controls the transparency level.

#### **Horizontal alignment**

Controls the text alignment.

#### **Vertical alignment**

Applies only when the column is set to 'Boxed column'. Choose from: Top, Center, Bottom.

#### **Padding**

Adjusts the spacing around the content.

#### **Border width**

Sets the thickness of the border.

#### **Border radius**

Rounds the corners of this element.

#### **Enable inner card color**

When enabled, media columns are displayed using the inner card color. Disable to turn this off.

#### **Enable same height**

When enabled, all media columns are displayed at the same height. Disable to turn this off.

**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 text size in the title element.

#### **Text alignment**

Controls the text alignment.

#### **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 %}

**Spacing**

#### **Maximum padding top**

Adjusts the space above the content.

#### **Maximum padding bottom**

Adjusts the space below the content.

***

### Supported Blocks

### Video column

See the child document for full settings: [Video column](/agnes/sections/media-columns-columns/_media-columns-video-block.md)

### Image column

See the child document for full settings: [Image column](/agnes/sections/media-columns-columns/_media-columns-image-block.md)

### Text column

See the child document for full settings: [Text column](/agnes/sections/media-columns-columns/_media-columns-text-block.md)