1. What is Timeline?
Timeline feature allows merchants to showcase important milestones in their brand, products, or projects’ development journey.
The feature is a powerful storytelling tool that builds trust and helps visitors quickly understand your brand’s evolution and values.
2. 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. |
3. 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 “Timeline”.
4. 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
- Carousel Mode: Auto-advance through milestones with customizable timing
- Interactive Navigation: Timeline axis with clickable milestone labels
- Responsive Design: Adapts beautifully across all device sizes
5. 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
By default, your Timeline section includes 3 Milestone blocks. If you want more, you can add up to 50.
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.
- Under Content settings group, you can:
- Add Navigation label (milestone name on the timeline axis, e.g., 2022)
- Add Subheading, Heading, and Description
- Add a Button label and Button link
STEP 3: Customize the Timeline section look
- Add a Heading — wrap text in [ ] to add a highlight effect
- Add Subheading and Text
- Choose the Media ratio: 1:1, 4:3, 16:9, or Adapt to media
STEP 4: Click “Save” when done.
🤔 How to enable carousel for the Timeline section?
Want to make the milestones auto-slide every few seconds? Here's how:
STEP 1: Click on the Timeline section to open its settings panel.
STEP 2: Under the Carousel setting group:
- Adjust Change milestones every to set timing for auto-switching
- Toggle Pause on hover to stop sliding when hovered
- Toggle Next/Previous arrows to show navigation buttons
STEP 3: Click “Save” when done.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
