How to Use PageFly Progress Element

What is PageFly Progress Element?Click to copy

PageFly Progress Element is a perfect way to show information, by adding more data or statistics to your page. Numbers can be a great help in bumping conversion rates because let’s be honest, who doesn’t like convincing stats?

Check this video tutorial to understand more about this element:

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

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.

Progress Elements ConfigurationClick 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

Progress element

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

General Tabs ConfigurationClick to copy

You can read more about the ACTION parameter here.

This is a parameter that all elements have. You can read more here.


Progress Items

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 element

Progress Settings

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

Check out: What is Shopify Progress Bar?

Progess – General 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
Progress element

Progess – 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.
Progress element

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
Progress element

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

Frequently Asked QuestionsClick to copy

What is PageFly Progress Elements?Click to copy

PageFly Progress Elements are designed to visualize boring data and information, as it is one of the important content elements 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.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us