How to Use PageFly Progress Element

About PageFly Progress ElementClick to copy

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 ElementClick to copy

  • Step 1: Click on the Plus icon which is the Add element function
  • Step 2: Click on the Progress element in the dropdown menu
  • Step 3: Drag and drop the element you want into the page editor and then start using it.

Note that you can search this element by using the search function instead of finding it in the sidebar.

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 The Progress ElementsClick to copy

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 ConfigurationClick to copy

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 ConfigurationClick to copy

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 ConfigurationClick to copy

You can check more information about the Styling tab here

Use CasesClick to copy

  • 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 PracticesClick to copy

  • 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 QuestionsClick to copy

What Is A PageFly Progress Element?Click to copy

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.

Why Should I Use PageFly Progress Elements?Click to copy

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

Additional ResourcesClick to copy

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us