Multitile

​

What this section controls

• Unlimited tile or slideshow blocks
• Custom column and row spanning per tile
• Desktop and mobile-specific visibility
• Flexible aspect ratios and spacing
• Media (images, videos), text, and button support
• Metaobject-powered slideshows
• Responsive layout reordering

​

How the Multitile section works

• Add unlimited tile or slideshow blocks
• Control column and row span for each tile
• Set custom aspect ratios and spacing
• Desktop and mobile-specific visibility
• Supports images, videos, products, and slideshows
• Reverse block order on mobile option

​

Getting started

​

Section settings

• Layout
• Settings

​

Block order mobile

Reverses the order of blocks on mobile devices.Options: True / FalseDefault: False

Use this to prioritize different content on mobile vs desktop.

​

Heading

Optional section heading.

• Inline rich text supported (bold, italic, links)

​

Heading size

Controls the size of section heading.Available options: XS, S, M, L, XLDefault: L

​

Heading alignment

Controls horizontal alignment of heading.Available options: Start, Center, EndDefault: Start

​

Spacing tile

Controls spacing between tiles.Available options:

• Default: Standard spacing
• Compact: No spacing between tiles

Default: Default

​

Color scheme

Controls background and text colors for the section container.

• Shopify color scheme selector
• Default: Scheme 1

​

Section width

Controls the maximum width of the section.Available options:

• Page: Standard page width
• Narrower: Narrower than page width
• Fluid: Wider than page width
• Full: Full viewport width

Default: Page

​

Spacing top

Controls spacing above the section.Available options: None, S, M, L, XLDefault: M

​

Spacing bottom

Controls spacing below the section.Available options: None, S, M, L, XLDefault: M

​

Block settings

• Tile Block - Grid
• Tile Block - Styling
• Tile Block - Content
• Tile Block - Media
• Slideshow Block

​

Show on

Controls where the tile is visible.Available options:

• Desktop: Desktop only
• Mobile: Mobile only
• Both: All devices

Default: Both

​

Grid layout

Column factor - Number of columns the tile spansRange: 1 – 6Default: 1Row factor - Number of rows the tile spansRange: 1 – 6Default: 1

Controls the tile’s position and size in the grid layout.

​

Color scheme

Controls background and text colors for the tile.

• Shopify color scheme selector
• Default: Scheme 5

​

Custom background color

Set a custom gradient background color for the tile.

• Color gradient picker

​

Aspect ratio

Controls the aspect ratio of the tile.Available options: Auto, Media, 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2Default: Auto

This value sets the aspect ratio based on media position: for ‘top’ and ‘bottom’, it applies to the media, and for ‘background’, it applies to the tile.

​

Padding

Controls padding inside the tile.Range: 0 – 6Default: 2

​

Heading

Tile heading text.

• Inline rich text supported

​

Heading size

Available options: XS, S, M, L, XL

​

Text

Tile body text.

• Rich text supported

​

Button label

Text for optional button.

• Leave empty to hide

​

Button link

Destination URL for button.

• Shopify URL selector

​

Button style

Available options: Filled, Outlined, TextDefault: Filled

​

Media position

Controls where media appears relative to content.Available options:

• Top: Media above content
• Bottom: Media below content
• Background: Media as background

Default: Background

​

Desktop media

• Image: Shopify image picker
• Video: Video file upload
• External video: YouTube/Vimeo URL
• Show video controls: Enable/disable player controls

​

Mobile media

• Image: Mobile-specific image
• Video: Mobile-specific video
• External video: Mobile-specific external video
• Show video controls: Mobile player controls

Mobile media overrides desktop media when set.

​

Content positioning

Desktop:

• Content position: Start, Center, End
• Content alignment: Start, Center, End

Mobile:

• Content position: Start, Center, End
• Content alignment: Start, Center, End

​

Grid layout

Same as tile block (column factor, row factor)

​

Media aspect ratio

Controls aspect ratio for slideshow media.Available options: 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2Default: 16:9

​

Source of slideshow

Controls how slideshow content is populated.Available options:

• Manual: Add slides manually
• Metaobject: Pull from metaobject

Default: Manual

If you define a metaobject as a source, the slideshow will be populated with the media from the metaobject.

​

Slideshow settings

• Show navigation arrows: Enable/disable navigation
• Slideshow autoplay interval: 0-10 seconds (0 = disabled)

​

Color schemes

• Color scheme for section
• Color scheme for arrows

​

Best practices

• Use grid layout strategically - larger tiles (2x2, 3x2) for hero content, smaller (1x1) for supporting elements
• Test grid layout on different screen sizes to ensure proper responsive behavior and avoid awkward gaps
• Use compact spacing for magazine-style layouts without gaps between tiles
• Limit column/row span to 3-4 for optimal mobile experience and readability
• Use consistent aspect ratios across similar tiles for visual harmony and professional appearance
• Desktop and mobile visibility options help create device-optimized layouts with different content priorities
• Background media position works best with overlay content and sufficient text contrast
• Use metaobject slideshows for dynamic content that updates frequently without manual changes
• Keep tile count manageable (6-12 tiles) for performance and user experience
• Use reverse mobile order to prioritize important content on smaller screens

​

Common use cases

• Homepage hero grids - Create dynamic, magazine-style hero sections with varied content sizes
• Product showcases - Display products in varied sizes to emphasize featured or bestselling items
• Content blocks - Mix text, images, and videos in custom editorial layouts
• Category navigation - Visual grid of categories with varying emphasis on key categories
• Instagram-style galleries - Create social media-inspired grid layouts for visual storytelling
• Feature highlights - Showcase multiple features with mixed content types and sizes
• Promotional campaigns - Design custom promotional layouts with maximum flexibility

​

Related guides