Layout table

Overview

A flexible container component that provides customizable table layout options for child blocks. Allows merchants to add multiple table items with customizable columns. Supports responsive display with mobile-friendly layout and column highlighting features.

Common use cases

• Create comparison tables for products or features

• Display specification tables with multiple columns

• Show pricing comparison tables

• Organize data in a structured tabular format

• Highlight specific columns for emphasis

• Use for product feature comparisons or specification sheets

Compatible blocks

The following blocks can be nested within this block:

• Table row

Block settings

Content

Setting	Description	Options
Column headings	Comma-separated list of column headings (e.g., "Feature, Our Brand, Competitor")	Text input

Color

Setting	Description	Options
Color scheme	Controls the background and text colors	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent (default)
Enable column highlight	Highlights a specific column with a different color scheme	Checkbox (default: false)
Color column scheme	Color scheme for the highlighted column	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary (default) • Blur • Transparent Visible when enable column highlight is true
Highlighted column	Column number to highlight (1-based index)	0 - 10 (default: 2) Visible when enable column highlight is true

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the table	Checkbox (default: false)
Top spacing	Padding space at the top of the table	0 - 300 px (default: 0)
Bottom spacing	Padding space at the bottom of the table	0 - 300 px (default: 0)

Style

Setting	Description	Options
Font family	Font family for table header text	• Standard • Heading • Subheading • Accent Visible when font size contains type--
Font size	Font size for table header text	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Layout

Setting	Description	Options
Table layout	Controls how table columns are sized	• Auto • Fixed (default) • Custom
Column widths	Comma-separated list of column widths (e.g., "30%, 40%, 30%")	Text input Visible when table layout is custom

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only
Scroll animation	Adds scroll-triggered animations	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom