Blog

25 Must-Have Pages for Your E-commerce Website

Tags:

What pages make up an e-commerce website? The most essential ones that come to mind are home page, product page, shopping cart, and checkout. What else? We reviewed e-commerce websites that we’ve designed over the years and also researched a number of popular e-commerce websites to put together a master site map of every must-have page that should be included in an e-commerce website. We identified 25 pages that we believe are very important for any e-commerce website to include.

Master E-commerce Site Map
The master site map of the must-have pages in an e-commerce site
1. Home

The homepage is important, no question about that. It’s often the first impression that a brand gets to make, and usually the first page to tackle in an e-commerce design. The homepage can include promotions, branded lifestyle imagery, and featured products or categories. Value propositions should be clear, such as free shipping or what makes the brand or products unique. While the homepage is regarded as the front door of the site, keep in mind that people don’t always enter through the homepage and may arrive via direct links to other pages.

Home-DailyBurn
The Daily Burn Store’s homepage introduces their products in context of the customer’s lifestyle and goals so customers understand what they’re selling. There’s even an eye-catching promotional banner at the top for a limited-time discount code.
blog_Home-BananaRepublic
Banana Republic’s homepage, like many fashion e-commerce stores, promotes their latest looks and specific product categories, keeping it highly visual. They also call out any special offerings, like sales or in this case, their reservation service.
2. Category Overview

This refers to the landing page for a top level category, such as Women or Electronics, which will display an overview of what’s within that category rather than list all the products. Multiple Category Overview pages may be used if there are more than 2 levels, such as Womens > Tops > Sweaters. However, if your categories are only one level deep, you can skip the Category Overview page and go straight to the Category page (next).

Category Overview: Best Buy Computers & Tablets
Best Buy’s Category Overview for Computers & Tablets guides you to the product subcategory that you are looking for, such as Tablets, Laptops, Desktops, etc.
CategoryOverview: UO Womens
Urban Outfitters’ Category Overview for Women’s promotes different product lines with branded lifestyle imagery. The subnavigation across the top allows you to get to what you’re looking for since not every section is represented with promotional graphics on this landing page.
3. Category Page

The Category page is the list view of products for a specific category or subcategory, usually displayed in a grid layout. It often includes filters so the user can drill down and find what they are looking for. The focus of this page is for the user to browse and see a lot of products at once, compared to the Category Overview which focuses on promotion and wayfinding.

Category Page: Zappos
Zappos’ large product selection in their Women Shoes category requires a full column of filters to aid the user in shopping.
Category: Huckberry
Huckberry’s category page for Tops goes for larger product thumbnails to showcase more details about the products as you browse.
 4. Product Page

This is the individual view of a product with the full product details and pricing. The main call to action is the Add to Cart button. Optional elements on this page may include reviews, related products, and social media sharing.

Product Page: JCrew
J.Crew’s product page for this pair of jeans is well structured and includes multiple product images, variants and sizes, related products, and reviews.
Product Page: Kind Snacks
KIND’s product page for each of their bars includes a panel of nutritional facts–important details for a healthy food product.
5. Search and Search Results

E-commerce sites should have search functionality, especially for sites with a wide range of products. The search field is usually located in the navigation menu. Make sure to consider how the Results page displays the results. This page often follows the Category Page template, or it could have its own unique design.

Search: Urban Outfitters
Urban Outfitters shows the top results in a flyout as you type, with a link to see all results, which goes to a page that follows the Category Page template.
Search: Zara
Zara’s search field autocompletes and displays the results as you type.
6. Login/Create Account

E-commerce sites with account functionality allow customers to save data such as order history and payment information and can allow for other interactions such as wish list management, the accrual of rewards/loyalty points, and special access to deals. The login/create account form can live on its own page or be treated as modals or dropdowns. Make sure creating an account is accessible from the login fields (and vice versa), so when a user realizes they don’t have a login they can easily get to Create Account.

blog_LoginJoin-boxedbackcountry
Login fields as a modal (left) from Backcountry, and as a dropdown (right) from Boxed. Note the links at the bottom of each to create an account.
Login and Join page: Burton
Burton uses a page to include both Login and Create Account actions side by side. Note that Create Account tells you about the benefits of making an account.
 7. Add to Cart Confirmation Element

This is technically not a page, but it’s a must-have view to include. It’s important to provide visual feedback when the user adds an item to their cart. Often it’s in the form of a dropdown or flyout coming from the cart icon in the nav, or a modal on the page. Keep it informative by recapping what was added and update the cart subtotal. This is also a great opportunity to get the user to keep shopping by showing how close the user is to free shipping and presenting related products.

Add to Cart Confirmation modal: Target
Target’s add to cart confirmation uses a modal that suggests add-ons and similar products.
AddtoCartConfirmation: VS
Victoria’s Secret’s confirmation is a straightforward flyout from the Shopping Bag in the navigation.
AddtoCartConfirmation: Boxed
Boxed’s confirmation flyout presents a meter showing how close you are to getting free shipping, nudging you to add more items.
AddtoCartConfirmation: Ayr
Ayr has the full cart preview slide out once you’ve added an item.
8. Cart page

