# Multicolumn

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F5MURYvkRXMBhEFlmh6SX%2Fmulti.jpg?alt=media&#x26;token=526ee310-297c-4848-a1c9-cfd4f50b5ef2" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Multicolumn**
3. Make necessary changes. > **Save.**
   {% endhint %}

## General Settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FcSpiFbJzG4Q6Hx05xPLN%2Fmulti-c.jpg?alt=media&#x26;token=6572654b-e752-4cf7-ab55-30ffff0a1ae5" alt=""><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **Subheading**&#x20;
* **Heading** - Heading of this section
* **Heading size** - From Heading 1 to Heading 6
* **Description** - Description of this section
* **Layout** - *Horizontal / Vertical*

### View all button

* **Link url**  - Link for button in Header section
* **Link text** - Text for button
* **Button type**  -  there are 7 Options button
* **Show arrow icon**

### Column settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FkJIhUTD7GylOsiCQ99ZM%2Fmulti-s.jpg?alt=media&#x26;token=f1322152-6a33-4e07-9c46-24df397159a3" alt=""><figcaption></figcaption></figure>

* **Image width**  - Small / Medium / Large / Xtra large / Full width
* **Image ratio -** Adapt to image / Square (1:1) / Portrait (3:4) / Landscape (4:3) / Landscape (5:3.5) / Wide (16:9)
* **Column heading size** - from Heading 1 - Heading 6
* **Column alignment** - Left / Center / Right

### **Grid settings**

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F9gYmkfVQqOXTsuuVCleY%2Fmulti-g.jpg?alt=media&#x26;token=26b83c4b-fd80-4f2e-ab60-a34e4e6f82f8" alt=""><figcaption></figcaption></figure>

* **Stack columns** -  Display columns in a grid layout. ( If disable Layout columns is carousel )
* **Show carousel progress bar**
* **Enable overflow visible** - When this feature is enabled, the Carousel will be allowed to overflow from the container
* **Column (Desktop) -** Number columns per row for desktop

### Mobile Layout

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FouE316j7B4hhxS60vDbD%2Fmulti-m.jpg?alt=media&#x26;token=203b2f51-159f-4167-b26a-a6cf090f4370" alt=""><figcaption></figcaption></figure>

* **Columns on mobile** : 1 column / 2 columns ( When stacked products are enabled.)
* **Column gap (mobile)**
* **Enable swipe on mobile**

### Colors

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FcGzFhXVgxpuLwPNSyDdy%2Fcolor-c.jpg?alt=media&#x26;token=3cb90b75-d723-4021-b6c1-808b5fcedadc" alt="" width="280"><figcaption></figcaption></figure>

* **Background**
* **Text color**

### Section padding

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fc0cazMLYpU5yjLuS4vGl%2Fpadding-c.jpg?alt=media&#x26;token=d8c91b56-445e-4ea5-bbc5-f825cf08e577" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Multicolumnt.**
2. **Add Column.**
3. Make necessary changes. > **Save.**
   {% endhint %}

<div><figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FBIEp8xSEZfYclBqEYTUq%2Fmulti-col.jpg?alt=media&#x26;token=9e309755-491e-42df-bf02-cb45947b00c2" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FPJB4bU153ODKQQAvwyq4%2Fmulti-col-1.jpg?alt=media&#x26;token=a575afbc-51de-4e79-be22-578666bac770" alt=""><figcaption></figcaption></figure></div>

* Image&#x20;
* Image link
* Heading&#x20;
* Description
* Button
* Button link
* Button style
* Show arrow icon