# Multicolumn with icon

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 style="success" %} Steps 1. In the theme editor (**Customize**), click **Add section** 2. Locate **Multicolumn with icon** section 3. Make necessary changes 4. **Save.** {% endhint %} ## 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" %}

{% endtab %} {% tab title="Standing column" %}

{% endtab %} {% endtabs %}

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.

#### Card settings Select how the cards show: * **Content alignment**: {% tabs %} {% tab title="Left" %}

{% endtab %} {% tab title="Center" %}

{% endtab %} {% tab title="Right" %}

{% endtab %} {% endtabs %} * **Image position:** {% tabs %} {% tab title="Top" %}

{% endtab %} {% tab title="Left" %}

{% endtab %} {% endtabs %} * **Icon color**:

#### Grid settings Set the **number of columns on desktop** (between 2-6 columns) and the gap between them. You can also enable divider between columns.

#### Mobile layout Enable swipe on mobile or display as grid. {% tabs %} {% tab title="Grid" %}

{% endtab %} {% tab title="Enable swipe on mobile" %}

{% endtab %} {% endtabs %} ### Block settings You can add multiple columns to the section. 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

***