Home Sections Content blocks reference

Content blocks reference

Last updated on Jun 27, 2026

Content blocks reference

Content blocks are the small pieces you drop into a section to build a layout: a paragraph, an image, a button, a countdown. For how blocks fit inside sections and groups, see Sections, blocks, and groups. This article documents one block per heading and covers only the settings unique to each. The shared controls (padding, margin, color, visibility) are described once in Common section settings.

Add a content block

  1. In the theme editor, select the section you want to add to.
  2. Open the section's blocks and click Add block.
  3. Pick the block. Rich text, Text, Button, Eyebrow, and Tabs sit under the Basic group. Image and Video sit under the Media group. Icon and Illustration are under Decorative, Quote and Marquee under Storytelling, Countdown timer under Promotional, and Separator under Layout.
  4. Configure it in the settings panel.

Each section allows its own set of blocks, so a block you see in one section may not appear in another.

Rich text

A multi-paragraph text block for body copy. The Text field accepts paragraphs, headings, lists, and links.

  • Typography: pick a Preset (the named text styles from Display down to Caption) and a Font (Body or Heading). Choose Custom under Preset to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap.
  • Layout: Width is Fit (shrinks to the text) or Fill (takes the available width). Max width caps the line length: None, Narrow, Medium, Normal, or Custom (sets a Custom width in pixels). Inherit alignment keeps the parent's alignment; turn it off to set Alignment for this block.
  • Appearance: Apply custom color sets a Custom color for the text. Emphasis dims the text to Muted or Faded.

This block also uses the standard Padding controls. See Common section settings.

Text

A single plain-text block. Same typography surface as Rich text, but the Text field is plain: line breaks become new lines, with no headings, lists, or links. Use it for a short line where formatting is more than you need.

Its settings match Rich text above: Typography, Layout (Width, Max width, Inherit alignment, Alignment), and Appearance (Apply custom color, Emphasis).

This block also uses the standard Padding controls. See Common section settings.

Eyebrow

A short label that sits above a heading, in small uppercase type. The Text field holds the label.

  • Use accent color: paints the label in the scheme's accent. When on, Accent color picks Default (the standard accent) or Overlay (the accent tuned for text over images).
  • Decorative line: adds a hairline beside the text. None, Left (one line), or Both.
  • Layout: Inherit alignment keeps the parent's alignment; turn it off for Alignment. Emphasis dims the text to Muted or Faded.
  • Appearance: Apply custom color sets a Custom color.

This block also uses the standard Margin controls. See Common section settings.

Quote

A styled blockquote with an optional quotation mark. The Text field holds the quote.

  • Typography: pick a Preset and Font, or choose Custom to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap.
  • Layout: Alignment and Mobile alignment (Same as desktop keeps the desktop value). Max width is Full, Narrow, or Medium.
  • Decorative mark: Show quotation mark adds a large quote glyph. Mark style is Double or Single.
  • Italic accent and Bold accent: style any italic or bold words inside the quote. Style for each is None, Color, Underline, Gradient sweep, or Shimmer. Keep italic and Keep bold keep the original slant or weight alongside the accent.
  • Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. Apply custom color sets a Custom color for the text.

This block also uses the standard Padding controls. See Common section settings.

Image

A single image with its own size and frame. Image is the desktop picture; Mobile image swaps in on phones (it falls back to the desktop image when not set).

  • Link: makes the image clickable. When set, Open in new tab and Link label (read to screen readers) appear.
  • Aspect ratio: Original keeps the file's own ratio, or pick Square (1:1), Landscape (16:9), Portrait (4:5), or Custom. Custom replaces the ratio with a fixed Custom height in the size groups.
  • Desktop size and Mobile size: Width is Full, Percent, or Pixels, each revealing its own Custom width field.
  • Border: Style (None, Solid, Dashed, Dotted, Inset, Outset) with Border thickness and Color, plus Corner radius to round the frame.
  • Animation: None, Sway left, or Sway right gives the image a slow tilt.

This block also uses the standard Padding controls. See Common section settings.

Video

Plays an uploaded or hosted video.

  • Media: Source is Uploaded (pick a Video from your files) or External URL (paste a YouTube or Vimeo URL, and set Video alt text for accessibility). Poster image is the still shown before play; it falls back to the video's preview frame.
  • Playback: Autoplay (forces the video to play muted), Loop, Show controls, and Mute.
  • Appearance: Aspect ratio is Landscape (16:9), Classic (4:3), Square (1:1), or Portrait (9:16).

