Inspired to unlock your slice of a $1 trillion online shopping industry?
Before you start browsing for eCommerce templates, you need to understand how to sell online with a high converting store design. To help you, I’ve surveyed the top experts in eCommerce, web design, conversion rate optimization and user experience. We also analyzed the strategies top-selling eCommerce sites and smaller niche brands use to score conversions. So if you’re starting your online store and looking to design it (or redesign the existing one), you’ll find plenty of inspiration and hard hitting best practices to scale up sales.
When performing your own search for inspiration, don’t forget to scratch beneath the surface. Dig deep into the internal pages of the e-commerce websites you love – a homepage is only one piece to the puzzle. The heart and soul of a site is the sum of the eCommerce design and content choices on each individual page.
Let’s start with your most valuable asset – time. With limited capital and resources, where should you be spending your website designer’s time and energy? According to the experts, there are three key pages that have the highest impact on selling online:
- PART I: Inspiring Homepage eCommerce Web Designs
- Expert Advice From: Nathan Resnick
- PART II: Category Page eCommerce Website Design Examples
- PART III: Creative Ecommerce Designs For Product Pages
- PART IV: Checkout Page Website Design Examples
PART I: Inspiring Homepage eCommerce Web Designs
The home page of your eCommerce site is the first step along the path to customer loyalty. In an instant, online shoppers need to understand how your brand is different. They’ve found you, now, convince them that their search of the e-commerce web is over.
A case study of 50 best-designed eCommerce websites is an excellent source of inspiration – providing data and analysis on what works and what doesn’t.
Every product line you carry is competing for space on this front page. Use your eCommerce website design to showcase the best and most powerful products that your targeted customers crave. Positioning products effectively, in a way that’s easy to navigate, can help your homepage serve as a conversion magnet. Top it off with beautiful product photography and watch your online sales skyrocket.
1. Target.com – Communicating A Sense of Urgency
Target’s desktop homepage clearly hammers home the opportunity to save money six times. And there’s a sense of urgency – the best sales are only this weekend.
Pushing timely and relevant sales events via your eCommerce site is a powerful revenue generator – even if it does rack up billable hours with your web designer. Utilize the area below the fold to drive excited shoppers to the product categories that are relevant to them.
Target’s Tappable Tiles Make Mobile UX Design More Approachable
The mobile version of Target’s eCommerce site scores major points for their one-page Metro theme with hints that more savings are just a scroll away. Instead of a boring product carousel, images and brief text are aligned in colorful, eye-catching tiles that can be tapped for instant access to relevant product pages.
2. Nike’s Bold Imagery Draws Users In
Nike carries thousands of athletic products online. In a single image, they’ve summed up that their products are inclusive and diverse, support physical fitness, and exude a confident, sexy vibe. This message, framed within a responsive web design, is the sum result of using their products in your life.
And, they aren’t waiting for you to order a product – they’re converting site visitors into Nike+ App downloads – ensuring an ongoing connection with their target consumer.
Nike Positions App to Strengthen Mobile Engagement
Dropdown ads on mobile eCommerce sites can help smartphone users engage more deeply with a brand. Nike’s fitness app, in this case, offers a conversion opportunity specifically tailored to mobile users. Responsive design is going away in place of mobile first.
But, it’s important to adopt a balanced approach. App downloads could distract from their product line. An extra step has been added to the customer journey – placing distance between a site visit and a revenue generating opportunity.
3. Zoffoli Uses Background Video to Communicate A Powerful Message
The human eye is drawn to moving objects. Zoffoli clearly communicates their core value proposition with a powerful statement and a video background that reinforces their message.
4. Dali Decals Uses Mobile App Icons to Engage Smartphone Users
Creating mobile-friendly icons, similar to the ones you’ll find on an Android or iOS home screen, is a great way to encourage mobile site visitors to interact with your site.
UX Tips for a Powerful eCommerce Homepage
Every eCommerce platform is unique – they reflect the vision and values of the brand they represent. Every eCommerce website needs to get a few things right in order to win customers. This includes presenting products in a proven list format. Here’s my round-up of tips you need to consider when designing or redesigning your eCommerce site.
- Resist the urge to list everything on your homepage. Keep the page uncluttered by removing anything that isn’t immensely helpful.
- Ensure compatibility with desktops, smartphones, and tablets.
- Provide helpful links to your company’s contact details, shipping information, return policy and Terms and Conditions.
- Focus on helping visitors self-identify and quickly access the information they need.
- Use high-level categories that are easy to navigate.
- Leverage uncluttered photos, accompanied by concise text to showcase your featured products and categories.
- Highlight a timely sale or promotion to create a sense of urgency
- Showcase unique images and videos to highlight authenticity; avoid stock images.
PART II: Category Page eCommerce Website Design Examples
An effective category page is much more than a filtered product catalogue. It’s a tool that allows you to communicate and engage with shoppers that are looking to browse through your products – focusing specifically on the items in your custom eCommerce platform that can help them fulfill a need or desire.
You need to keep the visitor engaged, curious and excited about the products you offer. Let’s take a closer look at companies that get their category pages right, and a few that miss the mark.
1. Home Depot Takes Visitors on a Digital Journey Down the Store Aisle
This is the “Electrical” landing page on Home Depot’s website. The vertical sub-category menu on the left-hand side provides instant access to more specific product categories. A banner highlighting a timely promotion gives the visitor a sense of urgency. Images are used to spotlight popular products.
Text density is only increased as the visitor scrolls down. This gives the page a clean, informative feel. And the search engine optimization is still implemented without cluttering the elements of the page designed to encourage conversion.
Home Depot Drops Extra Content (Including Images) To Speed Up Mobile Load Time
Slow page load times will kill user experience and cause bounce rates to skyrocket. Home Depot made the decision to drop the images and extra content — presenting viewers with links to the critical next steps in the product research process.
Home Depot might be able to get away with this low-effort strategy for increasing page load times because they’re a national brand with massive market recognition. While I would recommend dramatically slimming down the mobile version of your category page, you need to keep the user visually engaged with a more sophisticated, custom eCommerce solution.
Create a mobile eCommerce category page that is able to adapt your vital content to any screen size (responsive web design), keeping a few visual design elements to create a compelling user experience.
2. Amazon Leverages Data to Feature “Best Sellers” in a Category
Amazon wins the eCommerce war by leveraging data in a way that delights consumers. You can take a page out of their book by creating a “Best Sellers” section at the top of your category page. Based on real-time data, this section should include product images, a hyperlinked title and customer rating information.
Clean, organized presentation of the items your visitor is most likely to buy is key for maximizing conversions using modern eCommerce website design.
Amazon Uses Horizontal Scrolling to Showcase Curated Product Carousels on Mobile Platforms
Amazon overcomes the traditional limitations of mobile viewing by providing visitors with the ability to scroll horizontally through curated product carousels. This means that more products can be showcased, without requiring a massive webpage that requires visitors to wander endlessly through irrelevant information.
3. Milani Uses Comparative Imagery to Showcase Products within a Category
The images Milani uses to showcase the products on their category page are powerful – both visually and contextually. Each product image is carefully chosen to provide viewers with product insights and shorten the time necessary to compare and select relevant products.
4. SportsMemorabilia.com – Turning Customer Passions into Categories
SportsMemorabilia.com got inside of their customers’ heads to best organize their products and create relevant category pages.
Take a step back from your eCommerce website design and put yourself in your customer’s shoes – How would you like to be able to sort and filter the products on your site?
PART III: Creative Ecommerce Designs For Product Pages
A strong product page within an online store provides in-depth information about a product, and converts the reader into a buyer. Product specifications should be readily available, as well as opportunities to customize the product.
First, because product pages are among the mostly viewed pages of an eCommerce store, and secondly, these are the pages where the customer decide wether add the product to their cart or not. The product image, its pricing, the shipping cost, every important details of the product should aim for one main goal: build trust in the customer and tell them every important details, like what they should expect by purchasing a specific product. Click To Tweet
Your product page better jump out at your visitors, or you’re likely to lose their interest. The truth is, the product page is effectively the first real look that your prospects get at what you’re offering, and if you don’t grab their attention and keep them engaged, they won’t move on to a conversion. First, you need really strong products descriptions. That means clear, concise language that explains all the reasons why a visitor would want or need to buy that product. Second, you need to ensure that your ‘Buy’ or ‘Select’ calls to action are big, bold and easy to see on the page. Third, you need high-quality images of each product. Amazon does a really good job of this by letting you have a 360-look at each product, so you feel as if you’re actually touching the product. Your product page is the gateway to the shopping cart and final checkout. If you don’t give visitors compelling reasons to stay on that page, you have no chance of making a sale.Click To Tweet
1. Nordstrom – High-Resolution Photos and Language
Every product page needs a powerful photo to show off the workmanship that goes into an item. Nordstrom provides their customers engaged in online shopping with high-resolution, lifestyle shots optimized at multiple angles, in a variety of scenes within their online store.
The sophisticated language used to describe this high-end item is perfectly matched to the target customer. The product description text paints a visual in the reader’s mind that blends perfectly with the product images.
Nordstrom – Real-Time Mobile Product Customization
Nordstrom’s black and white product page, optimized for mobile devices, is elegant and clean, with a ton of white space. Selecting a color option instantly transforms the gallery images to match. And, the Nordstrom App download option is placed in a way that doesn’t get in the way, but encourages the shopper to make Nordstrom part of their app library.
This is ‘Conversion HQ’. Without a convincing, persuasive product page to reduce the shopper’s uncertainty, it’s almost impossible for an online retailer to establish the trust needed to convert the sale. If we can’t convince our customers to add a product to cart, any subsequent pages are relatively redundant. My advice – turn your product pages into dedicated customer helpfulness landing pages that serve as the online equivalent of the best customers service employee you’ve ever met. Explain why your product is the most valuable in your industry. Demonstrate why it’s different. Prove it’s the best. Product page improvements aren’t expensive to make. Any store owner can develop more helpful, valuable content with having to pay for design or development changes. Do your best to develop the content you need to answer any questions or resolve any uncertainties your customer may have. Make your customer excited to see your product arrive on their doorstep. That emotional connection can carry you through the cart and checkout pages (which can be more expensive to alter and optimise).Click To Tweet
2. Nike – Superbly Minimal and Inviting UX Design
The more well-known your brand is, the more opportunity you have to say more with less. Nike is an international power player in the sports shoe industry. So, they made a statement by saying a lot less.
The primary colors are shades of white and grey – giving the page an open, unintimidating feel. Everything required to build trust is there, minus anything that could be a distraction from the product’s legendary status in the market.
Nike Provides The Best Tools to Remove Barriers to Purchase on Mobile Devices
Keeping the customer on your product page, until they’re ready to click “Add to Cart”, is vital for the success of your online store. Nike does this on their mobile site by providing visitors with a size chart. While simple, it removes the need for customers to research this kind of information elsewhere, helping to improve the odds that a motivated shopper will make a buying decision without further delay.
Products are the core of all eCommerce small businesses. Shoppers and returning customers find out more about products on product pages and make an informed decision to buy or not buy from the store based on the information they interact with.Click To Tweet
3. Hunter Encourages Social Media Promotion
Each product page on Hunter’s site includes a ton of high-quality photos that showcase the products in action. At the bottom of every image, in a box that perfectly matches the eCommerce site template, there’s a clickable social media “share” button.
When properly executed as part of your eCommerce website development, this creates the opportunity for social selling. It’s important that design is taken into account so that these cues avoid distracting from the overall eCommerce website design of the product page.
Product pages are super important when it comes to design since they are essentially act as the sales person for your products.Click To Tweet
4. Do it center – Creatively Displaying Product Inventory Levels
To help customers quickly find what they need, when they need it, Do it center provides real-time inventory levels on their website. Without cluttering the page, information is provided for both online and in-store inventory levels – without the need to click to a separate page.
The best answer for your eCommerce site is, ‘The one that’s broken.’ If you have a high checkout abandonment rate, that is the most important page to focus your optimization efforts on. If you have high exit rates on your category page, then that’s the page to focus on. All-in-all, the product page is the first ‘ask’ page, the page that invites the visitor to buy. You can reduced checkout abandonment by having a beautifully designed product page. If your product page doesn’t answer all of a visitor’s questions, then none of the other pages will work.Click To Tweet
5. Bellroy – 3rd Party Testimonials Build Trust
Often entry page from SEO or PPC, needs to clearly convey value and build trust quick. Important and complicated part of the buyer’s journey.Click To Tweet
6. Car iD – Reassures Buyers
If you’re selling customizable products or products that fit a specific car or part, you need to reassure buyers that they are getting the right one. Once you choose your car, CariD reassures you that the product will fit.
10 out of 19 Experts Agree: Your eCommerce Product Page is the Most Important Page on your Site Because…
The product page is what sells the most. It’s where the shopper learns how the item is going to fix a problem or fulfill a need or desire. People can be forgiving about many things, but the product page is what determines a sale or an exit.Click To Tweet
Many shoppers search for a certain product on Google and land directly on a product page. This is where they make their decision whether to buy or not, sometimes without even visiting any other pages on the website. Click To Tweet
For most stores, the product page is the landing page – either from a search engine, a paid click, or a social share. After all, it’s the product that people care about, not the store. If there isn’t enough information presented in a visually appealing way on the product page, I’m not going to stick around.Click To Tweet
The actual sale of the product and offer is based on what the visitor sees on the product page. This is what Amazon has obsessed at getting right.Click To Tweet
Essential Product Page Strategies
There are a few things that, if implemented correctly, can help your product page become the most powerful tool in your eCommerce arsenal:
- Ask your content marketer to include SEO and user-friendly content on each product page. Where this content shows up is dependent on your design.
- Ensure every necessary detail about your product is easily displayed to help customers reach a confident buying decision.
- Use page numbers to add context and communicate that you have multiple options to meet your customer’s unique needs.
- Empower buyers to filter your products by price, reviews, relevance – helping them leverage your selection based on their priorities.
- Layer content in a way that provides thorough details and leaves plenty of white space
PART IV: Checkout Page Website Design Examples That Build Trust
The last step in a customer’s buying decision is to checkout from your eCommerce site, after they’ve filled their cart up with everything they need. This is the moment of truth – will they enter their payment details, or leave the payment gateway, and their cart abandoned?
Even if every other aspect of your eCommerce web design is perfect, the customer’s perception of this page decides whether you live or die.
It’s the last place a customer can make purchasing objections, and requires the most trust to provide personal and payment details.Click To Tweet
1. JCPenney – Easy and Informative UI
JCPenney provides everything a customer needs to confirm and process an order at a glance. I don’t have to scroll or search. Free shipping upsells and promotions are outlined at the top. Individual product details are neatly presented, and subtotals and totals are tallied to the right.
The use of graphic design, structured text, and easy-to-read font allows me to feel confident in my buying decision.
JCPenney – Emphasis on Help and Support in a Mobile World
Trust and comfort, in part, comes from knowing that if something goes wrong, the company you’re dealing with has your back. At the bottom of every phase of the checkout, JCPenney gives mobile users multiple ways to reach out for immediate support.
While a customer might be filling their shopping cart from a smartphone, chat is a far more popular way to get help in-the-moment.
Ultimately, if users can’t check out they will find somewhere else where they can and you’ll lose their business (in addition to frustrating them, leading to a negative impression of your company).Click To Tweet
2. GAP – Checkout for Returning Customers
Customers want to check out quickly. For returning customers, having to enter payment and shipping information into the system more than once is a major let down. Allowing customers to log in and pick up where they left off in the checkout process is a key factor in building loyalty – making it easier to score repeat business.
If your potential customer gets all the way to the checkout then becomes confused or overwhelmed, then you’ve lost them (and the sale). Your homepage and product pages are your ‘romance’ pages. Your checkout page is where you ask them to marry you – and shit gets real.Click To Tweet
GAP – Mobile Checkout UI is 2000 and Late
Unfortunately, in the mobile arena, GAP’s mobile version of their checkout page is lacking. It fails to provide clear direction on how to process the transaction – relying on the user to realize that they need to click on each tab and fill in the previously hidden fields.
It’s almost like their web designer is stuck in the early 2000’s. Requiring users to guess, without clear prompts, is a horrible way to close the deal online. If the information they need is hidden in an outdated eCommerce solution, don’t expect a high-percentage of purchase completions.
All aspects of eCommerce Web Design are fundamentally very important, however the Checkout Page can be the deal breaker. To my mind it’s the leading cause of Shopping Cart Abandonment which is (still) one of the greatest challenges facing eCommerce Retailers today.Click To Tweet
3. 6DollarShirts – An Easy-To-Follow Checkout Process
From the moment a user clicks “checkout” in their eCommerce store, they’re presented with a transparent, easy-to-understand checkout page – intuitively designed to guide the purchase across the finish line. What is more, there are no bright colors or distracting pop-ups, that can lead to checkout abandonement.
BTW, have you noticed that the logo is everywhere on the examples we’ve presented? So, as much as you care about your web design, you should think of your logo. Here’s our guide on creating a logo online.
eCommerce Cart and Checkout Design Tips
You’re on the fifty-yard line, the quarterback just yelled “HIKE!”. Will your great eCommerce site be able to score the sale? Implement these strategies to ensure your cart and checkout pages are up to the challenge.
- Confirm every product detail as part of the cart review process.
- Complete the checkout process without hiding the cart.
- Help users quickly return to view the product pages for items in their cart.
- Provide customers the option to checkout or continue shopping.
- Don’t ask for personal or payment information before asking the customer to confirm the contents of their cart.
- During checkout, only ask for information that’s vitally necessary to the fulfillment of their order – respecting privacy builds trust.
Is Your eCommerce Site Up to the Challenge?
It’s my hope that you’ve learned a great deal about eCommerce website design, and the factors that influence customer trust online. Tweaking and optimizing an eCommerce site is a constant process. And you should be searching for inspiration anywhere you go – online or offline.
With powerful open source eCommerce tools, like X-Cart, the possibilities for your eCommerce site are endless – even if you aren’t a web designer with decades of experience. Your shopping cart software matters. Find our why we are the best eCommerce platform for developers.