The Timeline section shows the history of your brand as a row of years, from left to right, with a short note under each year. A year can also hold a longer story that opens in a popup when a customer clicks it. To add one, click Add section in the editor and select Timeline. The About page template comes with one.
The Timeline preset has a heading and eight Entry blocks from 2017 to 2026, four of them with a story. No preset comes with photos.
How the timeline works
Each year is a column on a dashed line. Years with entries show in a softer color and switch to the full text color when the pointer is over them. A year with a story opens it in a popup when clicked. The popup opens with the entry's photos at the top, which customers swipe through when there is more than one. Under them come the year, the story and an optional button. Arrows on both sides of the popup move to the previous or next story.
When the row is wider than the screen, it scrolls sideways. Customers move it with a swipe on a touch screen or trackpad, by dragging it with the mouse, with the two arrows at the right end of the heading's row, or with the mouse wheel while holding Shift. The arrows jump from one year with entries to the next.
On screens 1000 px and wider with a mouse, an entry's photo follows the pointer while it is over the entry, in place of the small photo under the note. Visitors whose device is set to reduce motion see the small photo.
Layout
Setting
What it does
Widest column
The widest a year's column can get, from 240 px to 560 px. The default is 400 px. A column with a short note is narrower. A long note wraps at this width.
Show years in between
Shows a narrow, empty column for each year that has no entry, so the distance between years is visible. On by default. It fills gaps of up to 40 years.
Margin top and Margin bottom add space above and below the section, as Section layout settings describes. The section has no background settings.
The years go from left to right in the order of the blocks, so put the oldest entry first. Two entries with the same year share one column.
Content
Heading sits above the row. Words you make bold start a second line.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Rail follows the page scroll makes the row slide sideways a little as the page scrolls past it, on screens 1000 px and wider. On by default. Turn it off to let customers move the row only by hand. On smaller screens, and for visitors whose device is set to reduce motion, the row always moves only by hand.
Entry blocks
Setting
What it does
Year
The year the entry belongs to, such as 2019. An entry without a year does not show, and the editor shows the message "Give every entry a year. One without a year is not shown."
Icon
A small icon above the note: Bag, Box, Clock, Cup, Heart, Leaf, Mail, Star or Truck. None shows no icon.
Text
The short note under the year.
Image
A small photo under the note, cropped to a 16:9 shape. In the popup, the same photo is the first one above the story.
Full story
The longer text that opens in the popup. Without it, the entry cannot be clicked.
Link and Button label
A button under the story in the popup. Link shows when Full story has text, and Button label shows when Link has an address. The label is Read the story when you leave it empty.
The section holds up to 16 entries. With no entries, it is hidden on your store, and the editor shows the heading and an empty line.
Story photo blocks
An entry can hold Story photo blocks, each with one Image. To add one, click Add block under the entry in the editor sidebar and select Story photo. The photos show in the popup after the entry's own Image, in the order of the blocks. Only an entry with Full story opens the popup, so its story photos show only then.
The Timeline section shows the history of your brand as a row of years, from left to right, with a short note under each year. A year can also hold a longer story that opens in a popup when a customer clicks it. To add one, click Add section in the editor and select Timeline. The About page template comes with one.
The Timeline preset has a heading and eight Entry blocks from 2017 to 2026, four of them with a story. No preset comes with photos.
How the timeline works
Each year is a column on a dashed line. Years with entries show in a softer color and switch to the full text color when the pointer is over them. A year with a story opens it in a popup when clicked. The popup opens with the entry's photos at the top, which customers swipe through when there is more than one. Under them come the year, the story and an optional button. Arrows on both sides of the popup move to the previous or next story.
When the row is wider than the screen, it scrolls sideways. Customers move it with a swipe on a touch screen or trackpad, by dragging it with the mouse, with the two arrows at the right end of the heading's row, or with the mouse wheel while holding Shift. The arrows jump from one year with entries to the next.
On screens 1000 px and wider with a mouse, an entry's photo follows the pointer while it is over the entry, in place of the small photo under the note. Visitors whose device is set to reduce motion see the small photo.
Layout
Setting
What it does
Widest column
The widest a year's column can get, from 240 px to 560 px. The default is 400 px. A column with a short note is narrower. A long note wraps at this width.
Show years in between
Shows a narrow, empty column for each year that has no entry, so the distance between years is visible. On by default. It fills gaps of up to 40 years.
Margin top and Margin bottom add space above and below the section, as Section layout settings describes. The section has no background settings.
The years go from left to right in the order of the blocks, so put the oldest entry first. Two entries with the same year share one column.
Content
Heading sits above the row. Words you make bold start a second line.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Rail follows the page scroll makes the row slide sideways a little as the page scrolls past it, on screens 1000 px and wider. On by default. Turn it off to let customers move the row only by hand. On smaller screens, and for visitors whose device is set to reduce motion, the row always moves only by hand.
Entry blocks
Setting
What it does
Year
The year the entry belongs to, such as
2019. An entry without a year does not show, and the editor shows the message "Give every entry a year. One without a year is not shown."Icon
A small icon above the note: Bag, Box, Clock, Cup, Heart, Leaf, Mail, Star or Truck. None shows no icon.
Text
The short note under the year.
Image
A small photo under the note, cropped to a 16:9 shape. In the popup, the same photo is the first one above the story.
Full story
The longer text that opens in the popup. Without it, the entry cannot be clicked.
Link and Button label
A button under the story in the popup. Link shows when Full story has text, and Button label shows when Link has an address. The label is Read the story when you leave it empty.
The section holds up to 16 entries. With no entries, it is hidden on your store, and the editor shows the heading and an empty line.
Story photo blocks
An entry can hold Story photo blocks, each with one Image. To add one, click Add block under the entry in the editor sidebar and select Story photo. The photos show in the popup after the entry's own Image, in the order of the blocks. Only an entry with Full story opens the popup, so its story photos show only then.