> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/multicolumn.md).

# Multicolumn

## Multicolumn

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:$primary;">Column</mark>](#column)" blocks.\
**Tip:** Press **"Add block"** to use the "Column" block. Each block can be added individually and customized in different ways.
{% endhint %}

**Сolumns per row**\
Set the number of columns displayed per row to 2, 3, 4, or 6.

### Content

**Column alignment**\
Use the drop-down to decide whether to align content to the "Left", "Center", or "Right".

**Title size**\
The font size of the blocks' titles can be changed to "Small", "Medium", or "Large".

### Image

{% hint style="info" %}
Add the "[<mark style="color:blue;">Image</mark>](#image-1)" block to display an image.
{% endhint %}

**Image ratio**\
Use the options to adapt media to the desired size. You can select one of the standard options: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\
Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option:

* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*.

  \*The "Proportion" option is applied to mobile by default.

**"Proportion"** indicators:\
\* 100% = Square media\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

* **"Fixed"**. This option sets the media size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.

**Image width**\
Use the scale to change the image width from 15% to 100%.

### Layout options <a href="#layout-options" id="layout-options"></a>

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Use swipe on mobile**\
Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Block colors <a href="#block-colors" id="block-colors"></a>

**Heading**\
Changes the color of the text displayed from the "[<mark style="color:blue;">Heading</mark>](#heading)" block.

**Description**\
Sets the color of the text entered in the "[<mark style="color:blue;">Text</mark>](#text)" block.

**Icon**\
Controls the color of an SVG icon specified in the "[<mark style="color:blue;">Icon</mark>](#icon)" block.

### Animations

**Hover animation**\
Adds an animation inside the image container. Choose the suggested option from the list:

* **"Use theme settings"**. Select the option if there is no need to apply animation settings for the section individually. In this case, set the animation effect for the banner image in the Theme Editor's global settings using the **"Banner image"** hover animation drop-down. Read the details on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/theme-settings/animations.md#hover-animation).
* **"None"**. Deactivates the animation.
* **"Zoom in"**. Enlarges the image on mouse hover over the banner.
* **"Zoom out"**. Decreases the image on mouse hover over the banner.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/rzWPHSWjREkuFyM8LAUw" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/5dzg3jCeOu2nZ0D3OffT" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Column

{% hint style="success" %}
**Tip:** Add as many columns as needed and customize their layout to showcase features, services, collections, or other information.\
Press the **"Add block"** button to view the additional blocks: **"Heading"**, **"Icon"**, **"Image"**, and **"Text"**.
{% endhint %}

### Heading

**Title**\
Enter text to display as the main title.

***

### Icon

**Icon SVG**\
The field is designed to link SVG icons that come with the theme or paste HTML to display a custom SVG icon:

* To display the built-in theme graphics, add an icon name to the field. Learn how to use the theme SVG icons [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/svg-icons.md#built-in-theme-svg-icons).
* Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/svg-icons.md#integrate-custom-svg-icons-into-the-theme) for step-by-step instructions on the required modifications.

**Icon image**\
Optionally use an image instead of an SVG icon.\
Connect an image using the source selector. An image can be added from the store library or uploaded from your device.

***

### Image

**Image**\
Press **"Select"** to add an image from the Image library. The image displays for all screen sizes.

<figure><img src="/files/P4xxHmVyPTW2SedpNZv9" alt=""><figcaption></figcaption></figure>

***

### Text

**Text**\
Use the input field to add accompanying text to the section title.\
Style your text using the formatting options at the top of the input field.

***

<figure><img src="/files/P7v1f8fNzEXKMKYDLK28" alt=""><figcaption></figcaption></figure>