> 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/multirow.md). # Multirow {% embed url="" %} The **Multirow** section allows you to create multiple image-and-content rows within a single section. Each row can showcase a product, collection, blog post, or promotional message using an image, caption, heading, description, and optional button. The image and content placement can be alternated between rows to create an engaging, editorial-style layout. ## Adding the Multirow Section {% hint style="success" %} **Steps:** 1. Open **Online Store → Themes → Customize**. 2. Navigate to the page or template where you want to add the section. 3. Click **Add Section**. 4. Select **Multirow**. 5. Use **Add Row** to create individual content rows. 6. Configure the section settings and customize each row. 7. Add multiple rows as required. 8. Preview the section on desktop and mobile. 9. Click **Save** to publish your changes. {% endhint %} {% hint style="warning" %} **Recommendation Size**\ Banner image size: 750x500 {% endhint %}

Setting	Description
Image height	Controls the height of the images displayed within each row. Adapt to image — Uses the original image proportions. Small — Displays a shorter image area. Medium — Uses a balanced image height. Large — Displays a taller image area. For visual guide show screenshot
Desktop image width	Controls the width allocated to the image on desktop devices. Small Medium Large The image width is automatically optimized for mobile layouts. For visual guide show screenshot
Heading size	Controls the size of headings displayed within the rows. Small Medium Large
Description style	Controls the typography style used for the row description. Body Subtitle Uppercase
Desktop content position	Controls the vertical position of the text content within the row. Top — Aligns content toward the top. Middle — Centers content vertically. Bottom — Aligns content toward the bottom. For visual guide show screenshot
Desktop content alignment	Controls the horizontal alignment of the content. Left Center Right For visual guide show screenshot
Desktop image placement	Controls where the image appears in relation to the content. Alternate from left Alternate from right Aligned left Aligned right For visual guide show screenshot
Row gap	Controls the amount of spacing between individual rows. Increase the value to create more separation between content rows. For visual guide show screenshot
Color scheme	Select the color scheme used throughout the Multirow section. 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	Controls how the text content is aligned on mobile devices. Left Center Right

## Section Settings Screenshot #### Image height

#### Desktop image width

#### Desktop content position

#### Desktop content alignment

#### Desktop image placement

#### Row gap

## Add Row You can create multiple storytelling rows within the same Multirow section. Each **Row** block contains the image and content for one individual row. To add row to the Multirow section, click on the 'Add row'. There are many options available , as you can see in the below points and screenshot.

Block	Description
Image	Select the primary image displayed in the row. Use a high-quality image that visually represents the content or story being presented. For visual guide show screenshot
Content background image	Add an optional background image behind the text content area. This can be used to create a more visually rich or decorative content panel. For visual guide show screenshot
Caption	Add a short label above the main heading.
Heading	Add the main title for the row. For visual guide show screenshot
Text	Add supporting information below the heading.
Button label	Add an optional CTA button. Leave the field blank if you do not want to display a button.
Button link	Add the destination URL for the button.
Open this link in a new window	Enable this option to open the linked page in a new browser tab.
Button style	Choose the appearance of the CTA button. Link Outline button Solid button
Color scheme	Select the color scheme specifically for the row content. You have the option to modify the background and foreground colors of a multirow card using the provided color scheme. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5

## Block Settings Screenshot #### Image

#### Content background image

#### Heading

## Best Practices * Use high-quality and visually consistent images across all Row blocks. * Keep image dimensions and aspect ratios consistent for a balanced layout. * Use clear and concise captions to introduce each row. * Keep headings short, descriptive, and easy to scan. * Use brief, focused descriptions instead of long paragraphs. * Maintain a consistent content structure across all rows. * Use alternating image placement to create a visually engaging storytelling flow. * Use relevant content background images without reducing text readability. * Add clear and relevant CTA labels such as **Shop Collection**, **Explore More**, or **Learn More**. * Link each button to the most relevant product, collection, page, or other destination. * Avoid adding too many rows; use only the rows necessary to communicate your content. * Maintain consistent spacing, typography, button styles, and color schemes across all rows. * Optimize images before uploading to help maintain good page performance. * Check image cropping and content positioning on both desktop and mobile. * Test all buttons and links to ensure they lead to the correct destination.