The Timeline section displays a series of milestones or stories in a slider. Each timeline item can include an image or video, a subheading, heading, description, and optional button. Visitors can move between items using the timeline navigation.
Demo usage
The Timeline section is used on the About page of the Concept demo, under Our History. It presents the brand's milestones from 2017 to 2025.
Steps:
Add the Timeline section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to display the timeline.
- Click Add section and select Timeline.
- Move the section to your preferred position and click Save.
The default preset includes five Content blocks. You can edit, reorder, remove, or add blocks as needed (up to 15 blocks in total).
Add an image timeline item
- Open the Timeline section and select a Content block, or click Add block > Content.
- Upload an Image and, optionally, a separate Mobile image.
- Enter a Subheading (often used for a year or milestone label).
- Add a Heading and Text to describe the milestone.
- Optionally set a Button label and Button link.
- Choose the Button style, and adjust Open link in new tab and Show button icon if needed.
- Click Save.
Add a video timeline item
- Under Timeline, click Add block > Content video.
- Select a Shopify-hosted Video, or enter a supported YouTube/Vimeo video URL.
- If using a video URL, optionally select a Cover image.
- Enter a Description for accessibility.
- Optionally configure a separate Mobile video, Mobile video URL, and Mobile cover image.
- Complete the Subheading, Heading, Text, and optional button settings as with an image item.
- Click Save.
Video items include a play control; the section does not automatically play the videos as the visitor changes slides.
Configure timeline layout and navigation
- Open the main Timeline section settings.
- Enable Show timeline navigation to display milestone labels that customers can select to switch between items.
- Choose Image placement: Image first or Image second. On mobile, the image appears first.
- Set Image ratio and Mobile image ratio to control the media proportions.
- Click Save.
If multiple blocks are present, the section also provides previous/next controls on desktop. When timeline navigation is disabled, compact pagination dots remain available on mobile.
Configure heading and colors
- Set the section Heading, Subheading, and optional Description.
- Adjust Heading size, Heading alignment, and Heading tag.
- Configure Highlighted text (and related scribble or reveal options) in the section or individual timeline blocks, if needed.
- Under Colors, adjust Text, Background, Background gradient, highlight colors, and button colors.
- Under Section, adjust Top padding and Bottom padding.
- Optionally enable Show section divider, Make section full width, or Make section rounded.
- Click Save.
Preview the Timeline section
- Preview the page and switch between timeline items.
- Check that milestone labels, images or videos, headings, and buttons display correctly.
- Test video playback if you have added Content video blocks.
- Preview the mobile layout and verify the media ratio and slide navigation.
Timeline behavior
- The section supports up to 15 timeline blocks, combining Content and Content video blocks.
- Each block appears as a separate slide in the timeline.
- Show timeline navigation controls the labeled timeline navigation when multiple blocks exist.
- A block's Subheading is used as its navigation label; if it is empty, the theme uses the slide number.
- The image/video placement can be changed for desktop; mobile displays the media before the text.
Troubleshooting
- Timeline navigation is missing: Make sure at least two blocks have been added and Show timeline navigation is enabled.
- The wrong milestone label appears: Check the Subheading field in the corresponding block.
- A mobile image is not displayed: Check the Mobile image field; without it, the desktop image is used.
- A video does not play: Check the Shopify video or YouTube/Vimeo URL, and use the play button on the storefront.
- The button does not appear: Enter a Button label, then add its Button link.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Portfolio on Scroll Section in Concept
How to Set Up the Image with Text Overlay Section in Concept