> 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/other/multi-content-section.md). # Multi Content Section The Multi-Content Section lets you create a flexible grid of different content types on your page. You can mix images, videos, text blocks, products, collections, and blog articles in one section. This makes it perfect for showcasing featured products, creating visual galleries, highlighting collections, or building editorial-style layouts. The section automatically adapts to different screen sizes and can display as a grid or slider on mobile devices.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Multi-Content Section**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Heading**: The main title that appears above your content grid. Leave blank to hide the heading. * **Heading size**: Controls how large the heading text appears, from extra small to extra extra large. * **Underline**: Adds a decorative underline beneath the heading when enabled. * **Text position**: Aligns the heading text to the left, center, or right. #### Layout * **Columns**: Sets how many items appear side by side on desktop screens (1 to 6 columns). * **Grid gap**: Controls the spacing between grid items on desktop in pixels. * **Full width**: When enabled, the section stretches across the entire browser width instead of staying within the page margins. * **Color scheme**: Choose a color palette that matches your brand and affects text and background colors. #### Desktop slider * **Desktop slider**: When enabled, displays your content as a sliding carousel on desktop instead of a static grid. Useful when you have more items than columns. * **Slider buttons position**: Choose whether navigation buttons appear above the grid or overlaid on top of the content. * **Progress bar**: Shows a visual progress indicator at the top or bottom of the slider to help visitors see their position. #### Mobile layout * **Columns on mobile**: Choose 1 or 2 columns for mobile devices. * **Mobile grid gap**: Controls the spacing between grid items on mobile devices in pixels. * **Mobile layout**: Choose between a grid view or slider view for mobile devices. * **Progress bar on mobile**: Shows a progress indicator for the mobile slider when enabled. #### Cards settings * **Image aspect ratio**: Sets the shape of all cards - choose landscape (wide), portrait (tall), tall (very tall), or square. * **Border width**: Adds a border around each card. Set to 0 to remove borders. * **Border radius**: Rounds the corners of each card. Set to 0 for sharp corners. * **Use global content settings**: When enabled, all blocks use the same content position and alignment settings. When disabled, each block can have its own settings. * **Group the header and button**: When enabled, keeps the heading and button together as one group. When disabled, you can position them separately. * **Content position**: Controls where content appears vertically within each card (top, center, or bottom). * **Content alignment**: Aligns text and content horizontally (left, center, or right). * **Heading position**: Sets the position of headings when content grouping is disabled. * **Button position**: Sets the position of buttons when content grouping is disabled. * **Card heading size**: Controls the size of headings within each card on desktop. * **Card heading size (mobile)**: Controls the size of headings within each card on mobile devices. * **Enable media hover animation**: Adds a subtle animation effect when visitors hover over cards with images or videos. #### Blocks: #### Image Block * **Image**: Upload the image you want to display. * **Heading**: Text that appears over the image. * **Link**: The URL where visitors go when they click the image or button. * **Button label**: Text for the button. Leave blank to make the entire image clickable. * **Overlay color**: The color of the semi-transparent layer that appears over the image to improve text readability. * **Overlay opacity**: Controls how dark or light the overlay appears (0% is transparent, 100% is fully opaque). #### Video Block * **Video source**: Choose between uploading your own video file or using a YouTube/Vimeo URL. * **Video file**: Upload a video file from your computer. * **Video URL**: Paste a YouTube or Vimeo video link. * **Cover image**: A still image that displays before the video plays. * **Mute video**: Automatically mutes video audio when enabled. * **Overlay color**: The color of the semi-transparent layer over the video. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Text Block * **Heading**: The main heading for your text block. * **Content**: The main text content. You can format it with bold, italic, links, and more. * **Font size**: Controls the size of the content text on desktop. * **Font size (mobile)**: Controls the size of the content text on mobile devices. * **Button label**: Text that appears on the button. * **Button link**: The URL where the button leads. * **Button style**: Choose how the button looks on desktop (solid, outline, transparent, or link style). * **Button style (mobile)**: Choose how the button looks on mobile devices. * **Overlay color**: The color of the semi-transparent layer behind the text. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Product Block * **Product**: Select which product to display from your store. * **Show title**: Displays the product name when enabled. * **Show price**: Displays the product price when enabled. * **Price size**: Controls how large the price appears on desktop. * **Price size (mobile)**: Controls how large the price appears on mobile. * **Button label**: Text for the button. Leave blank to make the entire product card clickable. * **Overlay color**: The color of the semi-transparent layer over the product image. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Collection Block * **Collection**: Select which collection to display from your store. * **Show title**: Displays the collection name when enabled. * **Button label**: Text for the button. Leave blank to make the entire collection card clickable. * **Overlay color**: The color of the semi-transparent layer over the collection image. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Article/Blog Block * **Article**: Select a specific blog article to display. * **Blog**: Select a blog, and the latest article will be shown. * **Blog image**: Upload a custom image to use instead of the article's featured image. * **Show title**: Displays the article title when enabled. * **Button label**: Text for the button. Leave blank to make the entire article card clickable. * **Overlay color**: The color of the semi-transparent layer over the article image. * **Overlay opacity**: Controls how dark or light the overlay appears. *** ### Presets * **Multi-Content section**: A starter preset with a mix of different content types including images, text, products, collections, articles, and videos. * **Product showcase - Grid/Slider**: Pre-configured for displaying multiple products in a grid or slider layout. * **Collection gallery - Grid/Slider**: Optimized for showcasing your collections with images and titles. * **Blog - Grid/Slider**: Designed for displaying blog articles in an attractive grid or slider format. * **Gallery - Grid/Slider**: A simple preset focused on displaying multiple images in a gallery-style layout. *** ### Tips * Use overlay colors and opacity to ensure text remains readable over images. Dark overlays with 30-50% opacity work well for light text. * When using the desktop slider, enable the progress bar to help visitors navigate through many items. * For mobile, the slider layout works great when you have more than 2-3 items. * If you want all cards to have consistent positioning, enable "Use global content settings" and set your preferences once. * For image blocks, leaving the button label blank makes the entire image clickable, which is perfect for simple image links.