> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/steps-timeline.md).

# Steps timeline

Walk shoppers through a process or results journey with a vertical timeline, layered images and a spinning badge.

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

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:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Steps timeline.**
* Click **Save.**
  {% endhint %}

### 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".