> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-sections/multicolumn.md).
# Multicolumn
The Multicolumn Section is ideal for displaying multiple items side by side — such as features, services, or highlights — in a clean, flexible layout.
To customize the Multicolumn in our theme please follow the steps:
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section**
2. Locate **Multicolumn**
3. **Save**
{% endhint %}
## Section Settings
#### **Section Header**
* **Show “Section header”** – Enable or disable the title and description area.
* **Heading / Description** – Add your section title and short text.
* **Text alignment** – Align text to the left, center, or right.
* **Show button** – Enable a button for linking to another page.
* **Text button** – Customize the button label.
***
#### **General Settings**
* **Layout** – Choose the section layout style.
* **Hover effect** – Select an image hover animation (e.g. *Zoom*).
* **Background section** – Add a background image for the section.
* **Color scheme** – Apply a color preset.
* **Image ratio / Custom ratio** – Adjust image proportions (e.g. *3:4*, *21:9*).
* **Border radius image** – Round the image corners.
* **Column alignment** – Set column content alignment.
* **Show border separate** – Add dividers between columns.
* **Button label / link / type** – Customize and link your button.
***
#### **Mobile Layout**
* **Remove default space between sections** – Reduce spacing for compact mobile design.
***
#### **Section Padding**
Adjust space around the section:
* **Padding top** – Distance from the section above.
* **Padding bottom** – Distance from the section below.
***
💡 **Tip:**\
Use the Multicolumn section to highlight product benefits, company values, or service features — clear visuals and short text work best.
## Block Settings
Each **Column block** represents one item inside the **Multicolumn Section**.\
You can use it to showcase a product, service, or key feature with image, text, and button.
#### **Layout Settings**
* **Banner width (Desktop / Tablets / Mobile)** – Control how much space the column takes on each device.
* **Custom width / Max width** – Set a fixed width (in px) for more precise layout control.
***
#### **Content**
* **Image / Show image** – Add and display an image for the column.
* **Title / Description** – Enter a short heading and supporting text.
* **Button label / Link / Type** – Add a call-to-action button and choose its style (*Primary* or *Secondary*).
* **Button open link in** – Choose to open the link in the current tab or a new one.
***
💡 **Tip:**\
Combine multiple **Column blocks** within the Multicolumn section to create a professional grid layout that highlights your brand’s best features or offers.
