Seventh > Sections > Multicolumn

Multicolumn

The Multicolumn section creates a flexible multi-column layout where you can add cards or columns with customizable widths. Perfect for creating FAQ sections, contact forms, feature comparisons, or any content that benefits from a column-based layout.

What It Does

This section displays content in multiple columns:

• Supports 1-6 columns on desktop
• Various column width combinations (equal or varied widths)
• Each column can contain cards or direct blocks
• Responsive column layouts for tablet and mobile
• Flexible alignment and spacing options

Section Settings Explained

Layout Options

Desktop Columns Controls how many columns appear on desktop and their width distribution:

• Standard Options:
  • 6 Columns - Six equal-width columns
  • 5 Columns - Five equal-width columns
  • 4 Columns - Four equal-width columns (default)
  • 3 Columns - Three equal-width columns
  • 2 Columns - Two equal-width columns

  • 1 Column - One full-width column

    2 Column Variations:

  • 34/66 - First column 34%, second column 66%

  • 66/34 - First column 66%, second column 34%

    3 Column Variations:

  • 50/25/25 - First column 50%, others 25% each
  • 25/50/25 - Middle column 50%, others 25% each

  • 25/25/50 - Last column 50%, others 25% each

    4 Column Variations:

  • 40/20/20/20 - First column 40%, others 20% each
  • 20/20/20/40 - Last column 40%, others 20% each
  • 20/30/30/20 - Middle columns 30%, outer columns 20%
  • 30/20/20/30 - Outer columns 30%, middle columns 20%

Tablet Columns (Only appears when mobile columns is not 2) Controls how many columns appear on tablet devices:

• 2 Columns - Two columns side by side
• 1 Column - One column (stacked)

Mobile Columns (Only appears when desktop columns is not 1) Controls how many columns appear on mobile devices:

• 2 Columns - Two columns side by side
• 1 Column - One column (stacked, default)

Columns Alignment Controls how columns align when they have different heights

Grid Gap Controls the spacing between columns

Section Header

Section Header Block The Section Header block can contain:

• Heading blocks for section titles
• Text blocks for descriptions
• Button blocks for call-to-actions
• Icon blocks and other common blocks

Section Design Options

Color Scheme

• Choose from your theme's color schemes
• Applies to the entire section

Top Padding

• Controls space above the section

Bottom Padding

• Controls space below the section

Extend Section Width

• When enabled: Section extends to full browser width
• When disabled: Section stays within container width

Show Media Background

• When enabled: You can add a background image or video
• When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

• Upload an image or video for the section background

Background Overlay (Only appears when background is set)

• Add a color overlay on top of the background
• Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

• Adds a scrolling parallax effect to the background
• Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

• Adjusts how content sits on the background

Make Section Full Height

• Makes the section fill the entire viewport height

Available Blocks in Multicolumn

The Multicolumn section can contain:

Column Block:

• Column - A column container that can hold any blocks
• Text alignment options
• Inner blocks spacing control

Card Blocks:

• Card - Regular card block
• Any other card types as available

App Blocks:

• Blocks from installed Shopify apps

Column Block Options

Each Column block has these options:

Text Alignment

• Align text to left, center, or right

Inner Blocks Spacing

• Controls gap between blocks inside the column
• Options: XXSmall, XSmall, Small, Regular, Large, XLarge

Available Blocks in Columns:

• All common blocks (Heading, Text, Image, Button, Icon, etc.)
• Form blocks
• Accordion blocks
• Any theme blocks
• App blocks

Common Use Cases

FAQ Section

• Use 2 columns
• Left column: Questions in accordions
• Right column: Contact form
• Perfect for customer support pages

Feature Comparison

• Use 3-4 columns
• Each column shows a different feature or plan
• Compare options side by side
• Great for product or service comparisons

Contact Information

• Use 2-3 columns
• Each column shows different contact methods
• Include icons, text, and buttons
• Perfect for contact pages

Service Highlights

• Use 3-4 columns
• Each column highlights a service
• Include icons, headings, and descriptions
• Great for service pages

Tips for Success

Column Layout

• Equal Widths - Use for balanced content
• Varied Widths - Use to emphasize important content
• 2-3 Columns - Works well for most content
• Mobile - Always test on mobile devices

Content Organization

• Consistent Structure - Keep similar content in each column
• Visual Balance - Balance text-heavy and image-heavy columns
• Spacing - Use grid gap to create visual separation

Column Blocks

• Text Alignment - Use consistent alignment across columns
• Block Spacing - Adjust inner blocks spacing for readability
• Content Amount - Keep content balanced across columns

Troubleshooting

Columns Not Aligning

Problem: Columns don't align properly.

Solutions:

1. Check Alignment Setting - Verify columns alignment setting
2. Content Height - Columns with more content will be taller
3. Use Stretch - Set alignment to "Stretch" for equal heights

Columns Too Narrow or Wide

Problem: Column widths don't look right.

Solutions:

1. Check Desktop Columns - Verify column count setting
2. Column Variations - Try different width variations
3. Content Width - Adjust content within columns

Mobile Display Issues

Problem: Columns don't look good on mobile.

Solutions:

1. Mobile Columns - Set to 1 column for mobile
2. Test Responsively - Always preview on mobile devices
3. Content Order - Consider content order on mobile