Timeline #1 - #2 - #3- #4

by Admin on Oct 21, 2025

Timeline section allows merchants to showcase important milestones in their brand, products, or projects’ development journey. The section is a powerful storytelling tool that builds trust and helps visitors quickly understand your brand’s evolution and values.

1. Section Components

Section	Timeline	Creates a chronological display of important milestones in your brand, product, or project journey.
Available block	*Milestone*	Add individual entries with a title, date, description, and image/video.

2. Location & Setup

To add & set up the Timeline section:

Open the Shopify Theme Editor (Online store > Themes > Customize)
Decide where you want to place the new section.
Click “Add Section”.
Select “OT: Timeline (#number of variant)”.

3. Highlight Features

Chronological Display: Present milestones in sequential order for clear storytelling
Rich Media Support: Add images, Shopify-hosted videos, or embedded videos from URLs
Interactive Navigation: Timeline axis with clickable milestone labels

4. Common Use Cases

🤔 How to set up Timeline section?

Want to set up a Timeline to highlight your brand’s milestones? Here's how:

STEP 1: Add the Timeline section to your desired location

STEP 2: Set up each Milestone block

Click on the Milestone block to open its settings panel and customize these:

Add Image or Video (Shopify-hosted or embedded via URL). If both are added, the image is shown as the thumbnail for the video.
Enter Milestone (milestone name on the timeline axis, e.g., 2022).
Add Title and Text.
Add a Button text and Button link for further navigation.

Add more Milestone blocks and repeat this step to set up other milestones.

STEP 3: Customize the Timeline section look

Choose Layout style for the section:

Vertical
Horizontal

Choose the position for the timeline bar and media.
At Content settings group, add a Heading and Description for the section.

STEP 4: Click “Save” when done.

🤔 How to make advanced customizations to the Timeline section?

Want to customize the typography, element size and style, or desktop/mobile layout? Here's how:

STEP 1: Click on the Timeline section to open its settings panel.

STEP 2: Customize the text typography

At Typography settings group, you can:

Choose the font for heading and description text.
Adjust the text size on desktop and mobile.

STEP 3: Customize buttons and elements

At Items settings group, you can:

Choose the Button display, Button style and animation when hovering the button.
Adjust the size of the milestone, title and text.
Choose Content alignment, padding, Image ratio, and Corner radius.

STEP 4: Customize Desktop/Mobile layout

At Desktop/Mobile layout settings group, you can adjust content width, section width and padding.

STEP 5: Customize colors

At Color settings group, choose colors for section elements such as section background, heading, button...

STEP 6: Click “Save” when done.