> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/cello-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/cello-documentation/sections/multicolumn.md). # Multicolumn {% embed url="" %} The **Multicolumn** section allows you to display multiple content columns in a structured grid. Each column can include an image, heading, description, and optional button. It is useful for showcasing: * Promotional offers * Product categories * Key features * Benefits * Services * Marketing highlights {% hint style="warning" %} **Recommendation Size**\ Multicolumn banner image size: 356x278 {% endhint %} ## How to Add Multicolumn Section {% hint style="success" %} **Steps** 1. From your Shopify Admin, go to **Online Store → Themes**. 2. Click **Customize** on your Cello theme. 3. Open the page where you want to add the Multicolumn section. 4. Click **Add section**. 5. Select **Multicolumn** from the available sections. 6. Configure the section settings such as **Heading, Description, Image Width, Columns, Layout, and Spacing**. 7. Click **Add Column** to add content to the section. 8. Add an **Image, Subheading, Heading, Description, and Button** for each column as required. 9. Repeat the steps to add additional columns. 10. Adjust the **Desktop and Mobile Layout** according to your requirements. 11. Click **Save** to publish your changes. {% endhint %}

Setting	Description
Heading	Add the main heading for the Multicolumn section. For visual guide show screenshot
Heading size	Choose the size of the section heading. Small Medium Large
Description	Add supporting text below the heading. Use a short description to explain the content or promotion. For visual guide show screenshot
Description style	Customization of the "Description style" in the Multicolumn section is as follows: Body — Standard text style. Subtitle — More prominent supporting text. Uppercase
Image width	Choose how wide the column images should appear. One-third width of column Half width of column Full width of column For visual guide show screenshot
Image ratio	Choose the aspect ratio of the column images. Adapt to image Portrait Square Circle For visual guide show screenshot
Number of columns on desktop	Set how many columns are displayed on desktop devices. You can show a minimum of “3” and a maximum of “5” columns.
Enable carousel on desktop	Enable this option to display the columns as a carousel on desktop. This is useful when you have more columns than you want to display at once.
Image alignment	Choose the alignment of the image within the column. Left Center For visual guide show screenshot Note: This setting does not apply when Image width is set to Full width of column.
Content alignment	Choose how the text and button content inside each column is aligned. Left Center For visual guide show screenshot
Content position	Choose where the column content is displayed in relation to the image. Above image Below image For visual guide show screenshot
Button label	Enter the text for the section-level button. Leave blank if you do not want to display a button.
Button link	Add the destination URL for the section-level button. You can link to a product, collection, page, or other URL.
"View all" style	Choose the appearance of the View all link/button. Link Outline button Solid button
Section background color scheme	Select the color scheme used for the Multicolumn section background and text. You can change the background and foreground color of a section using the color scheme. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5
Mobile layout	Number of columns on mobile Choose how many columns are displayed on mobile devices. 1 Column 2 Columns For visual guide show screenshot Enable swipe on mobile Enable this option to allow customers to swipe through the Multicolumn content on mobile devices.

## Section Settings Screenshot #### Heading

#### Image width

**Image width — One third width of column**

#### Image ratio

#### Image alignment {% hint style="danger" %} **Note:** This feature will not work when "Image width" is full width of column. {% endhint %}

#### Content alignment

#### Content position

#### Number of columns on mobile

## Add Column To add column to the Multicolumn section, click on the 'Add column'. Each column can be customized independently with its own image, text, and button.

Setting	Description
Color	Choose the background color of the individual column/card.
Enable text color	Enable this option to use a custom text color for the column content.
Text color	Select the text color used inside the column. This setting is available when Enable text color is enabled.
Image	Add an image to the column. Use high-quality images with a consistent style for a professional appearance.
Subheading	Enter a short introductory text displayed above the column heading.
Heading	Enter the main title for the column.
Description	Enter supporting content to explain the offer, product, feature, or service shown in the column.
Description style	Choose the appearance of the column description. Body Subtitle
Button label	Enter the text displayed on the column button. Leave blank to hide the button.
Button link	Add the destination URL for the column button.
Button style	Choose the appearance of the column button. Link Outline button Solid button

## ## Best Practices ✔ Use **3–5 columns** for a balanced desktop layout. ✔ Keep headings **short and clear**. ✔ Use **consistent image sizes** across columns. ✔ Keep descriptions **brief and easy to scan**. ✔ Use clear **action-based button labels**. ✔ Use **1–2 columns on mobile** for better readability. ✔ Enable **carousel or swipe** when displaying many columns. ✔ Avoid adding too much text to each column. ✔ Use contrasting colors to keep text **easy to read**. ✔ Update promotional columns regularly to keep the section fresh.