Need some advice on designing an eCommerce site? These 23 eCommerce website design tutorials, videos, articles, and ebooks can help. We’ve selected the below resources based on both their popularity and the quality of the advice, and collected them into one time-saving list so you don’t have to constantly search around. For your convenience, we’ve organized them into the following categories:

  • General eCommerce Design
  • eCommerce Home Pages
  • Product Pages
  • Mobile Design
  • eCommerce UX
  • Designing eCommerce in Photoshop and Illustrator

General eCommerce Design

The Business of Web Design: How to Grow Your eCommerce Web Design Business, by Paul Boag

ecommerce website design tutorials

Revered UX speaker, author, and advisor Paul Boag, gives his advice on eCommerce design 9-part free video class from Skillshare.   If you’re a fan of his work, you’ll enjoy the intimate feel of these single-camera classes, which create a coffee-with-a-friend atmosphere. In a little over an hour, he covers topics ranging from switching design specialization, attracting eCommerce clients, reading analytics, improving your clients’ business, and increasing traffic.

Everything You Need to Know About Designing for eCommerce

ecommerce website design tutorials

Both new and experienced designers will find a lot of useful advice and suggestions in this article, punctuated by screenshot examples from real eCommerce sites. While some of the advice is basic or common knowledge, it’s author Karol K’s take on these conventions, such as explaining image close-up mechanics or using progress bars at checkout, that make this a worthwhile read.

Creating an eCommerce Website: A Do-It-Yourself Guide

ecommerce website design tutorials

This DIY instructional PDF from GeoTrust explains point-by-point how to build your own eCommerce site from scratch, with helpful tips and reminders tacked into the sidebars. The great thing about this guide is that it gets into the technical details often overlooked, such as choosing an SSL provider and the different types of SSL certificates.

 

 

Accounting for site design and beyond, our free ebook works as an all-encompassing guide for improving the returns on your eCommerce site across the board. We cover the process of building an eCommerce brand from the bottom up, including how to carve a niche in your market, best practices for improving growth and traffic, fail-safe tips for SEO, and how to prioritize the best marketing channels.

10 Terrible Pieces of Advice for eCommerce Sites

ecommerce website design tutorials

This roundabout but nonetheless insightful article collects 10 pieces of design advice from a perspective of “what not to do.” Regardless of the catchy and playfully gimmicky format, the advice here is rock-solid, covering areas like taxes and why your shouldn’t over-emphasize security.

 


eCommerce Home Pages

21 Tips to Make Your eCommerce Home Page a Conversion Magnet

ecommerce website design tutorials

For those interested in immediately applicable advice, Mohita Nagpal collects 21 practical tactics for eCommerce home pages and illustrates their use through updated screenshots. This piece is great because Nagpal annotates the screenshots to show exactly what she’s talking about and why it works. This, on top of a list of over twenty best practices and inspiring examples.

eCommerce Design — The Perfect eCommerce Home Page?

ecommerce website design tutorials

Smart Insights analyzes what makes the perfect eCommerce home page, taking an empirical approach to the most effective design patterns and practices. If you’re looking for a paint-by-number template for your homepage, this is it — literally, the sections are numbered.

17 Best Practices to Build a Perfect Home Page

ecommerce website design tutorials

This title is a bit of a misnomer; more accurately, the article lists 17 elements that high-performing eCommerce sites have on their homepage.

This infographic comes from actual data collected by OptiMonk about which elements the homepages on the most successful eCommerce sites have in common. That makes this one of the more reliable tutorials on this list, rather than theoretical advice.

There’s even a list of links at the end to the sites studied, so you can see these elements in action.

 


Product Pages

How to Design a Customer-Winning Product Page for Your eCommerce Store Series

ecommerce website design tutorials

Connie Wong’s thorough, 2-part guide draws on statistical evidence from examining the top eCommerce stores. The first part discusses 8 essential elements each product page should have, while the second part teaches you how to arrange them in an optimized layout.

Design the Ultimate eCommerce Product Page

ecommerce website design tutorials

Our Alicia Doiron explains the anatomy of the perfect product page, but what sets this one apart is that she dives deep into the fine details. For example, you’ll learn in-depth advice on DIY product photography, the sales thinking behind the ending a price with “99,” and how to create a sense of urgency to increase a chance of a sale.

Better Product Pages: Turn Visitors in Customers

ecommerce website design tutorials

