> ## Documentation Index
> Fetch the complete documentation index at: https://sentiment-docs.arhamwebworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Milestone timeline

The **Milestone Timeline** section displays a chronological sequence of brand milestones, each with a year, title, body text, and an optional visual highlight. It's suited for about pages, brand story pages, and editorial content communicating the history, growth, and defining moments of your house.

<Frame>
  <img src="https://mintcdn.com/arhamwebworks-95d5f818/1LaJPzRPvFD5XJSV/images/milestone-timeline.webp?fit=max&auto=format&n=1LaJPzRPvFD5XJSV&q=85&s=ca98974312be99f4f543f8d525569eb2" alt="Milestone Timeline" width="1917" height="904" data-path="images/milestone-timeline.webp" />
</Frame>

### How to Add the Section

1. From your Shopify admin, go to **Online Store → Themes** and click **Customize**.
2. Navigate to the page where you want to add this section.
3. Click **Add section** and select **Milestone timeline**.
4. Add **Milestone** blocks for each event in your timeline, in chronological order.
5. Click **Save**.

### Section Settings

#### Content

* **Eyebrow:** Small label above the heading.
* **Heading:** Main section heading. Supports rich text and italic emphasis.
* **Heading typography:** Select the typographic style for the heading.
* **Link label / Link URL:** An optional CTA link displayed beside the heading.

#### Style

* **Full width:** When enabled, the section stretches edge-to-edge.
* **Color scheme:** Choose a color scheme for the section.

#### Spacing

* **Padding top / Padding bottom:** Control vertical spacing around the section.

***

### Milestone Block Settings

Each Milestone block is one event in the timeline.

* **Year:** The year or date label for this milestone (e.g., "2016").
* **Title:** The milestone heading. Supports rich text and italic emphasis for design variety.
* **Body:** Supporting description text providing context for this milestone.
* **Highlighted:** When enabled, this milestone receives a distinct visual treatment — use it to draw attention to founding moments, major launches, or pivotal events.

<Frame>
  <img src="https://mintcdn.com/arhamwebworks-95d5f818/1LaJPzRPvFD5XJSV/images/milestone-timeline-1.webp?fit=max&auto=format&n=1LaJPzRPvFD5XJSV&q=85&s=84b73fa79209cd0d8b77f21ebb648d3b" alt="Milestone Timeline Settings" width="1923" height="869" data-path="images/milestone-timeline-1.webp" />
</Frame>
