Progress bar elements

How to create progress bars & cart value meters

Jonathan Denney avatar
Written by Jonathan Denney
Updated this week

Progress bar elements make it easy to visualize visitor progression through multi-step campaigns and encourage completion.

To add a progress bar, click to create a new element, choose "Progress Bar", choose a template or create from scratch.

Edit progress bar message

When you've added a progress bar element to your campaign, you'll notice that the panel gives you the ability to control the placement of the message.

Text can be placed inside or outside of the progress bar, or not shown at all.

You can also choose what text shows, with options such as:

  • Steps remaining - This will dynamically show many remaining steps there are left to be completed in the campaign and show a message like (Step 1/8). You can also swap "step" for any message you'd like.

  • Custom message - Prefer to write your own message without any dynamic numbers? Set "text to show" to "custom message" and you can write any context you'd like. This is helpful for cases where you'd like to just say something like "almost done!", or state a static number of steps such as "1 step left".

  • Cart offer progress - If your website is running on an ecommerce platform connected to ConvertFlow, such as Shopify, you can have the progress bar visualize how much more needs to be added to the shopping cart to get the configured cart threshold offer (example: $20/$50 need to get free shipping).

Styling your progress bar

In the "Theme" tab, text size, font family, and colors can be edited for all progress bar elements in the campaign.

With your progress bar selected in the builder, click the "Design" tab and you'll find lots of styling options to create very custom progress bars, will not affect other progress bars in the campaign.

Did this answer your question?