Progress Bar type

At the top of the page, there are viewing modes to help you review your progress bar layout:

• Device View: See how the popup will appear to your customers on both PC and mobile devices.

• Milestone Display: Move the Cart Goal slider to preview how the progress bar changes as customers reach different milestones.

Here is an example of what the Progress bar section looks like on your storefront:

Progress bar section

Gift modal

You can hover an element in the preview to locate the edit option.

Progress bar

Currency Format

• Select currency format: Select how the values are displayed in the progress bar.

  • Amount

  • Amount with no decimals

  • Amount with comma separator

  • Amount with space separator

  • Amount with period and space separator

  • Amount no decimals with comma separator

  • Amount no decimals with space separator

  • Amount with apostrophe separator

• Change the default currency display: If you prefer not to use your store's default currency, check this box to customize how the currency will be displayed according to your preference.

Progress Bar

Choose the color for the elements below:

• Title label

• Milestone label

• Filled bar

Container

Adjust the appearance of the container section with the following settings:

• Background color: Choose between the default background color or a transparent background to suit your design.

Background color

• Border color: Set the color of the container’s border.

• Border width: Define the thickness of the container’s border.

• Border radius: Adjust the roundness of the container’s corners for a more polished or sharp look.

Reward selection button

• Adjust the button colors in the reward selection section with the following options:

  • Button color: Set the color of the buttons.

  • Button selected color: Choose the color for the button when it is selected.

• Hide this Claim Reward Part: If you enable the "Auto claim reward" option to automatically add rewards to the customer's cart, use this setting to hide the "Reward Claimed" section below the progress bar.

Gift Modal

This section only displays if you set up the "Free gift" reward and let your customers choose the gifts manually.

Users can customize the appearance of the Gift Modal section, including the following elements:

• Background color: Set the background color.

• Button color: Choose the color for the button within the modal.

• Checkbox color: Adjust the color of the checkboxes in the modal.

• "FREE" color: Customize the color of the "FREE" text displayed in the modal.

• Border color: Set the color of the border around the modal.

• Border width: Define the thickness of the border surrounding the modal.

• Border radius: Adjust the roundness of the modal’s corners.

Custom CSS

• This section allows you to customize the progress bar with CSS code, giving you full control over its appearance and layout, thereby ensuring the popup aligns perfectly with your store’s style.

• If you’re unable to do it, don’t worry! Just click the Contact Us button, and our team will assist you right away.

Advanced

This section allows you to change the position of the progress bar in the Cart and Cart drawer, including three options:

• Before the element

• Prepend the element

• After the element

In case you want to change the text of buttons and messages, please go to the Translation section or contact us for further assistance.

If you have any questions, just send us a message via Live Chat or email us at [e-mail]. Good luck with your promotion campaign! 💟