Theme Sections
Progress timeline
3 min read
_Q8RLRiyi.jpg)
How to add a Progress timeline section to your Shopify store
- In the theme editor (Customize), click Add section.
- Select Progress timeline section.
- Make necessary changes.
- Save.
How to customize a Progress timeline section
Section settings
| Setting | Description |
|---|---|
| Container | Choose the section width: full width or fixed within the page layout. |
| Progress bar color | Set the color of the vertical timeline/progress indicator. |
Check out other section settings: Common settings available in most sections
Block settings
| Setting | Description |
|---|---|
| Alignment | Set the header alignment: left, center, or right. |
| Devices | Switch between desktop and mobile padding settings. |
| Bottom | Adjust the spacing below the header. |
📦 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
📝 Learn more: Basic
| Setting | Description |
|---|---|
| Image | Upload or select images to display in the section. |
| Aspect ratio | Control how the image is scaled. |
| Width | Adjust the image width relative to its container. |
| Corner radius | Set the roundness of the image corners. |
How to create the overlapping image layout
- Upload 2 images in the Media block
- Adjust the width settings for each image so that Image #2 overlaps Image #1
💡 Best practices
- 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.
📝 Learn more: Basic
| Setting | Description |
|---|---|
| Content row gap | Adjust the spacing between timeline content elements. |
| Badge text | Set the label displayed inside the timeline badge. |
| Badge color | Choose the text color of the badge. |
| Badge background color | Set the background color of the badge. |
📦 Nested dynamic blocks
- Heading – Add a main title
- Subheading – Provide supporting text above or below the heading
- Text – Include additional descriptions or details
📝 Learn more: Basic
Last updated