# Multicolumn with icons

The Multicolumn with Icons section displays multiple columns with text blocks accompanied by relevant icons, making it ideal for highlighting your store’s values, explaining business processes, or listing key product features.

<figure><img src="/files/lJF9tvLnvkL8xLwhUbqi" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Multicolumn with icons** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/QvdOGj36Xjjm24zTCzSr" alt=""><figcaption></figcaption></figure>

### **2, Section settings:**

The **Section settings** control the color scheme, column arrangement, icon placement, and layout for mobile.

* **Secondary background:**&#x20;

{% tabs %}
{% tab title="None" %}
Applies the **Color scheme** to both the section background and content blocks.&#x20;
{% endtab %}

{% tab title="Show as column background" %}
Applies the **Color scheme** only to the column blocks, leaving the section background unchanged.
{% endtab %}
{% endtabs %}

* **Grid settings**

> - **Number of columns on desktop**: Adjust the number of columns displayed per row on desktop, with options from **2 to 4 columns**.
> - **Desktop icon placement**: Set the position of icons & content within the columns: **Top left, Top center** or **Left**.

* **Mobile layout**:

> - **Number of columns on mobile**: Choose the number of columns displayed per row on mobile, with options for **1 or 2 columns**.
> - **Mobile icon placement**: Adjust the icon & content position for mobile, placing it either **Top left, Top center** or **Left**.

### 3, **Icon block settings:**

Each column in the **Multicolumn with icons** section contains an **Icon block**, where you can select specific icons, add headings, and include descriptions and buttons.

* **Icon**: Choose an icon that represents the content of each block from a list of over 40 icons provided by Poetic Theme.
* **Icon size**: Control the size of the icons in the blocks.
* **Alternative icon/image**: Upload a custom icon or image to replace the default icon. If both default and custom icons are set, the uploaded image will override the default.
* **Heading and description**: Enter a heading for the block and adjust its size to suit the design, providing a clear title for each column. Add additional text beneath the heading to provide further information or context.
* **Button**: Optionally, add a button to guide customers to another page or destination.


---

# 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.byinspiredlabs.com/section/multicolumn-with-icons.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.
