Radian 3.0 is here — bundles, category showcase and cinematic motion.See what's new

Docs Try Theme free

Content blocks

Updated 5 min read

Many sections (Image banner, Image with text, Rich text, Newsletter, Slideshow slides and more) are built from the same theme blocks. Add them with Add block, reorder them, and put them in a Group to lay them out in a row or a column.

Add blocks to a section

  1. Select a section that has blocks, such as Image banner, and click Add block.
  2. Choose a block: Heading, Text, Buttons, Subheading (eyebrow), Icon with text, Image, Video, Spec, Countdown, Accordion, Divider, Social icons, Spacer and more.
  3. Use Group to place blocks side by side or stacked, with its own spacing, background and color scheme.
Blocks inside an Image banner: subheading, heading, text and buttons.
Blocks inside an Image banner: subheading, heading, text and buttons.

Settings reference

Heading

Heading Wrap words in italics to highlight them.
Heading tag Options: H1, H2, H3, Paragraph.
Typography Options: Display, Heading, Subheading.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Make font bolder Turns this on or off.
Highlighted words Options: Theme default, Focus frame, Display screen, Serif italic, Drawn underline, Marker, Circle, Brush stroke, Pill, Outline text, Italic only.
Max width Slider.
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.
Reveal word by word Turns this on or off.

Text

Text
Typography Options: Body, Large body, Caption.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Muted color Turns this on or off.
Max width Slider.
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.

Buttons

First button
Label
Link Where the link goes.
Style Options: Primary, Secondary, Accent, Link.
Open in new tab Turns this on or off.
Second button
Label
Link Where the link goes.
Style Options: Primary, Secondary, Accent, Link.
Open in new tab Turns this on or off.
Layout
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.

Eyebrow

Text
Typography Options: Subheading, Label, Body.
Font scale 100% is the size of this style in Theme settings > Typography.
Show signal dot Turns this on or off.

Group

Direction (desktop) Options: Row, Column.
Direction (mobile) Options: Row, Column.
Vertical alignment Options: Top, Center, Bottom, Stretch.
Horizontal distribution Options: Start, Center, Space between, End.
Gap (desktop) Slider.
Gap (mobile) Slider.
Style
Use a color scheme Turns this on or off.
Color scheme Colors from Theme settings > Colors.
Background image An image from your files.
Overlay opacity Slider.
Padding Slider.
Padding on mobile Slider.
Corner radius Slider.
Link
Link Makes the whole group a link. Buttons and links inside keep their own.
Link description Read by screen readers, e.g. Shop the summer edit.

Icon with text

Icon Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube.
Custom icon Replaces the icon. Use a square SVG or PNG.
Icon size Slider.
Title
Text
Layout Options: Icon beside text, Icon above text.

Image

Image An image from your files.
Mobile image Optional. Falls back to the image above.
Ratio (desktop) Options: Adapt to image, Square, Portrait (4:5), Landscape (4:3), Wide (16:9).
Ratio (mobile) Options: Adapt to image, Square, Portrait (4:5), Landscape (4:3), Wide (16:9).
Fit Options: Fill frame, Show whole image.
Width Slider.
Custom corner radius Turns this on or off.
Corner radius Slider.
Link Where the link goes.

Video

Shopify video A video from your files.
YouTube or Vimeo Loads only after a click, without tracking cookies before that.
Cover image An image from your files.
Title Shown on the play button and read by screen readers.
Playback Ambient plays a Shopify video muted and on repeat. Options: Click to play, Ambient (muted loop).
Image ratio Options: Wide (16:9), Landscape (4:3), Square, Portrait (4:5).
Image ratio on mobile Options: Wide (16:9), Square, Portrait (4:5), Story (9:16).

Spec

Value
Unit
Label
Typography Sets the size of the digits; they keep the label font. Options: Heading, Display, Large body.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Count up when visible Turns this on or off.

Countdown

End date YYYY-MM-DD, in the shopper's own time zone.
End time 24-hour clock, HH:MM.
Message when it ends Leave empty to keep showing zeros.
Style Options: Boxes, Plain.
Typography Sets the size of the digits; they keep the label font. Options: Heading, Display, Large body.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Show labels Turns this on or off.
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.

Accordion

Style Options: Lines, Cards.
Icon Options: Plus, Chevron.
Keep one row open at a time Turns this on or off.

Row

Heading
Content
Open by default Turns this on or off.

Divider

Style Options: Solid, Dashed, Dotted.
Thickness Slider.
Width Slider.
Color Options: Border, Text, Accent.
Space above and below Slider.
Space above and below on mobile Slider.
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.

Icon

Icon Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube.
Custom icon image An image from your files.
Size Slider.
Color Options: Text, Muted, Accent.
Background Options: None, Circle, Square.
Link Where the link goes.
Link description
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.

Social icons

Style Options: Plain, Circle, Outline.
Size Slider.
Space between icons Slider.
Alignment Options: Section default, Left, Center, Right.
Mobile alignment Options: Section default, Left, Center, Right.

Email signup

Layout Options: Field and button side by side, Button below the field.
Button label Empty: Subscribe
Button style Options: Primary, Secondary, Accent.

Contact form

Show a phone field Turns this on or off.

Map

Address Empty: the store address from Settings > Store details.
Zoom Slider.
Load the map right away Off: it loads when the shopper asks, since Google receives their data then (GDPR friendly).
Cover image Shown until the map loads.
Height Slider.
Height on mobile Slider.

Spacer

Height (desktop) Slider.
Height (mobile) Slider.

Custom Liquid

Liquid code Add app snippets or other code.

How it works

  • Each text block has its own Typography and Font scale, relative to Theme settings > Typography.
  • Groups can hold other groups for more complex layouts.

Related

Still stuck?

Include your store URL and theme version — we'll get back to you.

Contact support