> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/media/multirow.md).

# Multirow

The Multirow section displays multiple rows of image-with-text content stacked vertically. Each row can have an image or video alongside text content, and you can control how images alternate between left and right sides or align consistently. This section is perfect for creating story-telling layouts, showcasing multiple products or features, or building engaging content sections that guide visitors through your message step by step.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FjDqCLMd527WJrHPp0Yr8%2FCapture%20d'%C3%A9cran%202026-02-20%20172111.png?alt=media&amp;token=74658086-d4fe-4cbe-8105-71b9b6922b54" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Multirow**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Layout

* **Display**: Choose how images are arranged across rows. Options include Alternate from left (first row image on left, second on right, and so on), Alternate from right (first row image on right, second on left, and so on), Aligned left (all images on the left), or Aligned right (all images on the right).
* **Full width**: When enabled, the multirow section spans the entire width of the browser window instead of being contained within the page margins.
* **Remove space between image and content**: When enabled, removes the gap between images and text content in each row, creating a seamless connection.
* **Enable custom border and layout settings**: When enabled, you can customize the border width, border radius, and spacing specifically for images and content in this section, overriding the global theme settings.

#### Custom border and layout settings

These settings only appear when "Enable custom border and layout settings" is enabled.

* **Image border width**: Controls the thickness of the border around images. Set to 0 to remove borders completely.
* **Image border radius**: Controls how rounded the corners of images are. Higher values create more rounded corners.
* **Content border width**: Controls the thickness of the border around text content areas. Set to 0 to remove borders completely.
* **Content border radius**: Controls how rounded the corners of text content areas are. Higher values create more rounded corners.
* **Vertical space**: Adjusts the space between rows vertically. Set to 0 to remove spacing between rows.
* **Horizontal space**: Adjusts the space between images and content horizontally. This setting only appears when custom borders are enabled and gapless grid is disabled.

#### Media

* **Height**: Choose how tall images appear across all rows. Options include Auto (maintains the original image proportions), Small (S), Medium (M), or Large (L) for fixed heights.
* **Width**: Controls how wide images appear on desktop screens across all rows. Options include Small (S), Medium (M), or Large (L). This affects how much space images take up relative to text content.

#### Content

* **Position**: Choose where text content is positioned vertically relative to images. Options include Top, Middle, or Bottom.
* **Alignment**: Controls how text content is aligned horizontally within its container. Options include Left, Center, or Right.
* **Mobile alignment**: Controls how text content is aligned on mobile devices. Options include Left, Center, or Right.
* **Enable sticky content on desktop**: When enabled, text content stays visible as visitors scroll, creating a fixed position effect that keeps content in view.

#### Colors

* **Color scheme**: Choose a color scheme for the entire section. This affects the background and text colors.
* **Container color scheme**: Choose a color scheme specifically for each row's image and text content containers. This can be different from the section's main color scheme.

#### Padding

* **Top**: Adds space above the multirow section to create visual separation from other content.
* **Bottom**: Adds space below the multirow section to create visual separation from other content.

#### Block: Image Row

Each Image Row block represents one row in your multirow section. You can add multiple rows to build your content.

**Media type**

* **Media type**: Choose whether the row displays an Image or Video.

**Image**

* **Image**: Upload the image for this row.
* **Image link**: Optional URL that makes the image clickable. When set, clicking the image navigates to the specified link.

**Video**

* **Video source**: Choose where the video comes from. Options include Shopify hosted video (upload a video file) or URL (YouTube or Vimeo) (use an external video URL).
* **Video file**: Upload a video file from your Shopify media library. This setting only appears when video source is set to "Shopify hosted video".
* **Video URL**: Enter the URL of a YouTube or Vimeo video. This setting only appears when video source is set to "URL (YouTube or Vimeo)".
* **Cover image**: Upload an image to use as the video thumbnail/poster. This is especially useful for URL videos. This setting only appears when video source is set to "URL (YouTube or Vimeo)".
* **Video description**: Describe the video content for accessibility purposes. This helps screen readers understand what the video contains.
* **Enable video looping**: When enabled, the video automatically restarts when it reaches the end.
* **Mute video**: When enabled, the video plays without sound by default.

**Content blocks**

Each Image Row can contain multiple content blocks to build your text content:

* **Caption**: Adds a small caption or tagline.
* **Heading Text**: Adds a title or heading.
* **Text**: Adds paragraph or body text content.
* **Buttons group**: Adds one or two call-to-action buttons.
* **Button**: Adds a single button.
* **Rich text**: Adds formatted text content.
* **Icon with text**: Adds an icon alongside text content.
* **Running text**: Adds animated scrolling text.
* **Product block**: Displays product information.
* **Countdown**: Adds a countdown timer.
* **Scroll reveal text**: Adds text that reveals as you scroll.

***

### Tips

* Use the alternate display options to create visual rhythm and guide visitors' eyes down the page. Alternating images creates a more dynamic, engaging layout than aligned images.
* The aligned display options work well when you want a consistent, structured look. All images on one side creates a strong visual line.
* Use the sticky content feature for long rows, as it keeps text visible while visitors scroll through the section.
* The custom border settings are useful for creating unique card-style designs, but remember they override your global theme settings.
* Test your layout on mobile devices, as images always appear above text on smaller screens regardless of desktop placement.
* When using image links, ensure the linked content is relevant and provides value to visitors. Broken or irrelevant links hurt user experience.