Timeline — Opaline documentation

Key moments of your brand on a horizontal timeline that advances as visitors scroll. Each milestone has a year, image, title, text and key figure.

Add the section#

Available on every template.

From your Shopify admin, go to Online Store > Themes, then click Customize next to Opaline.
Use the page selector at the top of the editor to open the template you want to change.
In the sidebar, click Add section where you want it to appear.
Select Timeline. Click the section in the sidebar to open its settings.
Click Save in the top right corner when you are done.

General

A horizontal run of milestones driven by vertical scrolling, with a dated axis along the bottom.

Overline
Text

The text shown in this place.

Show the overline rule
Toggle

The short line drawn beside the overline.

Default: On

Heading
Rich text

Formatted text: bold, italic and links are kept.

Intro
Rich text

Formatted text: bold, italic and links are kept.

Image width
Slider

Default: 45%From 30 to 70%, in steps of 5

Scroll length
Slider

How much scrolling one milestone takes.

Default: 100%From 60 to 200%, in steps of 10

Background
Gradient

A CSS background, for example a gradient.

Color scheme
Color scheme

The color scheme of the section. Schemes are set under Theme settings > Colors.

Default: Scheme 1

Heading typeface
Dropdown

Theme default follows the section heading font chosen in Theme settings > Typography.

Default: Theme defaultHeading fontBody fontSans-serif heading font

Click Add block under the section in the sidebar to add one, then drag blocks to reorder them.

Up to 8 per section

General

Year
Text

The text shown in this place.

Image
Image

Select an image from your Files, or upload a new one.

Kicker
Text

The text shown in this place.

Title
Rich text

Formatted text: bold, italic and links are kept.

Text
Rich text

Formatted text: bold, italic and links are kept.

Key figure
Text

The text shown in this place.

Key figure label
Text

The text shown in this place.