Steps timeline
Walk shoppers through a process or results journey with a vertical timeline, layered images and a spinning badge.
The Steps timeline section shows a vertical list of steps connected by a line, next to a primary image with a smaller overlapping secondary image and an optional spinning text badge. As shoppers scroll, the line can fill in and each step's dot lights up. Use it to explain how a product works, a routine ("Week 1, Week 4, Week 8"), your process or an order journey.
1. Our guide to set up a Steps timeline section:
2. Section settings
Section header
Subheading: Small text shown above the heading.
Heading: The main title of the section.
Heading size: 15–80px.
Header alignment: Left / Center.
Button label: Text on the button. Leave empty to hide the button.
Button link: Where the button goes.
Button style: Solid / Outline.
Button position: Below section header / Below media & timeline.
Layout
Media position: Which side the images appear on desktop: Right / Left.
Media width: Width of the image column on desktop, 35–60%.
Media
Primary image: The main image.
Secondary image: A smaller image that overlaps a corner of the primary image.
Secondary image position: Bottom right / Bottom left / Top right / Top left.
Secondary image size: Size of the secondary image relative to the primary image, 25–60%.
Primary image overlay: Darkens the primary image, 0–80%.
Spinning badge
Show spinning badge: Shows a round badge with text rotating around an icon, on a corner of the image.
Badge text: The text that circles the badge. The badge resizes automatically so the text forms a full circle.
Icon: The icon in the middle of the badge: None / Heart / Star / Check mark / Sun / Smile / Globe / Recycle / Lightning bolt / Snowflake / Certificate.
Alternative icon/image: Upload your own icon or logo for the middle of the badge. Replaces the icon above.
Badge position: Top right / Top left / Bottom right / Bottom left.
Badge text size: 6–24px.
Mobile scale: Badge size on mobile, relative to desktop, 40–100%.
Letter spacing: Space between badge letters, 0–8px. More spacing makes the badge larger.
Spin speed: Time for one full rotation, 6–30 seconds. Lower is faster.
Reverse spin direction: Spins the badge in the opposite direction.
Timeline
Animate line on scroll: Fills the connector line and lights up each step's dot as shoppers scroll down.
Connector line: Dotted / Solid.
Colors
Color scheme: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
Badge background: Background color of the spinning badge.
Badge text / icon: Color of the badge text and icon.
Dot color: Color of the step dots and the filled line.
Label background: Background color of each step's label.
Label text: Text color of each step's label.
Corner radius
Media: Rounds the corners of both images, 0–40px.
Section
Section width: Page width / Full width.
Top padding: 0–100px.
Bottom padding: 0–100px.
3. Step block settings
Each Step block is one point on the timeline. You can add up to 6 steps.
Label: Short tag shown above the step heading, such as "Week 1" or "Step 1".
Heading: The step's title.
Heading size: 15–48px.
Description: Text explaining the step.
4. Tips
Add both a Primary image and a Secondary image. The secondary image shows a placeholder until you add one.
Both images are cropped to a square, so use square images (at least 1200px wide for the primary image) with the subject centered.
On mobile and tablet, the images appear above the timeline and Media width no longer applies.
Keep Badge text short and punchy, for example "Clinically tested • Vegan • Cruelty free".
Was this helpful?