The shopping cart needs to list everything the user has added with the ability for the user to make changes. It’s good practice to show estimated shipping cost and the promo code field at this point so the user can get a good idea of their final cost without going too deep into the checkout process (for shipping estimates to work, the user may have to input their zip code in advance). You don’t want abandonments to happen on the last step of the checkout when customers discover the cost of taxes and shipping and that their promo code doesn’t work–it’s frustrating for both the store and the customer. The cart page can also be an opportunity to upsell related products.

Cart-Reebok
Reebok’s cart shows many helpful elements such as the ability to enter promo code and clear information about getting help and free shipping.
Cart-Harrys
Harry’s is a cleaner, more straightforward cart, while also presenting product suggestions.

 The Checkout Flow:

The following pages for the checkout flow are the most critical must-haves in an e-commerce site, as these pages are where the conversion (the sale!) happens.

9. Log In/Guest Checkout

After the cart review is the perfect moment to prompt the user to log in (if not already logged in) for a quicker checkout experience by using saved information. The user may not want to deal with creating an account or remembering their password, so provide the ability to checkout as a guest, which will require the guest to fill out all their information.

Checkout-Login-Walmart
Walmart shows a modal to login or continue as guest. Their “Save time now” and “Save time later” copy helps the user understand the difference between the two New Customer options.
Checkout-Login-Alternative
Alternative Apparel includes the Login/Guest Checkout step at the top of their one-page checkout flow.

The next 3 sections, Shipping, Payment, and Review, can be treated as a single page or as separate steps.

 10. Shipping

The shipping step includes the form fields to gather shipping address. There’s often a checkbox to use the shipping address for the billing address.

Checkout-Target-Steps
Target is an example of a checkout process broken out into steps, starting with the shipping step.
Checkout-Onepage-VictoriasSecret
Victoria’s Secret has all the steps on a single page, starting with the shipping address. Later steps are collapsed so the page isn’t overwhelming with a large number of fields.
11. Payment

The payment step includes form fields to input payment information. This may include fields to enter billing address, especially if it’s different than the shipping address. Also include the option to enter gift cards or promo codes, or pay with rewards points or store credit.

Checkout-Payment-BestBuy
Best Buy’s Payment step is specially designed for their diverse range of payment options.
12. Review

This is an important step to review all items to be purchased, the shipping info, payment method, discounts, and extra costs like taxes or express shipping. Make sure it’s clear that this is a review step and that the main call to action is to submit the order.

Checkout-Review-Everlane
Everlane gives a clear, simple review step, with the header “Your order is ready to be placed”
13. Confirmation

Once the customer submits the order, give them a nice thank you message and confirm that the order was submitted successfully. It’s helpful to display the order details and info on how to modify the order if the user catches a mistake after submission. If this was a guest checkout, take the opportunity to prompt the user to create an account to save all the information that they just submitted.

Confirmation pages may be used to display a message other than a thank you. As the system processes the order, something could go wrong and the site will need to return an error page instead of a confirmation to explain that an item sold out by the time the order was submitted.

Confirmation-shoebuy
The confirmation page from a guest checkout on Shoebuy convinced me to create an account by presenting the value of an account (to earn rewards) followed by 2 simple password fields which make it easy to join.

 Account pages:

14. My Orders / Order History

The Orders page lists any current orders as well as all past orders so the user can reference previous purchases.

OrderHistory-Zappos
Zappos’s Order History is a straightforward list, with easy to understand statuses like “We’ve Sent It!”
OrderHistory-Boxed
Boxed displays the order history in a more visual way, showing thumbnails of what was in each order so you can identify the order at a glance.
15. Individual Order View

This page is like the receipt for a given order. It should include full details for that order–from what was bought to where it got shipped to. Depending on the sophistication of the e-commerce platform and its integration with shipping/fulfillment software, a tracking number may also be included with each order.

IndividualOrderView-Amazon
Amazon goes beyond the order details and includes useful actions you can take such as tracking, leave a review, or buy it again.
16. My Profile / Account Settings

Whether it’s labeled as “My Profile”, “My Settings”, “Account Information”, and so forth, this page includes all the basic account fields, such as name, email, and change password. It’s common to include any additional information that’s collected from the user, such as demographic information.

AccountSettings-Sephora
Sephora, a beauty products store, includes beauty-specific profile fields alongside the standard account fields in their Account Information page.
17. Payment Settings

The Payment Settings (or Manage Payment) page lists saved payment info (gathered from previous orders), with ability to update/delete that information.

Account-payment-Amazon
Amazon’s sophisticated platform allows for a variety of payment methods. Their Payment Settings page makes it easy to manage them all.
Account-payment-Groupon
Groupon opts to show the Add New Card fields on the page.
18. Addresses

