Timeline story
A sequence of moments connected by a progress line, for brand history, a process or a product journey.
At a glance: Add it to any page with Add section. Holds up to 8 blocks.
Good for
- Brand history from founding to today
- How a product is made, from sourcing to shipping
- A step-by-step process with photos for each step
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Timeline story and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Center. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Progress bar position | Applies to desktop only.
Default: Center. |
| Enable alternating layout | Places entries on alternating sides of the center line, zig-zagging down the page instead of all sitting on one side.
Off by default. Only appears when Progress bar position is Center. |
| Show image | Shows the image for this item.
On by default. |
Text sizes
| Item heading size | Heading size for each item, from the sizes in Theme settings → Typography.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Item block
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
Images
| Image 1 | Custom image for this slot.
1200 x 900px .jpg recommended. |
| Image 1 ratio | The crop shape for this image. Adapt to image keeps the photo's original shape.
Choose Portrait (3:4), Landscape (4:3) (default), Square (1:1) or Adapt to image. |
| Image 2 | Custom image for this slot.
1200 x 900px .jpg recommended. |
| Image 2 ratio | The crop shape for this image. Adapt to image keeps the photo's original shape.
Choose Portrait (3:4), Landscape (4:3) (default), Square (1:1) or Adapt to image. |
| Image 3 | Custom image for this slot.
1200 x 900px .jpg recommended. |
| Image 3 ratio | The crop shape for this image. Adapt to image keeps the photo's original shape.
Choose Portrait (3:4), Landscape (4:3) (default), Square (1:1) or Adapt to image. |
| Image 4 | Custom image for this slot.
1200 x 900px .jpg recommended. |
| Image 4 ratio | The crop shape for this image. Adapt to image keeps the photo's original shape.
Choose Portrait (3:4), Landscape (4:3) (default), Square (1:1) or Adapt to image. |
Tips
- Put a date or step number in each item's caption so the order is obvious at a glance.
- Use the same image ratio across items for a tidy column of images.
- Five to eight items is the sweet spot. The section holds up to eight.
Troubleshooting
I can't find Enable alternating layout
It only appears when Progress bar position is center, since alternating needs a line down the middle.
Item images aren't showing
Check Show image is on in the section settings, then upload images in each Item block.