Progress bar

General settings

Title

Setting	Description
Text	Specifies the heading displayed above the progress bar.
Preset	This element inherits the font preset defined in the Theme Settings, ensuring consistent typography across the storefront.
Display title	Enables or disables the visibility of the progress bar’s title.
Text color	Allows you to customize the color of the progress bar’s title.
Text shadow	Enables or disables a shadow effect behind the progress bar’s title text.

Progress bar

Setting	Description
Percentage	Defines the target percentage value the progress bar will animate to, starting from 0%. The animation will smoothly fill the bar until it reaches this specified percentage.
Display percentage	Enables or disables the visible display of the percentage value on the progress bar.
Color	Sets the color of the filled portion of the progress bar, representing the completed percentage.
Background color	Defines the color of the unfilled portion of the progress bar, representing the remaining percentage.
Height	Specifies the thickness of the progress bar, measured in pixels. Increasing the height creates a bolder visual presence, while a smaller height results in a slimmer, more subtle indicator.
Border radius	Controls the roundness of the progress bar’s corners.

Inner text and Padding

Setting	Description
Text	Displays a custom text label within the filled portion of the progress bar. This text can show information such as the percentage value, a milestone description, or a status message, providing immediate context while integrating seamlessly into the bar’s design.
Text color	Sets the color of the text displayed inside the progress bar.
Text shadow	Adds or removes a shadow effect behind the text.
Top/Bottom padding	Adjust these values to control the amount of space between the section’s content and its outer edges.