Strata

Multicolumn text

Add a row of focused benefits, service notes, or supporting messages to a template or the footer group.

Multicolumn text places several short content cards in a row or mobile carousel. Use it for service promises, care information, shipping notes, or other supporting content that shoppers should be able to scan quickly.

Add or open this section

In Shopify, open Online Store > Themes > Customize, then add or open Multicolumn text in the template area where it should appear. You can also add it to the Footer group when the information should appear above the Footer across the storefront.

The section allows up to 6 Column blocks. A new section starts with four centered icon cards in a four-column desktop layout and a mobile carousel. Replace the example delivery, returns, packaging, and support text with information that matches the store's actual services and policies.

Heading

Eyebrow

Adds a short context label above the section heading.

Heading

Sets the main title for the row.

Text

Adds supporting rich text below the heading. Use it to explain the common promise shared by the cards rather than repeating each card's copy.

Add an optional section-level link with Link label and Link. Leave both blank when the cards are sufficient on their own.

Heading alignment

Choose Left or Center for the section heading and supporting text.

Content width

Choose Small, Medium, or Large to control the width of the heading content. Use a narrower width for a short editorial introduction and a wider width when the section needs more explanatory copy.

Cards

Mobile layout

Choose how visitors move through the cards on mobile:

  • Carousel lets visitors swipe through the cards horizontally. This is the default.
  • Stack places the cards in the normal page flow so they can all be read by scrolling down.

Columns on mobile

This setting appears when Mobile layout is Stack. Choose 1 or 2 columns. One column gives each card more room for longer text; two columns create a denser scan when each card is short.

Columns on desktop

Choose 2, 3, or 4 columns on desktop. Match the choice to the number of blocks and the length of their headings rather than leaving unused gaps.

Image ratio

Choose Portrait, Square, or Landscape for block images. This setting applies the same card media shape across the section.

Icon size

Choose Small, Medium, or Large for an SVG icon used by a Column block.

Card alignment

Choose Left, Center, or Right for the content within each card.

Colors

SettingWhat it controlsDefault
Background colorThe section surface behind the cards.Leave blank to inherit Theme settings > Colors > General; selecting a color in this section overrides the inherited value.
Text colorThe default text color for the heading and cards.Leave blank to inherit Theme settings > Colors > General; selecting a color in this section overrides the inherited value.

Check card copy, links, and icons against the selected colors.

Spacing

Section spacing

Choose Small, Medium, or Large for the section's vertical spacing.

Top spacing and Bottom spacing

Use these switches to include or remove spacing above and below the section. Turn one off when the section meets another footer-group surface that already provides the needed separation.

Blocks

Column

Each Column block can contain:

Media

  • Image — optional card image. When selected, it takes priority over the icon.
  • Svg icon — optional icon used only when Image is blank.

When both fields are blank, the card shows a neutral placeholder while you arrange the section. Add the intended image or icon before publishing.

The available Svg icon choices are None, Check badge, Shield check, Delivery truck, Returns, Package, Gift, Customer support, Message, Credit card, Wallet, Store, Globe, Location, Calendar, Leaf, Recycle, Heart, Sparkles, Cruelty free, Materials, Layers, Ruler, Product care, Water, Temperature, Lock, Star, and Clock.

Content

  • Eyebrow — short context above the card heading.
  • Heading — the card title.
  • Body — rich text describing the benefit, service, or information.
  • Link label and Link — optional destination.
  • Link styleText link, Primary button, or Secondary button.

Reorder Column blocks to change their reading order. Keep each block focused on one promise so the row remains scannable on mobile.

Desktop and mobile behavior

Columns on desktop controls the wide-screen grid. On mobile, Carousel creates a swipeable row, while Stack uses the selected Columns on mobile value. A two-column stack is best for short, parallel statements; a one-column stack is safer for longer copy or accessibility-sensitive instructions. Review the longest card at both sizes.

Accessibility and motion

Use text that remains meaningful without the image or icon. When an SVG icon and image communicate the same idea, choose one rather than duplicating the message. Check link focus, text contrast, and the reading order after changing card alignment.

Common issues

  • The selected icon does not appear: a selected Image takes priority. Clear the image only when the icon should be shown instead.
  • Cards feel cramped on mobile: choose Stack, switch Columns on mobile to 1, or shorten the card copy.
  • Columns on mobile is missing: change Mobile layout to Stack. The setting is not used by the carousel.
  • The heading feels too wide: reduce Content width. The card row uses the normal page content width.
  • A card link is missing: fill both Link label and Link in the Column block.

Search documentation

Search across the Strata guide