This block also uses the standard Margin controls. See Common section settings.

Button

A link or action button. See Buttons for the full styling reference. In short: Label is the visible text, Link is the destination, Style and Size match the theme button styles, and Show arrow adds a trailing arrow. Desktop size and Mobile size set the button width. The block uses the standard Margin controls.

Icon

A small symbol, picked from a bundled set or uploaded.

  • Width: the icon size in pixels.
  • Type: Default picks a bundled Icon from the grouped list (Shipping & delivery, Payments, Materials & care, and so on). Custom uploads your own Custom icon and exposes Make icon round.
  • Apply custom color: for a default icon, overrides the inherited color with a Custom color. A default icon otherwise takes the section's text color.

This block also uses the standard Margin controls. See Common section settings.

Illustration

A hand-drawn line illustration from Reign's set, rendered in the scheme's text color.

  • Illustration: pick the drawing from the grouped list (Wardrobe, Footwear, Kitchen, Travel, and many more).
  • Size: a percentage of the standard illustration height, so a row of illustrations lines up at the same value. Use a different size on mobile adds a Mobile size.
  • Decorative: marks the illustration as decoration so screen readers skip it. Leave it off when the drawing carries meaning.
  • Color: Text (auto) follows the scheme text color, or Custom sets a fixed Custom color.

This block also uses the standard Margin controls, including separate mobile margins. See Common section settings.

Countdown timer

A live timer counting down to a date.

  • Date (format YYYY-MM-DD) and Time (24-hour HH:MM, in your store timezone) set the target.
  • Show days: includes a days unit alongside hours, minutes, and seconds.
  • Show separator: shows a colon between the units.
  • Alignment: Left, Center, or Right.
  • Size: scales the digits as a percentage.
  • Hide when expired: removes the timer once it reaches zero. Turn it off to keep it visible and show an Expired message instead. In the editor the timer stays visible so you can keep styling it.

This block also uses the standard Padding, Margin, and Visibility controls, including separate mobile values. See Common section settings.

Marquee

A row of text and images that scrolls sideways on a loop. You fill it with child blocks.

  • Add Text and Image blocks inside the marquee. A Text child holds a phrase with its own Color (Auto, Accent, or Custom). An Image child holds a single picture, sized by the marquee's Image height.
  • Behavior: Separator is the glyph placed between items (Bullet (•), Slash (/), Angle bracket (›), Middle dot (·), Star (✦), Diamond (◆), a long dash, or None). Scroll speed, Pause on hover, and Direction (Forwards or Reverse) control the motion. Text size and Image height scale the items.
  • Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme.

This block also uses the standard Margin controls. See Common section settings.

Separator

A divider line.

  • Orientation: Horizontal or Vertical.
  • Appearance: Style is Solid, Dashed, Dotted, or Fade (a line that fades at both ends). Thickness and Opacity set its weight and strength.
  • Size: for a horizontal line, Limit width caps the length and reveals Width. For a vertical line, Height sets the length.
  • Color: Apply custom color sets a Custom color; otherwise the line takes the scheme color.

This block also uses the standard Margin controls. See Common section settings.

Tabs

A pill-style tab group: a bar of labelled tabs above a panel that swaps as the shopper switches tabs. You fill it with Tab child blocks, and each Tab holds its own content blocks.

  • Bar label: an accessible label for the tab bar, read to screen readers.
  • Card surface: wraps the panel in a raised card surface instead of sitting flush with the section.
  • Each Tab child carries a Tab name, the text shown on its pill in the bar. Open a Tab and add content blocks for what shows when it is selected.

This block also uses the standard Color and Padding controls. See Common section settings.

Tips

  • Width and Max width do different jobs on the text blocks. Width decides whether the block fills its column, while Max width caps how long a line of text can run for readability.
  • Inherit alignment and Inherit color scheme are on by default so a block matches its section. Turn them off only when one block needs to differ.
  • Turn on Decorative for an Illustration that is purely ornamental, so it does not clutter the page for screen reader users. Leave it off when the drawing stands in for a label.
  • For a looping logo strip, set the Marquee Separator to None and add Image children instead of text.