Create a Shipping Progress Bar in GemPages

How to create a shipping progress bar?

To display a shipping progress bar in your product section, you can use the Delivery Date and Stock Counter element in GemPages Editor V7. Here’s how to do it:

Step 1: Open GemPages Dashboard > Pages > Choose the preferred page to open the editor.

Step 2: In the left sidebar, search “Delivery Date” and add the element to any product you want to display the shipping progress bar. 

Step 3: Adjust the Delivery Date element in the Settings tab as per your requirements, including:

• Custom text, date text, text font, text size, and text color
• Estimate days to specific or range type, and change the date format

You can choose the device’s display by navigating to the Advanced tab.

Step 4: Back to the search in the left sidebar, enter Stock Counter and drop this element under the Delivery Date created in [Step 3].

Step 5: Customize the Stock Counter element to show only the progress shipping bar.

• Open the icon picker dialog to choose another suitable icon, or you can upload a new one.

• Under the Progress bar section, change the color, adjust the height, corner, and effect.
• Under the Message section, delete the text next to the Template to show only the progress bar. 

Step 5: Save the settings and hit Publish to make your changes live. You can preview to check the results before publishing.