Progress Bar

Create guideposts along the customer journey

Small tweaks to a site can lead to significant conversion improvements. Take the humble Progress bar, for instance.

When deployed effectively, this simple graphic can build customer confidence by showing them they're on the right path and that their transaction is almost complete.

Adding a widget

To add a Progress bar widget:

1. Open a step.

2. Click one time the element (e.g. container, row cell) that will hold the widget.

3. Click the Progress bar widget on the left panel. Funnelish displays the widget and left-side settings panel.

Progress bar widget default settings

Customizing the bar

You can customize the appearance of a bar (e.g. design and length of the progress bar). All the standard design tools are here, including text, colors, borders, margins, and padding.

Click the widget one time on the canvas. The settings panel displays on the left side of the screen.

To change bar length and label:

1. Go to the settings panel.

2. Locate the Value heading.

3. Change the figure as required.

4. Go to the Label text heading.

5. Enter a Value figure.

6. Click Save changes.

Note Make sure you manually input the same figure for the Value and Label text.

Set the progress bar length and label

Adding animation

In addition to color, height, and label position (plus other customization settings), you can add an animation effect to the progress bar

1. Scroll down to Use animation.

2. Switch on the toggle. (optional)

3. Click Save changes.

4. Click Preview.