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 & Registration 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.

Use images for your progress indicator

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Checkout & Registration Manager.
   
4. Go to Visual Customization.
   
5. From Configurable Styles, click the Progress Indicator tab.
   
6. Under Customize Progress Indicator, select the Use Images radio button then click the Upload link under Visited Images.
   
7. Click the Browse button and navigate to your image file.
   
8. Click the Upload button.
   
   A preview of your image appears on the page.
   
9. Click the Save button.
   
10. Click the Upload link under Not Visited Images then and repeat steps 7 and 8. Afterwards, do the same for Current Images.
    
11. Repeat steps 6-8 for all other images you wish to upload for Step 2, Step 3, and Step 4 of the Progress Indicator.
12. Click the Save button when finished or the Save & Preview button to save and preview your changes.
    
13. Return to Store Manager and publish your Order Settings.
    

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