When it comes to design advice, Smashing Magazine is one of the most trusted sources on the web. Writer Sabina Idler represents the site’s characteristic high-quality advice with her piece on product pages. Steering clear of generic advice, this article delves into new territories of tactics, such as individuality, humor, and lesser-known methods of making the product seem more valuable.

Related posts:  Juicy New LemonStand Features, Tutorial Video, Theme Updates and More

 


Checkout Design

How to Design an eCommerce Checkout Flow that Converts

ecommerce website design tutorials

This article from conversion expert Peep Laja explains how to optimize your cart and checkout process, based on the Fogg Behavior Model. Persuasive Tech Lab research BJ Fogg calculates that user behavior = motivation + ability + triggers. Based on this science, Laja describes how to increase conversions using these parameters.

9 Best Practices to Optimize Checkout Design

ecommerce website design tutorials

The checkout is one of the most sensitive areas in eCommerce design, considering how closely linked it is for abandonment. Our article gives an intensive walkthrough of the most effective techniques for optimizing the UX of the checkout process and safeguarding against losing a sale at the last minute. Zach Rutherford gives applicable tips like showing costs upfront, why log in should be optional, and what defines an “easy” checkout.

 


Search Functions

The Current State of eCommerce Search

ecommerce website design tutorials

Another Smashing Magazine piece, this article delivers observations, analysis, and advice on search functionalities for eCommerce. Christian Holst analyzes “the current state” (in 2014) of search features in eCommerce: what’s the norm, what seems to work best, and tips on implementing the proper techniques.

24 Best Practice Tips for eCommerce Site Search

ecommerce website design tutorials

In this article for Econsultancy, Graham Charlton focuses specifically on the site search function, a vital feature for every eCommerce site. His article is straight-to-the-point, with 24 hard-and-fast rules to follow, with screenshot examples and succinct summaries on putting them into practice.

 


Mobile Design

The Ultimate Guide to eCommerce Mobile App Development

ecommerce website design tutorials

Anthony Blatner covers the technical concerns of setting up a mobile eCommerce app, speaking frankly about payment gateways, payment processors, their frameworks, payment marketplaces, mobile analytics, and app store optimization. He even talks a little about mobile point of sale tools. The highlight of this article is the long lists of links to further resources and actual mobile eCommerce sites to emulate.

Tips for Designing Beautiful eCommerce Mobile Apps

ecommerce website design tutorials

Paul Andrew’s list of 9 eCommerce design best practices specifically hone in on mobile sites and apps, but stick mostly to the basics. While veteran designers can skip this one, for those first breaking into mobile design this sets a good foundation.

 


eCommerce UX

105 eCommerce UX Tips: How to Seduce Visitors to Buy

ecommerce website design tutorials

This comprehensive list of UX best practices offers advice that applies to almost every area of eCommerce design: home pages, navigation, product images, the checkout process, and many more. All 105 tidbits are a single sentence long and organized by category (“home page,” “navigation,” etc.) as dos or don’ts. With over a hundred, even seasoned designers are bound to learn something new.

eCommerce UX Design Features and Tips

ecommerce website design tutorials

Agente’s article brings a helpful mix of overview advice and specific direct tips. The content is geared more towards beginners breaking into eCommerce UX, but as a quick read it can be a nice refresher for experts.

5 Important eCommerce User Experience Best Practices

ecommerce website design tutorials

As a starter course on the core UX principles that apply to eCommerce, Sonia Chopra Gregory’s piece targets traditional web designers who want to branch into UX. She covers 5 fundamentals and links out to enough statistical sources and further reading options to make it worth reading.

 


Designing eCommerce in Photoshop

How to Photoshop eCommerce Product Photos in 3 Simple Steps: Isolating on White Backgrounds

ecommerce website design tutorials

Jerry Virgo’s piece covers a very specific but useful procedure most eCommerce stores have to deal with: isolating products and placing them on a white background. Virgo brings his expert experience to amateurs, explaining the process in simple, easy-to-understand terms and demonstrating his steps through ample screenshots.

Design an eCommerce Website in Photoshop

ecommerce website design tutorials

Nano Code gives us a 13-part video series full of Photoshop tips specifically for eCommerce website design.

Design a Clean eCommerce Website Interface in Photoshop

ecommerce website design tutorials

For designers who love Photoshop, Mahmoud Khaled Deiab gives his advice on how to handle standard eCommerce concerns like typography and layout. It may look simplistic and broad, but it’s actually fairly thorough — he cuts straight to the heart of the matter, so that he can cover all the major concerns in as little space as possible.