Timeline
Points on a line, each with a time label, a heading and a line of text, for what to expect and when.
munich-demo.myshopify.com
What it does
A section header and a row of points connected by a line. Each point has a label for the moment, a heading, a short text and an optional icon. Side by side runs the points in a row on desktop; Below one another stacks them as a vertical timeline. On a phone the row layout swipes.
When to use it
What a customer notices and when, so expectations are managed before the order rather than in the returns process. Also: the story of the company in four dates, the steps between order and delivery, a program over weeks. It sits well between How it works and Comparison on the product page.
Blocks
- Timeline point: label, heading, text, icon.
Setting it up
- Add three to five Timeline point blocks with a Label each.
- Choose Layout and whether to Show the connecting line.
- Decide on Set the first point apart.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Side by side runs the points in a row on desktop. Below one another stacks them as a vertical timeline.Options: Side by side, Below one another · Default: Side by side |
| Swipe on mobile | Checkbox | On a phone, lays the items out in one row that the visitor swipes through, instead of stacking them.Default: on |
| Header | ||
| Label | Text | A small kicker above the heading, such as What to expect. |
| Heading | Text | What changes at this point, in a few words.Default: What to <em>expect.</em> |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Medium |
| Heading level | Select | Page heading is the one heading that names what the whole page is about; use it once per page, usually on the first section. Everything else is a section heading.Options: Page heading, Section heading · Default: Section heading |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Left |
| The line | ||
| Show the connecting line | Checkbox | Draws the line that connects the points.Default: on |
| Set the first point apart | Checkbox | Shows the first point in full strength and the ones after it a step quieter, so the line reads as starting now.Default: on |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90 |
Timeline point block
| Setting | Type | What it does |
|---|---|---|
| Label | Text | A small kicker above the heading, such as What to expect.Default: Week 1 |
| Heading | Text | What changes at this point, in a few words.Default: Name what changes |
| Text | Rich text | One or two lines on what happens here.Default: <p>Say what happens at this point, in a line or two.</p> |
| Icon | Select | A small icon on the point. None shows a plain dot.Options: None, Natural, Shipping, Returns, Guarantee, Delivery time, Gift, Secure payment, Check, Star · Default: None |
Tips
- Write the labels as moments, not durations: Week 1, Week 4, Day 60. The last one is a good place for your guarantee.
- Set the first point apart makes the first point full strength and the later ones a step quieter. It reads as "this starts now" and suits a results timeline; turn it off for a company history.
- Promise only what you can stand behind. A timeline is read as a claim, and claims about effects need to be true.