# Multi column

The **Multi-column** section displays a row of text blocks with optional images and icons, great for highlighting your values, how your company works, or explaining key elements of your product.

<div><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FpJWmEKuOUb5g7o57Q2Cr%2Fmulti-column-info.jpeg?alt=media&#x26;token=b72e3047-48e3-4af3-b413-eef573733c27" alt=""> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FfE5H4m1XlvFnrnHyFODK%2Fmulti-column-text-image.jpeg?alt=media&#x26;token=becceff3-2330-4e8c-ae8f-a8e854f021a8" alt=""><figcaption></figcaption></figure></div>

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Multi-column**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Add column blocks

***

Add up to 8 **Columns** with a featured image, headings, and button. There are 3 different types of column blocks: **Columns**, **Columns with images**, and **Columns with icons**.

Click **(+) Add block** to add new columns blocks, and use the drag-and-drop handles **`⋮⋮`** to change their order.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Column block** to open the settings.

   > Click **(+) Add block** to add a new **Column**, **Column with image**, or **Column with icon**.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under *Image*, click **Select image** to upload an image or icon to display at the top of the column.
3. Adjust the **Max width of text** of the Column text using the slider.

   > The width will need to be adjusted when there are two columns per row on desktop.

   > Experiment with this setting to find a clean visual shape for your text.
4. Enter text for the column **Heading**.

   > we recommend a short title of one or two words.

   > Set the **Heading size** to **Small**, **Medium**, or **Large**.
5. Enter **Text** as the main column content below the Heading.

   > We recommend one or a few short sentences.

   > We also recommend trying to keep the text for all Columns around the same length.
6. Select or paste a URL for the **Button Link**.
7. Change the **Button label**.

   > Leave this field blank to remove the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
8. Select a **Button style**: either **Solid**, **Outline**, or **Text**.

   > Click on the **Multi-column** section to find the color options for buttons.
9. Click **Save**.

</details>

### Add headings and button

***

For all column block types, add **headings**, **text**, and **buttons**. You can change the **text size, max width of text**, and **button style**.

`Click Column block to find settings`

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main heading.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text for the column block heading. We recommend using a short title.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading: <strong>Small, Medium,</strong> <strong>Large,</strong> or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to show beneath the heading.</td></tr><tr><td><mark style="color:blue;">Text width</mark></td><td>Set the maximum width of heading text as a percentage of the window width on a desktop.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the font size of the text: <strong>Small, Regular,</strong> <strong>Large,</strong> or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the button style to <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

### Add image

***

Upload an image to display a the top of the column.

`Click Image with text column block to find settings`

<table><thead><tr><th width="238">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required dimensions. We recommend using the same shape and size of images for multiple columns with images.</td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the width of the image between <strong>50</strong> and <strong>100</strong> percent of the column width.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of your image to <strong>Square (1:1)</strong>, <strong>Landscape (3:2)</strong>, or <strong>Portrait (2:3)</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Apply circle crop to image</mark></td><td>Choose to crop all images to appear as circles. This setting applies only when the Image aspect ratio is set to Square.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image <strong>Above text</strong> or <strong>Below text</strong></td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>Enter a URL or page to turn the image into a clickable link.</td></tr><tr><td><mark style="color:blue;">Small caption</mark></td><td>Enter text to show below the image.</td></tr></tbody></table>

### Add icon

***

Select an icon to display a the top of the column.

`Click Image with icon column block to find settings`

<table><thead><tr><th width="177">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon name</mark></td><td>Select from 30+ icons to show in the column.</td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Increase or decrease the width of the icon for desktop: between <em>50</em> to <em>100</em> percent of the width of the column. screens.</td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Increase or decrease the width of the icon for mobile: between <em>50</em> to <em>100</em> percent of the width of the column. screens.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon to show in the column. We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</td></tr></tbody></table>

## Change column alignment

***

Adjust the alignment and position of the headings and text within all columns.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Multi-column** section to open the section settings.
2. Set the **Content vertical alignment** and **Column alignment**.
3. Set the **Content background padding**: Applies to blocks when "Show background behind columns" is enabled.

</details>

`Click section to find settings`

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content vertical alignment</mark></td><td>Position content within all column blocks towards the <strong>Top</strong>, <strong>Center</strong>, or <strong>Bottom</strong>.</td></tr><tr><td><mark style="color:blue;">Content background padding</mark></td><td>Change the amount of space around the content within column blocks. Select either <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.<br><br>This option applies to blocks when <strong>Show background behind columns</strong> is enabled in the <strong>Color</strong> settings.</td></tr></tbody></table>

## Change section layout

***

You can customize the **Desktop** and **mobile layout** of the column blocks, including the **number of columns**, **column spacing**, and **row spacing**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Multi-column** section to open the settings.
2. Change the **Number of columns** to display **`1 - 6`** columns for Desktop and **`1 - 2`** for Mobile.
3. Change the **Column spacing** to set the maximum pixel width (**`4 - 48`** px) between the left and right edges of columns.
4. Change the **row spacing** to set the maximum pixel width (**`4 - 48`** px) between the bottom and top of columns.
5. Click **Save**.

</details>

`Click section to find settings`

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns</mark></td><td>Display <strong>1</strong> to <strong>6</strong> columns per row on desktop screens.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Change the maximum amount of horizontal space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Row spacing</mark></td><td>Change the maximum amount of vertical space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Column alignment</mark></td><td>Align the columns to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.</td></tr></tbody></table>

#### Mobile layout

<table><thead><tr><th width="214">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable slider on mobile</mark></td><td>Display columns in a single row that can be swiped through.</td></tr><tr><td><mark style="color:blue;">Number of columns</mark></td><td>Display <strong>1</strong> or <strong>2</strong> columns per row on mobile screens.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Change the maximum amount of horizontal space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Row spacing</mark></td><td>Change the maximum amount of vertical space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Column alignment</mark></td><td>Align the columns to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.</td></tr></tbody></table>

## Section header

***

Add a **heading** as the section title and change the **heading size** and **alignment**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Multi-column** section to open the section settings.
2. Change the **Heading** text as a title for your section.

   > Delete the text in this field to remove the heading.
3. Enter **Subheading** text to display one or a few sentences below the **Heading**.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
4. Select the **Alignment** for the **Heading** and **Subheading**. Either *Heading and text left*, *Heading and text center*, or *Heading center, text left*.
5. Set the **Heading size** to **Small**, **Medium**, or **Large**.
6. Click **Save**.

</details>

`Click section to find settings`

<table><thead><tr><th width="157">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Set the heading text to Small, Medium, or Large.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Subheading size</mark></td><td>Set the subheading text to Small, Medium, or Large.</td></tr><tr><td><mark style="color:blue;">Heading alignment</mark></td><td>Position heading text to the Left or Center above row list.</td></tr></tbody></table>

## Section colors

***

Select colors for the section **Background**, **Text**, **Buttons**, and **Solid button text**.

`Click to find settings`

<table><thead><tr><th width="146">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>Select the color of the section background.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter multiple lines of text.</td></tr><tr><td><mark style="color:blue;">Button</mark></td><td>Select the color of the button background.</td></tr><tr><td><mark style="color:blue;">Solid button text</mark></td><td>If the <strong>Solid</strong> button style is selected in the button block settings, select the color for the button text.</td></tr></tbody></table>

***

> **Related links**
>
> [Gallery carousel](https://help.fluorescent.co/stiletto/sections/theme-sections/gallery-carousel)\
> [Grid](https://help.fluorescent.co/stiletto/sections/theme-sections/grid)\
> [Image with text](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text)