Adding a Progress Bar to your Order Pages
When designing an e-commerce site that contains a multi-step ordering process, such as with FastSpring, walking customers through the order process by making it simple and intuitive will help increase conversion rates. Frustration during the order process may cause customers to leave and pursue other options, but progress bars (also called progress trackers or progress indicators) are designed to help guide customers through a multi-step process and make them feel at ease. A progress bar will inform customers about what section of the checkout process they are currently on, what section(s) they have completed, and what section(s) remain.
Progress Bar Best Practices
Not all businesses are alike, and thus their progress bars will not be alike. While some will be plain text, others will include images, and the words and images chosen will vary. Based on our experience in e-commerce, we suggest that the progress bar you add to your FastSpring checkout process pages should:
- Provide a sense of action to visitors
- A visual, such as an arrow pointing to the right, symbolizing a "move forward" action
- Numbers for the steps
- Highlight the current checkout page from the other steps in the process
- Display horizontally above the main content of the order pages and below any primary navigation
- Provide confidence of mind to visitors by marking completed steps
- Include a "Review Order" or "Confirm Order" section
FastSpring Setup
To add a progress bar to your FastSpring order pages, you need to edit your style template. You will need to add html code to the window.xhtml file and style declarations to your CSS file, which are included in your style template's zip file. Then log in to FastSpring's SpringBoard. Go to SpringBoard Store Home » Styles. Rezip everything and upload it. Below we have provided four examples, designed to work with the majority of our checkout order flows, to assist you.
3 Step Process, with Images
This process will work best for page linking option 2: Add Product to Order and Checkout and option 3: Short Order Process.
Original Images
In this example. you will need three different images (named step1.png, step2.png, and step3.png) that are all the same length and width. You can use our images below or create your own.
Add this code to window.xhtml
<div class="step1"><img src="step1.png" /></div> <div class="step2"><img src="step2.png" /></div> <div class="step3"><img src="step3.png" /></div>
Add this code to your CSS file
.step1, .step2, .step3 {display: none;}
.store-page-product .step1,
.store-page-product-customer .step1,
.store-page-customer .step1,
.store-page-confirm .step2,
.store-page-complete .step3 {
display: block;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 755px; }
This Progress Bar in Action
3 Step Process, without Images
This process will work best for page linking option 2: Add Product to Order and Checkout and option 3: Short Order Process.
Add this code to window.xhtml
<div class="steps"> <div class="step1"><div class="snumber">1<div class="checkmark1">✓</div></div>Order Details</div> <div class="step2"><div class="snumber">2<div class="checkmark2">✓</div></div>Payment Info</div> <div class="step3"><div class="snumber">3</div>Order Confirmation</div> </div>
Add this code to your CSS file
You can easily customize this progress bar by editing the CSS classes defined below.
.steps {
display: none;
text-align: center;
padding-top:1em;
font-size: 20px;
font-weight: normal;
color: #999999;
width: 755px;}
.snumber {
background-color: #CCCCCC;
border: 1px solid #999999;
color: #999999;
display: inline-block;
font-size: 15px;
margin-right: 5px;
padding: 5px;
text-align: center;
width: 20px;
-moz-border-radius: 90px 90px 90px 90px;
-webkit-border-radius: 90px 90px 90px 90px;
-khtml-border-radius: 90px 90px 90px 90px;
border-radius: 90px 90px 90px 90px; }
.step1, .step2 {margin-right:20px;}
.step1, .step2, .step3 {display: inline-block;}
.store-page-product .steps,
.store-page-product-customer .steps,
.store-page-customer .steps,
.store-page-confirm .steps,
.store-page-complete .steps {
display: block; }
.store-page-product .step1,
.store-page-product-customer .step1,
.store-page-customer .step1,
.store-page-confirm .step2,
.store-page-complete .step3 {
font-weight: bold;
color: #666666; }
.store-page-product .step1 .snumber,
.store-page-product-customer .step1 .snumber,
.store-page-customer .step1 .snumber,
.store-page-confirm .step2 .snumber,
.store-page-complete .step3 .snumber {
background-color: #666666;
color: #ffffff; }
.checkmark1, .checkmark2 {
display: none; }
.store-page-confirm .checkmark1,
.store-page-complete .checkmark1,
.store-page-complete .checkmark2 {
display: inline; }
This Progress Bar in Action
4 Step Process, with Images
This process will work best for page linking option 1: View Product Detail Page and option 4: Shopping Cart - Add Product to Order.
Original Images
In this example. you will need four different images (named step1.png, step2.png, step3.png, and step4.png) that are all the same length and width. You can use our images below or create your own.
Add this code to window.xhtml
<div class="step1"><img src="step1.png" /></div> <div class="step2"><img src="step2.png" /></div> <div class="step3"><img src="step3.png" /></div> <div class="step4"><img src="step4.png" /></div>
Add this code to your CSS file
.step1, .step2, .step3, .step4 {display: none;}
.store-page-product .step1,
.store-page-product-offers .step1,
.store-page-contents .step1,
.store-page-customer .step2,
.store-page-product-customer .step2,
.store-page-confirm .step3,
.store-page-complete .step4 {
display: block;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 755px; }
This Progress Bar in Action
4 Step Process, without Images
This process will work best for page linking option 1: View Product Detail Page and option 4: Shopping Cart - Add Product to Order.
Add this code to window.xhtml
<div class="steps"> <div class="step1"><div class="snumber">1<div class="checkmark1">✓</div></div>Select Product</div> <div class="step2"><div class="snumber">2<div class="checkmark2">✓</div></div>Order Details</div> <div class="step3"><div class="snumber">3<div class="checkmark3">✓</div></div>Payment Info</div> <div class="step4"><div class="snumber">4</div>Order Confirmation</div> </div>
Add this code to your CSS file
You can easily customize this progress bar by editing the CSS classes defined below.
.steps {
display: none;
text-align: center;
padding-top:1em;
font-size: 14px;
font-weight: normal;
color: #999999;
width: 755px; }
.snumber {
background-color: #CCCCCC;
border: 1px solid #999999;
color: #999999;
display: inline-block;
font-size: 15px;
margin-right: 5px;
padding: 5px;
text-align: center;
width: 20px;
-moz-border-radius: 90px 90px 90px 90px;
-webkit-border-radius: 90px 90px 90px 90px;
-khtml-border-radius: 90px 90px 90px 90px;
border-radius: 90px 90px 90px 90px; }
.step1, .step2, .step3 {margin-right:25px;}
.step1, .step2, .step3, .step4 {display: inline-block;}
.store-page-product .steps,
.store-page-product-offers .steps,
.store-page-contents .steps,
.store-page-customer .steps,
.store-page-product-customer .steps,
.store-page-confirm .steps,
.store-page-complete .steps {
display: block; }
.store-page-product .step1,
.store-page-product-offers .step1,
.store-page-contents .step1,
.store-page-customer .step2,
.store-page-product-customer .step2,
.store-page-confirm .step3,
.store-page-complete .step4 {
font-weight: bold;
color: #666666; }
.store-page-product .step1 .snumber,
.store-page-product-offers .step1 .snumber,
.store-page-contents .step1 .snumber,
.store-page-customer .step2 .snumber,
.store-page-product-customer .step2 .snumber,
.store-page-confirm .step3 .snumber,
.store-page-complete .step4 .snumber {
background-color: #666666;
color: #ffffff; }
.checkmark1, .checkmark2, .checkmark3 {
display: none; }
.store-page-customer .checkmark1,
.store-page-confirm .checkmark1,
.store-page-confirm .checkmark2,
.store-page-complete .checkmark1,
.store-page-complete .checkmark2,
.store-page-complete .checkmark3 {
display: inline; }
This Progress Bar in Action
We're Here to Help
If you need assistance adding a progress bar to your FastSpring order pages, please open a support ticket.