Timelines
Supported blocks
_timeline
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Full width | full_width | checkbox | false | |
| Enable inner spacing | enable_spacing | checkbox | true | |
| Block class | class | text | py-4 lg:py-6 | |
| Layout | layout | select | line-left | |
| Image | lead_image | image_picker | ||
| Image ratio | lead_ratio | select | 1.5 | |
| Image radius | lead_radius | select | rounded-xl | |
| Background | bg | color_background | Supports solid or gradient colors. | |
| Use theme background schema | bg_schema | checkbox | false | |
| Fixed background | bg_attachment | checkbox | false | |
| Timeline line color | line_color | color | #e5e7eb | Colors the vertical timeline line and the horizontal connectors linking each icon to its card. |
Option values
- Layout (
layout): Line left (line-left), Alternating (left / right) (alternating), Image left, timeline right (side-media), Image right, timeline left (side-media-right) - Image ratio (
lead_ratio): Auto (``), Custom (3:1) (3.0), Ultrawide (21:9) (2.33), Double-width (2:1) (2.0), Widescreen/HD (16:9) (1.78), Classic/DSLR (3:2) (1.5), ISO Paper (1.4:1) (1.4), Standard Definition/SD (4:3) (1.33), Landscape (5:4) (1.25), Square (1:1) (1.0), Instagram Portrait (4:5) (0.8), Portrait Photography (3:4) (0.75), Pinterest Pin Ratio (2:3) (0.67), Portrait (9:16) (0.56) - Image radius (
lead_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Pill (rounded-full)
Presets
- Timelines
💡 Edit via Shopify Admin → Online Store → Themes → Customize.