# Progress timeline

<figure><img src="/files/Q8RLRiyit1BHDQN5RbWQ" alt=""><figcaption></figcaption></figure>

Showcase a step-by-step progress timeline to highlight key milestones, benefits, or results over time in a clear and engaging layout.

## How to add a Progress timeline section to your Shopify store

{% hint style="success" %}

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Progress timeline** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Progress timeline section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### Section settings

<table><thead><tr><th width="205.038330078125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Container</strong></td><td>Choose the section width: full width or fixed within the page layout.</td></tr><tr><td><strong>Progress bar color</strong></td><td>Set the color of the vertical timeline/progress indicator.<br><img src="/files/RDrcnPDDKQeyoaSwNEcA" alt=""></td></tr></tbody></table>

{% hint style="info" %}
Check out other section settings: [Overview](/pebble-theme/theme-sections/overview.md#common-settings-available-in-most-sections)
{% endhint %}

### Block settings

The Progress timeline section consists of three main blocks: **Header**, **Media**, and **Timeline**.

{% tabs %}
{% tab title="Header" %}

<figure><img src="/files/iMcuRZdka2S5M33fqMay" alt=""><figcaption></figcaption></figure>

Use the **Header** block to create and customize the section’s heading and introductory content.

<table><thead><tr><th width="214.1806640625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Set the header alignment: left, center, or right.</td></tr><tr><td><strong>Devices</strong></td><td>Switch between desktop and mobile padding settings.</td></tr><tr><td><strong>Bottom</strong></td><td>Adjust the spacing below the header.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 Nested dynamic blocks

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Image** – Display an image or icon
* **Button** – Add a call-to-action
  {% endhint %}

{% hint style="success" %}
📝 Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endhint %}
{% endtab %}

{% tab title="Media" %}

<figure><img src="/files/4vHwoP4ZmCVWCA74JQHX" alt=""><figcaption></figcaption></figure>

Add and customize images within the section, with controls for size, aspect ratio, and corner styling to fit your design.

<table><thead><tr><th width="230.0528564453125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload or select images to display in the section.</td></tr><tr><td><strong>Aspect ratio</strong></td><td>Control how the image is scaled.</td></tr><tr><td><strong>Width</strong></td><td>Adjust the image width relative to its container.</td></tr><tr><td><strong>Corner radius</strong></td><td>Set the roundness of the image corners.</td></tr></tbody></table>

#### How to create the overlapping image layout

{% hint style="success" %}

1. Upload **2 images** in the **Media** block
2. Adjust the **width settings** for each image so that **Image #2 overlaps Image #1**
   {% endhint %}

<figure><img src="/files/doBf1vg7oPyU53yESDP1" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
The Media block (images) becomes **sticky while scrolling** when the timeline content is long, keeping the visuals visible as users read through the timeline.
{% endhint %}

#### 💡 Best practices <a href="#best-practices" id="best-practices"></a>

* Keep **Image #2 smaller than Image #1** → avoids visual clutter.
* Use **simple backgrounds** for the overlay image.
* Add **corner radius (15–25px)** for a softer, modern feel.
* Make sure the overlap does **not cover important parts** (faces, product labels).
* Recommended **image ratio**:
  * **Image #1 (main/background image):** Use a 4:5 or 3:4 portrait ratio to create a strong visual anchor and fill the space effectively.
  * **Image #2 (overlay image):** Use a 1:1 or slightly portrait (4:5) ratio to keep it compact and clean when overlapping.
* Recommended **width settings**:
  * Set **Image #1** to 70–80% width and **Image #2** to 40–50% width to create a clean, balanced overlap.

The Media block can also be combined with the **Spinning Icon Badge block** to create a more dynamic and eye-catching visual layout, helping highlight key products, promotions, or brand messages.

{% hint style="success" %}
📝 Learn more: [Basic](/pebble-theme/theme-blocks/basic.md#spinning-icon-badge)
{% endhint %}
{% endtab %}

{% tab title="Timeline" %}

<figure><img src="/files/DUxVSLO0QYpZfwJsLITj" alt=""><figcaption></figcaption></figure>

Displays a timeline item with customizable spacing and a badge to highlight key milestones or steps.

<table><thead><tr><th width="232.61395263671875">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content row gap</strong></td><td>Adjust the spacing between timeline content elements.</td></tr><tr><td><strong>Badge text</strong></td><td>Set the label displayed inside the timeline badge.</td></tr><tr><td><strong>Badge color</strong></td><td>Choose the text color of the badge.</td></tr><tr><td><strong>Badge background color</strong></td><td>Set the background color of the badge.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 Nested dynamic blocks

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
  {% endhint %}

{% hint style="success" %}
📝 Learn more: [Basic](/pebble-theme/theme-blocks/basic.md#text)
{% endhint %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/theme-sections/progress-timeline.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.