# 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="/files/QsIP7wffD9wFnxII1KOT" alt=""> <figure><img src="/files/EjgOebeME0qPSh3GvPYO" 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](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% 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](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Top divider](/stiletto/sections/theme-sections/using-sections.md#section-top-divider) | [Animation](/stiletto/sections/theme-sections/using-sections.md#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](/stiletto/sections/theme-sections/gallery-carousel.md)\
> [Grid](/stiletto/sections/theme-sections/grid.md)\
> [Image with text](/stiletto/sections/theme-sections/image-with-text.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/multi-column.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.