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.
/msdyn_blobfile/$value)
The Checkout & Registration Manager allows you to use CSS 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 combined shipping and billing pages, and you show the order review page. A shopper on your shipping information 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.
/msdyn_blobfile/$value)
Notes:
- 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 CSS for your progress indicator
- Sign in to your My Services page.
- Click the Store link.
/msdyn_blobfile/$value)
- Go to Checkout & Registration Manager.
/msdyn_blobfile/$value)
- Go to Visual Customization.
/msdyn_blobfile/$value)
- From Configurable Styles, click the Progress Indicator tab.
/msdyn_blobfile/$value)
- Select the CSS option.
/msdyn_blobfile/$value)
- Select or enter options for the elements you wish to customize:
- Progress Indicator Labels - Edit the text appearing within the progress indicator (40 characters max.). Note the number of text boxes that appear is determined by the flow settings you selected (multi-page, single page, show or hide order review, combine or separate shipping and billing information) in the Global Settings module.
/msdyn_blobfile/$value)
- Label Type - Visited, Not Visited, and Current. Enter or select values for each the following fields.
- Type: Use the drop-down menu to select a font face (Arial, Courier, Times, Verdana) for text in your progress indicator.
- Color: a hexadecimal color value or use the color picker to select a font color value
- Background: Enter a hexadecimal color value or use the color picker to select a background color value (appearing behind the text label).
/msdyn_blobfile/$value)
- Click Save when finished, or Save & Preview to save and view your changes.
/msdyn_blobfile/$value)
- Publish your Order Settings.
/msdyn_blobfile/$value)
You can also use images for your progress indicator rather than CSS.
