Starting from version 8.4.0, we introduced the new Timeline section, designed for creating engaging chronological layouts and immersive storytelling experiences.
Timeline Section
The Timeline section in the Be Yours theme allows you to display chronological content in an interactive two-column layout. The left side shows timeline items such as dates, milestones, descriptions, and optional source links. The right side displays the matching image for each timeline item.
This section is useful for brand stories, company milestones, product history, event timelines, launch roadmaps, or any content that needs to be presented in a clear sequence.
STEPS:
1. Adding the Timeline Section
To add the Timeline section to your store:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Customize.
- Open the page template where you want to add the section.
- Click Add section.
- Select Timeline.
- Click Save.
The Timeline section can be added to page templates, product templates, collection templates, and other supported template areas. It is not available inside the header or footer groups.
2. Adding Timeline Items
The Timeline section uses Timeline item blocks. Each block represents one point in the timeline.
To add a timeline item:
- In the Theme Editor, open the Timeline section.
- Click Add block.
- Select Timeline item.
- Add the date, text, image, and optional source information.
- Repeat the same steps to add more timeline items.
- Drag and drop the blocks to reorder the timeline.
- Click Save.
Each timeline item can display a date, description, image, optional image alt text, optional source link, and highlight effect.
3. Section Settings
The section settings control the timeline layout, animation, colors, typography, and image spacing.
Layout
-
Section height: Choose the height of the timeline section.
400500600
Use a taller height if your timeline text or images need more vertical space.
Animation
-
Animation speed: Adjust how fast the timeline content changes.
- Minimum:
300ms - Maximum:
1200ms
- Minimum:
A lower value makes the transition faster, while a higher value makes it smoother and slower.
Timeline Dots
- Show timeline dots: Enable this option to show the timeline bar and dot indicator.
This helps customers understand that the content is part of a timeline sequence.
Colors
- Timeline background color: Set the background color for the timeline text panel.
- Content background color: Set the background color for the image/content panel.
- Accent color: Set the accent color used for the timeline indicator.
- Date color: Set the color of the timeline date.
- Text color: Set the color of the timeline description text.
- Highlight color: Set the highlight color used when highlight text is enabled.
Typography
- Date size: Choose the text size for the date.
- Text size: Choose the text size for the timeline description.
Image
- Enable image padding: Add spacing around the image inside the content panel.
This is useful when you want the image to appear with breathing room instead of filling the full panel.
4. Timeline Item Settings
Each Timeline item block has its own content, image, source link, and highlight settings.
Date
- Date: Add the date or milestone label for the timeline item.
Example:
FEB 14, 2022
You can also use short milestone labels, such as:
Launch Day
Text
- Text: Add the description for this timeline item.
Use this field to explain what happened during this step, event, or milestone.
Image
- Image: Select the image displayed for this timeline item.
- Image alt text: Add alternative text for the image.
If the image alt text is left blank, the section will use the timeline text as the fallback alt text.
Source Link
- Source link: Add an optional source URL.
- Source text: Add the text displayed for the source link.
The source link will only appear when both Source link and Source text are added.
Example:
Source text: source
The source will display after the timeline description.
Highlight
- Enable highlight: Turn this on to highlight specific parts of the date or text.
- Highlight style: Choose the highlight effect, such as marker, circle, underline, squiggle, or solid color.
To highlight text, make sure the text follows the highlight format supported by the theme.
5. Recommended Use Cases
You can use the Timeline section for many types of content, such as:
- Brand history.
- Company milestones.
- Product launch timeline.
- Event schedule.
- Sustainability journey.
- Press or award timeline.
- Product development process.
- Before-and-after story.
- Educational step-by-step content.
Example timeline structure:
- First item: Introduce the beginning of the story or event.
- Second item: Add an important milestone or update.
- Third item: Highlight a major achievement.
- Final item: End with the latest result, current status, or call-to-action.
Troubleshooting
If the Timeline section does not display correctly, please check the following:
- Make sure at least one Timeline item block has been added.
- Make sure each timeline item has a date or text.
- If the image does not display, check that an image has been selected for the timeline item.
- If the source link does not appear, make sure both Source link and Source text are filled in.
- If the timeline dot does not display, make sure Show timeline dots is enabled.
- If the transition feels too fast or too slow, adjust the Animation speed setting.
- If the image looks too close to the edge, enable Image padding.
- If the text is hard to read, adjust the background and text color settings.
- If the highlight effect does not appear, make sure Enable highlight is turned on for the timeline item.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
Seasonal Deals in Header
Slideshow Section