How to design a great eCommerce site

What makes a good eCommerce site? 

Note: this article is sourced from Shopify, however other eCommerce providers will have similar features available.

The four elements below are what make a good eCommerce website:

  1. Trust
  2. Good visual appeal
  3. Responsive format for mobile and web 
  4. Easy Navigation


Three essential trust indicators every business should include on their website are:

  1. Contact Information
    • Provide customers with your contact information - include an email and if possible, a phone number and mailing address.
    • An About page – also helps customers feel like they are buying from a real person.
  2. A return policy
    • A return policy increases sales and lowers cart abandonment by giving customers the ability to send back items(s) If they are not satisfied.
    • Gives customers the trust and sense of confidence that they can return items outlined in the return policy.
  3. Technical certifications
    • You can use graphics or badges to show your security compliance and all the payment methods you accept.

Good Visual Appeal

Product Images

  • Include product photos with a white background and lifestyle photos of your products in use.
  • Products photographed on a white background = gold standard in ecommerce photography.
  • The white background makes it easier to see the details of the item and strips the branding from the product.
  •  Lifestyle photos help customers envision themselves in or using the product.

Site Fonts and Colours

  • Colours can be used to spark interest, emotion and draw attention to specific sections of your website.
  • Limit to two main colours – primary colour and secondary colour
  •  You can use Dribble to look at colour palettes.
  • Website accessibility: Use colours that are contrasting to ensure people of all ages and abilities can read and see your text.
  •  Typography – use dynamic and interesting fonts that convey emotion behind the message.
  •    Limit to two fonts – create a hierarchy between them. Example: Title and Body.
  • Pick a body font that is readable and accessible - designed for screen reading. 

Responsive Format for Mobile and Web 

“70 % of digital media time is spent on mobile devices.”

  • A non-responsive design can result in number of lost sales.
  • When choosing a theme/design, test the user flow on mobile to see if you are satisfied with the mobile optimization. Select a theme with an easy-to-follow mobile navigation.

Easy Navigation

  • Your website navigation should help customers find products quickly and easily.
  • Good navigation helps improve your Search Engine Optimization (SEO).
  •  Improves online shipping experience for users and helps merchants increase their sales and products.

Guidelines to follow:

Keep it simple: Use only a few headers in your navigation menu.

Example headers you can use in your top-level navigation.

  • Shop with Product Categories
  • About Us
  • Best Sellers
  • Contact Us

Other navigation links can go in your site footer (the section at the bottom of your website).

Example footer labels you can use in your footer.

  • Shop with Product Categories
  • Return Policy
  • Terms of Service
  • Contact Us

You can also add a sub-navigation menu to include other important links and links to product collections.



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.