The Addresses page lists saved shipping addresses (also gathered from previous orders), with ability to update/delete.

Account-addresses-etsy
Etsy’s Addresses page makes it easy to see which one is the default shipping address.

Footer and Content Pages:

19. Email Sign up

Email is a critical lifeline of e-commerce. It’s a sure way to guarantee return customers and market to interested prospective customers. Make it easy for interested visitors to sign up. This doesn’t have to be a dedicated page–a simple field in the footer or a pop-up modal can be used. Make sure to provide a short and sweet reason why to sign up and what type of emails they’ll will be getting. Also, don’t forget to consider the confirmation message that comes after submission. This, too, can be its own page or load into the modal/footer area.

EmailSignup
These examples from Backcountry (left) and J. Crew (right) include a sentence about what type of emails you can expect. These fields live within the footer of the site.
EmailSignup-modal-parachute
Parachute uses a modal that appears when visiting the site. They offer an incentive to sign up, like free shipping.
20. Returns

Returns are an important part of shopping online, which is why there should always be a clear link to it in the footer. This page should also be accessible during the checkout flow, as cart abandonment may happen when a user is unsure about return policy and can’t confidently complete their purchase. The best return pages lay out the return/exchange process in an easy-to-understand way while addressing common questions and concerns.

Returns-Modcloth
Modcloth’s Returns & Exchanges page addresses the holiday return policy in a special callout at top during the holiday shopping season. They also explain all their options and details in an easy-to-follow page layout.
21. Shipping

A big question on online shoppers’ minds is the shipping time and cost, so make sure there’s an easy-to-find shipping information page (often in the footer, like returns). It should also include information about international shipping policies and any special holiday shipping schedules.

Shipping-Uniqlo
Uniqlo’s Shipping page shows a handy chart for the different shipping options while emphasizing how to get free shipping at the top.
22. Help / Contact Us

Customers should be given a centralized place to find ways to get in touch with customer support whether with an email address, phone number, form, or live chat. Many sites combine FAQs with Contact Us to provide answers to questions that may have come up many times in the past (and also to save time). Don’t underestimate the importance of the Contact Us page–customer service is a huge driver for business growth, and making the customer service accessible and easy will provide a superior experience to users and get people to spread the word about the store and brand.

HelpContact-Harrys
Harry’s Help page presents a simple email address and phone number at the top with a friendly message to contact at any time, followed by FAQs.
Help-Amazon
Amazon’s Help page puts greater hierarchy on Orders, Returns, and Account, since those are the most common inquiries.
23. Store Locator / Where to Buy

If there are physical store locations, some visitors will come to the site for the sole purpose of finding a store near them. Likewise, if the brand doesn’t have its own physical store but its products are sold by other retailers, it’s important to provide a page for users to find who stocks the brand and where they can go buy it.

Locations-WarbyParker
Warby Parker’s country-wide map on their Locations page gives a good overview of the small but growing number of stores they have.
Locations-Bonobos
Bonobos’ locations aren’t your typical retail store, so they use their locations page to explain how it works in addition to listing out all the locations.
24. Store Details page

As you drill down from the Store Locator page, provide full details about a particular store, like a map and business hours.

StoreDetailsPage-Madewell
Madewell’s Store Details page has all the right elements – a mini map, hours and contact info, with bonus sections for nearby stores and in-store events.
25. Terms and Conditions and Privacy Policy

As with all sites, don’t forget to include the legalese.

 

The above list covers everything that’s needed on a core level, but an e-commerce site may need much more based on the type of products it sells and the unique goals of the brand and the store. Consider other pages and features like the About page, Blog, Wish Lists, Careers page, and more. Stay tuned for another blog post as we dive deeper into what’s beyond the must-haves of an e-commerce site!

 

  • Bill Stout

    Yvonne Weng, I can’t thank you enough. I have designed hundreds of sites, but I have never built an eCommerce website. I just tried to jump in and build it, but I was met with a lot of difficulty as far as site structure and UX goes. This article has saved my life.

  • Ethan PHAN

    Thanks so much for your article. It’s great. Can you make another one for the email. Something like “Must Have Emails for E-commerce Website”

  • http://www.globalwebforce.com/ Hitesh Parekh

    Make your online website the perfect go-to page for the benefit of your loyal customers and potential buyers. Take note of the designs and layouts because it could help your online business to flourish.

Popular This Week
25 Must-Have Pages for Your E-commerce Website
January 30, 2015

25 Must-Have Pages for Your E-commerce Website

By Yvonne Weng
Taking Control of Image Loading
July 29, 2013

Taking Control of Image Loading

By Barrel Admin
Building a Responsive jQuery Carousel Plugin from Scratch
November 26, 2014

Building a Responsive jQuery Carousel Plugin from Scratch

By Max Rolon
Text-align: Justify and RWD
March 12, 2013

Text-align: Justify and RWD

By Barrel Admin

Like what you’re reading? Sign up for the Barrel newsletter and receive updates.