Multicolumn

A flexible column grid for features, steps, or highlights. Each column block has five settings.

Merchant-addable
Yes
Settings
16
Block types
1
File
sections/multicolumn.liquid

Screenshots pending

Captures for Multicolumn at desktop and mobile widths are generated from a live store by npm run shots. They appear here automatically once that has run.

When to use it

Three-to-four-item feature strips, process steps, and value propositions.

Setting it up

  1. Add the section and set columns under Layout.
  2. Add a Column block per item.
  3. Set Color and Padding.

Where the content comes from

Blocks own all content.

Notes and cautions

  • Keep column copy to roughly the same length. Ragged columns read as unfinished.

Section settings

Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.

HeadingText
ID
heading
Default
Shop by category
Heading sizeDropdown
ID
heading_size
Default
Medium
  • Smallh2
  • Mediumh1
  • Largeh0
SubheadingText
ID
subheading
Header alignmentDropdown
ID
header_alignment
Default
Center
  • Leftleft
  • Centercenter

Layout

Columns on desktopSlider
ID
columns_desktop
Default
3
Range
2 to 4, in steps of 1
Columns on mobileDropdown
ID
columns_mobile
Default
1 column
  • 1 column1
  • 2 columns2
Image shapeDropdown
ID
image_shape
Default
Square
  • Squaresquare
  • Portraitportrait
  • Circlecircle
Column text alignmentDropdown
ID
text_alignment
Default
Center
  • Leftleft
  • Centercenter

Color

Color schemeColor scheme
ID
color_scheme
Default
scheme-1

Padding

Top paddingSlider
ID
padding_top
Default
52
Range
0px to 100px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
52
Range
0px to 100px, in steps of 4px

Blocks

Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.

Column column

ImageImage
ID
image
HeadingText
ID
heading
Default
Column
TextRich text
ID
text
Default
<p>Pair text with an image to focus on your chosen product, collection, or blog post.</p>
Button labelText
ID
button_label
Button linkLink
ID
button_link