How to Use PageFly Progress Element

Summary: The PageFly Progress Element helps you show information with numbers or data on your page. Numbers can help get more people to buy things because people like seeing real facts and stats.

Check this video tutorial to understand more about this element:

How To Access The Progress Element

• Step 1: Click on the Elements on the left toolbar
• Step 2: In PageFly tab, click on the Progress element in the menu
• Step 3: Drag and drop the variant that you need into the page editor and then start using it.

Progress element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.

Drag a variation to the layout and see how it can be configured.

How To Configure For The Progress Elements

Progress element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Select the element ProgressBox in layout to see its parameter.

Check out the parameters of the General and Styling tabs for the Progress element.

General Tabs Configuration

The Progress element allows you to add multiple items to display progress or percentage information that you want to show.

You can add the progress item(s) and rearrange the order of these item(s)by dragging the 3 dotted icons on the left of the items’ names. You can also duplicate or remove the progress item(s) from the progress box.

Progress Items Configuration

The Progress element is the combination of multiple Progress. To edit each progress bar, choose it separately > go to the General tab.

Settings Progress Type: Select bar type: Bar or Circle Style: Select the style for text: Text Inside, Text Outside, or Text First Percent: Set the percentage of the progress Weight: Adjust the bar’s thickness
Header Settings Text: Enter the title for the progress bar Color: Set color for the text, or bar title Font Size: Set font size for the text, or bar title Spacing: Set border spacing for 4 sides of the text.
Color Settings Number: Set color for the number of progress value Active: Set color for the active progress area Background: Set color for the inactive progress area, or background

You can get further information about ACTION here and about ATTRIBUTES, VISIBILITY, ANIMATION parameters here.

Styling Tab Configuration

You can check more information about the Styling tab here.

Use Cases

• Show Product Features For product pages, use progress bars to highlight key features and specifications in an engaging visual way.
• User Progress Tracking For sites with courses, challenges or gamification, use progress bars to motivate users by showing their advancement.
• Showcase Project/Task Completion Use the progress bar to visually represent how far along a project or task is. This works great on service pages or portfolio sections.

Tips And Best Practices

• Use contrasting colors for the active/completed portion to draw attention.
• Don’t overcrowd the page – limit to showing only the most important progress metrics.
• Avoid using progress bars for purely decorative elements without real data.

Frequently Asked Questions

1. What is a PageFly Progress element?

PageFly Progress Element is designed to visualize boring data and information, as it is one of the important content elements that should be used on Shopify Page.

2. Why should I use PageFly Progress elements?

Normally, the PageFly Progress Elements are used to visually represent the completion of a task, project and operation system.

Additional Resources

• What is Shopify Progress Bar?
• Create a PageFly Product Page in 2024