# Multicolumn with icon

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(35)_jr5dM6tE.jpg)

You can utilize a multicolumn section to showcase your store's services and other details.

## How to add a Multicolumn with icon section to your Shopify store

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Multicolumn with icon** section
3. Make necessary changes
4. **Save.**

</Hint>

## How to edit a Multicolumn with icon section

### Section settings

#### Section header

Customize the text and alignment to ensure the section effectively communicates your message and encourages engagement.

* **Layout:** Choose the layout for desktop view (Vertical/Standing column)

<Tabs>
<Tab title="Vertical">

![image](https://docs-assets.foxecom.app/hyper-theme/image_IH0gSBJ9.png)

</Tab>

<Tab title="Standing column">

![image](https://docs-assets.foxecom.app/hyper-theme/image_xa9YRtC2.png)

</Tab>
</Tabs>

<Expandable title="See settings">

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Description size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</Expandable>

#### Card settings

Select how the cards show:

* **Content alignment**:&#x20;

<Tabs>
<Tab title="Left">

![image](https://docs-assets.foxecom.app/hyper-theme/image_2hJqjcHl.png)

</Tab>

<Tab title="Center">

![image](https://docs-assets.foxecom.app/hyper-theme/image_UwyY87v0.png)

</Tab>

<Tab title="Right">

![image](https://docs-assets.foxecom.app/hyper-theme/image_fXoRooYz.png)

</Tab>
</Tabs>

* **Image position:**

<Tabs>
<Tab title="Top">

![image](https://docs-assets.foxecom.app/hyper-theme/image_taStr6vl.png)

</Tab>

<Tab title="Left">

![image](https://docs-assets.foxecom.app/hyper-theme/image_WoDf7fgj.png)

</Tab>
</Tabs>

* **Icon color**:&#x20;

![image](https://docs-assets.foxecom.app/hyper-theme/image_KU5TxQZG.png)

#### Grid settings

Set the **number of columns on desktop** (between 2-6 columns) and the gap between them.&#x20;

You can also enable divider between columns.

![image](https://docs-assets.foxecom.app/hyper-theme/image_Rfqvtug9.png)

#### Mobile layout

Enable swipe on mobile or display as grid.

<Tabs>
<Tab title="Grid">

![image](https://docs-assets.foxecom.app/hyper-theme/image_GhcHCehO.png)

</Tab>

<Tab title="Enable swipe on mobile">

![image](https://docs-assets.foxecom.app/hyper-theme/image_B544cmbg.png)

</Tab>
</Tabs>

### Block settings

You can add multiple columns to the section.&#x20;

Once added, you can configure individual columns as follows:

* Choose an appropriate icon from the available options or upload an image.
* Maximum width: Set maximum with of the icon/image for mobile and desktop view separately.
* Card content

![image](https://docs-assets.foxecom.app/hyper-theme/image_rQRcZZVj.png)