Multicolumn

Showcase multiple content types —such as banners, products, images, and videos—in a responsive grid or slider with complete control over columns, alignment, and animation for a seamless, engaging experience on any device.

Last updated About 1 month ago

Overview

The Multicolumn section provides a flexible, responsive grid layout that adjusts beautifully across all devices. It lets you combine different content types — such as banners, products, images, and more — into a clean, visually striking grid or slider. With powerful layout and responsive settings, this section ensures your content remains organized, engaging, and easy to navigate anywhere.

⚠️ Important: Use the Multicolumn section to highlight collections, features, or visually rich content. Its adaptive grid and slideshow options make it ideal for capturing attention and presenting information in a structured, polished way across every device.

Key components and functionality

Section introduction

The Multicolumn section lets you build dynamic, multi-block layouts in a single area, each block living in its own column. You have full control over column count per device type, vertical alignment, and section interactivity. This layout can stay static or become an interactive slider, adapting to your content strategy.

Content alignment

This setting determines the vertical placement of content within each column and enhances overall readability.

  1. Top aligns content at the upper edge of the column.

  2. Middle centers content vertically inside the column.

  3. Bottom places content at the lower edge.

Column count controls

These settings let you customize how many columns are shown for each device type, giving you detailed control over your section’s appearance.

  1. Desktop column count

    1. Select from 1 to 12 columns.

    2. The default is 4.

  2. Tablet column count

    1. Select from 0 to 8 columns.

    2. The default is 0.

      1. Setting 0 allows the section to use the desktop column setting for tablets automatically.

  3. Mobile column count

    1. Select from 1 to 4 columns.

    2. The default is 1.

Desktop/mobile layout

Choose between a slideshow and a grid on mobile and desktop screens, depending on your content and layout needs.

  1. Default is grid on desktop, slideshow on mobile.

Slideshow settings

Transform your column layout into a customizable, interactive slideshow for even more engagement and clarity on any device. Settings only show up if either desktop or mobile layout is set to slideshow.

Animation style

Control the visual effect for slide transitions to match your brand’s presentation style.

  1. Default provides a standard slide motion.

  2. Fade offers a smooth fade-in/fade-out transition.

  3. The default is default.

Animation speed

Fine-tune slide transition duration so your content feels just right.

  1. Adjustable from 0.1 to 5 seconds.

  2. The default is 0.8 s.

Autoplay delay

Decide how long each slide stays on screen when autoplay is enabled.

  1. Range is 0 to 10 seconds.

  2. The default is 4 s.

  3. Setting to 0 disables the autoplay feature.

Autoplay slideshow

Enable this to have slides advance automatically, great for passive browsing or highlighting key features.

  1. The default is disabled.

Loop slides

Automatically cycle back to the first slide after the last, keeping the experience continuous.

  1. The default is disabled.

Pagination style

Select how users monitor their progress through the slideshow.

  1. Dynamic for adaptive dots.

  2. Fraction for “x/y” numeric display.

  3. Progress bar for a linear progress look.

  4. Scrollbar for draggable navigation.

Show navigation

Decide if arrow buttons are displayed to let users manually navigate through slides.

  1. Default is enabled.

Show pagination

Display an indicator (like dots or progress bars) to show users their position in the slideshow.

Supported block types

The Multicolumn section supports a wide range of block types, giving you full creative freedom to combine content and visuals for an engaging, flexible layout. You can mix and match any of the following blocks to tell your story, promote products, or showcase media.

  1. Banner
    1.1. Displays promotional or informational banners with background images, videos, or overlays.
    1.2. Ideal for drawing attention to sales, announcements, or seasonal content.

  2. Blog post
    2.1. Highlights selected articles or posts from your store’s blog.
    2.2. Perfect for keeping your content strategy visible within key pages.

  3. Breadcrumbs
    3.1. Adds a navigation trail to help users track their path and easily return to previous pages.
    3.2. Enhances user experience and site structure clarity.

  4. Contact form
    4.1. Lets users send inquiries or messages directly from the section.
    4.2. Supports custom fields and responsive layouts for seamless communication.

  5. Heading
    5.1. Adds titles or section headers to organize and introduce groups of content.
    5.2. Can be styled to match your site’s typography settings for consistency.

  6. Image
    6.1. Displays a single image with optional link and caption.
    6.2. Useful for brand visuals, product features, or lifestyle imagery.

  7. Product
    7.1. Showcases individual products from your catalog.
    7.2. Includes pricing, title, and link to product pages for direct engagement.

  8. Rich text
    8.1. Adds formatted text for storytelling, descriptions, or instructions.
    8.2. Supports headings, lists, and links for full content flexibility.

  9. Testimonial
    9.1. Displays customer quotes, names, and optional star ratings.
    9.2. Builds trust and social proof directly within your layout.

  10. Video
    10.1. Embeds video content to create motion and engagement.
    10.2. Supports autoplay, looping, and custom aspect ratios.

💡 Tip: Combine blocks like Product, Image, and Testimonial for dynamic storytelling, or mix Banner and Video for promotional campaigns that stand out across all devices.

Usage notes

⚠️ Important: Carefully adjust column settings for each device type to maintain visual clarity and optimal performance. Enable the slideshow function for a more interactive, touch-friendly experience on mobile devices.

  1. Set different column counts for desktop, tablet, and mobile for the best multi-device presentation.

  2. Use navigation, pagination, and preview features when displaying multiple columns in slider mode for easier interaction.

  3. Provide alt text for every image and ensure navigation controls are accessible to all users.

  4. Test the Multicolumn section at various screen sizes to guarantee a line-up of content and smooth functionality.

  5. Use concise, direct copy and optimized images for faster loading and clearer communication.

💡 Tip: Blend grids, stretch alignment, and slideshow settings for rich, beautiful content areas that are impactful and easy to use.