Multicolumn

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on slideshow controls settings
3. Company XYZ documentation on the banner block
4. Company XYZ documentation on the blog post block
5. Company XYZ documentation on the product block
6. Company XYZ documentation on the image block
7. Company XYZ documentation on the video block
8. Company XYZ documentation on the rich text block
9. Company XYZ documentation on the testimonial block
10. Company XYZ documentation on the contact form block
11. Company XYZ documentation on the breadcrumbs block
12. Company XYZ documentation on headers settings
13. Company XYZ documentation on section padding settings
14. Company XYZ documentation on section backgrounds settings
15. Shopify documentation on customizing sections
16. Company XYZ documentation on separators settings
17. Company XYZ documentation on visibility settings
18. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Multicolumn to create flexible mixed-content layouts in a single section. You can combine text, media, promotional content, cards, and utility blocks, then control how many columns appear on each device and whether mobile visitors see a swipeable slideshow instead of a standard grid. For a broader overview of how sections and blocks work in the theme editor, see Shopify documentation on sections and blocks

Core settings

These settings shape the overall layout before you fine-tune individual blocks. Start here to decide how dense, spacious, or interactive the section should feel.

Layout and alignment

Use content alignment to control how blocks sit within each row when they have different heights. This matters most when you mix short text blocks with taller banners, images, or videos.

Desktop, tablet, and mobile column counts define the grid for each screen size. Tablet can inherit the desktop value when left at 0, which is useful when you want fewer device-specific adjustments.

Mobile slideshow behavior

Enable Show as slideshow on mobile when the section feels too tall or crowded on smaller screens. This changes the mobile experience from a scanned grid to a swipeable sequence.

If you enable the mobile slideshow, review block order carefully. Visitors will experience the section one slide at a time rather than seeing the full layout at once.

Equal-height rows

Use Stretch content vertically when you want a cleaner, more uniform grid. Blocks will stretch to match the tallest block in the same row, which works especially well for cards, testimonials, and banners.

Leave it off if you want each block to keep its natural height.

Slideshow settings

When slideshow behavior is active, these settings control how visitors move through the content. For more detail, see the slideshow controls reference.

Animation style has the biggest visual impact. The default style keeps a more carousel-like layout, while Fade creates a one-at-a-time presentation.

Note

Fade animation forces a single-slide layout. It also disables next-slide previews and pagination styles that depend on multiple visible slides.

Autoplay, delay, looping, and pause-on-hover help you decide whether the section should feel more like a passive promo slider or a manual content gallery. Pause on hover applies only on desktop, so autoplay should still feel comfortable on touch devices.

Navigation position, navigation controls, and pagination settings help visitors understand that more content is available. Preview of next slides is useful when you want to hint at additional content, but it is less suitable for tighter or more centered layouts.

Color settings

This group lets you override the section’s text and icon colors without changing your broader theme styling. It is most useful when the section background or block mix needs different contrast to stay readable.

If individual blocks also use their own color settings, aim for a clear hierarchy. Section-level colors work best when the whole section should share a consistent tone.

Supported block types

1. Banner
2. Blog post
3. Breadcrumbs
4. Contact form
5. Heading
6. Image
7. Product
8. Rich text
9. Testimonial
10. Video

Banner

Use Banner blocks for promotions, featured messages, or visual calls to action. They support their own background media, foreground content, optional foreground image, and custom column spans.

See the Banner block for more block details.

1. Use wider spans when the banner includes both media and text.
2. Fixed aspect ratios help create a tidier grid.
3. Full-block linking styles work best when the whole banner should act as one click target.

Blog post and Product

These blocks add curated article and product cards into the layout. Both support custom spans and block-level card styling, so they work well when you want a mixed editorial and merchandising section.

See the Blog post block and Product block for setup details.

1. Keep card styles consistent when you want the section to read as one collection.
2. Use larger spans selectively to feature a single item.
3. In mobile slideshow mode, block order matters more than block width.

Image and Video

Use media blocks to add visual anchors between text-heavy or card-heavy content. Both support aspect ratios, captions, overlays, alignment controls, and custom spans.

See the Image block and Video block for media-specific options.

1. Match aspect ratios across nearby media blocks for a cleaner layout.
2. Use overlays only when they improve readability or consistency.
3. Add a poster image when a hosted video needs a stronger first frame.

Rich text and Heading

These blocks help structure longer layouts and introduce groups of content. Use them to break up dense grids, add short editorial content, or place focused calls to action within the section.

See the Rich text block for content formatting options.

1. Use Heading blocks to create internal structure in longer sections.
2. Keep button usage selective so actions do not compete.
3. Avoid using multiple H1 headings on the same page.

Testimonial

Testimonial blocks combine quote content with optional product context and optional supporting media. They work well when you want social proof inside a mixed promotional layout.

See the Testimonial block for quote and media settings.

1. Keep quotes short so the block stays balanced.
2. Link a related product when the testimonial supports a specific item.
3. If you add video, keep nearby blocks visually simpler.

Contact form and Breadcrumbs

These utility blocks let Multicolumn handle more than promotional content. Use Contact form for flexible landing page layouts, and Breadcrumbs when you need navigation context inside a custom composition.

See the Contact form block and Breadcrumbs block for utility block options.

1. Give functional blocks enough width to stay easy to use.
2. Place breadcrumbs near the start of the content flow.
3. Avoid mixing too many utility blocks into a small section.

Standard section settings

Header settings

Use the shared Header settings to introduce the section with a heading, caption, supporting text, icon, and optional button. In Multicolumn, this is especially helpful when the layout mixes several content types and needs a clear intro or action.

Padding settings

Use the shared Padding settings to control spacing above and below the section. Increase spacing when the layout needs more breathing room, and reduce it when the page should feel denser.

Section background settings

Use the shared Section background settings to add color, gradient, image, or video behind the full section. Strong backgrounds can change contrast and perceived spacing, so review them alongside your text and block colors. If you need setup guidance in the theme editor, see Shopify documentation on customizing sections

Separator settings

Use the shared Separator settings to add a line above or below the section. This helps when Multicolumn sits between visually similar sections and needs a clearer boundary.

Visibility settings

Use the shared Visibility settings to show or hide the section by device. This is useful when you want one layout for larger screens and a different section setup for mobile.

Width settings

Use the shared Width settings to control both the content width and the outer section width. In Multicolumn, width settings strongly affect how dense the grid feels, especially when you use many columns or add a section background.

Usage notes

1. Review the section after adding blocks. New blocks can change the balance and feel of the whole layout, so check the composition again after each major content change.
2. Test both device experiences. Desktop and mobile controls can change layout, alignment, and navigation, so review the section at both sizes before publishing.
3. Use overrides intentionally. Blank or default-style values usually preserve the theme’s fallback styling, while explicit colors, gradients, or separate media make the section more independent.
4. Check media readability on each device. When desktop and mobile media are configured separately, cropping and overlays can shift, so confirm that captions, focal points, and text remain clear.
5. Keep forms easy to scan. If you use a contact form block, make sure success and error messaging stays readable against the surrounding content.
6. Treat mobile slideshow mode as a sequence. Arrange blocks in the order visitors should swipe through them, since the layout will no longer be experienced as a full grid.