Progress indicators are typically images or content that helps guide the user through a multiple step process. The images or content tells the user what step they are currently on, what steps if any have been completed and what steps are remaining in order to complete the process.

The Checkout Manager allows you to use images to create a progress indicator for your custom checkout pages. You can create progress indicators for the following cases:

• Visited: this style will apply to all pages that the shopper has been to in your checkout process.
• Non-visited: this style applies to all pages that the shopper has not been to in the checkout process.
• Current: this style applies to the page on which the shopper is currently located.

For example, imagine you have a multi-page checkout with separate shipping and billing and you show the order review page. A shopper on your order review page would see:

• the visited style of progress indicator for the shipping and billing information page
• the current style for the order review page
• the non-visited style for the confirmation page

Notes:

• Images can be a maximum of 170 px width X 25 px height.
• only gif, jpg, and png formats are supported (no bmp files)
• The progress indicator does not function as navigation for shoppers; it only serves to indicate their progress in the checkout process.
• The progress indicator will change according to the flow settings you have selected; for example if you display shipping and billing information on the same page, then the progress indicator will have three graphics instead of four (shipping & billing, order review, order confirmation). Keep this in mind especially if you use images for your progress indicator.
• CSS typically renders faster than images so if you are concerned about page loading speed, you may wish to use CSS rather than images for your progress indicator.

To use images for your progress indicator:

1. From the Checkout Manager main page, click the "Visual Customization" link.
2. Click "Configurable Styles".
3. Click the "Progress Indicator" tab.
4. Select the "Use Images" option.
5. Click the "Upload" link in the first column.
   (A browse dialog opens).
6. Click the "Browse" button.
   (A File Upload dialog appears).
7. Navigate to and select the file you wish to upload and click "Open".
8. Click the "Upload" button.
   (A preview of your image appears on the page).
9. Repeat steps 5-8 for all other images you wish to upload for visited, non-visited, and current page images.
10. Click "Save" when finished or "Preview" to save and view your changes.
11. Return to the Store Manager and publish your order setting changes when ready.

You can also use CSS for your progress indicator rather than images.