Think back to the last time you visited an ecommerce store. Do you remember how it looked?
Maybe not, but I bet you remember how it made you feel. Excited? Confident? Happy? Or maybe it made you feel confused or frustrated because it was difficult to navigate.
Ecommerce design is about more than how a website looks—it considers the way a site actually works, the flow from one page to the next, how it tells a story, and the mood it triggers.
Design trends come and go, but there are four timeless visual elements fundamental to creating an effective ecommerce website. But before we get into them, there’s one question I want you to keep in mind:
How do you want customers to feel when they come to your site?
Marketing and design, after all, really boil down to helping your customers experience a feeling that leads to taking action (ideally making a purchase, or three).
Let’s explore the four pillars of designing a modern ecommerce store: trust, visual appeal, format, and navigation. I'll start off this video talking about trust and 3 indicators I think you should add to your online store today.
Prefer a written version of this video? Below you’ll find a slightly edited overview of the four pillars of effective ecommerce web design.
Free Reading List: Online Store Design Tips
Your online store's appearance can have a big impact sales. Unleash your inner designer with our free, curated list of high-impact articles.
Get our Store Design reading list delivered right to your inbox.
Almost there: please enter your email below to gain instant access.
The pillars of ecommerce design
When someone visits your store for the first time, they may not know anything about your brand, the quality of your products, or your commitment to making the customer happy. Deals might earn their consideration, but they’ll need to trust you before they actually go through with a purchase.
Customers need to know that when they buy from you, they’ll receive the product as advertised. There are three essential trust indicators I recommend every entrepreneur include on their website:
Nothing throws potential customers off more than a website without contact information. Include an email and, if possible, a phone number and a mailing address. This type of information, along with an About page, helps potential customers feel they’re buying from a real person.
A return policy
A return policy not only makes it easier for people to bring back products that don’t satisfy them, it actually increases sales by instilling the customer with a sense of confidence and trust that they can send back an item if they need to.
By adding Shopify Payments, you’ll have a powerful payments service featuring the latest security technology for protecting your customers’ information. Don’t hesitate to use graphics or badges to show your security compliance and all the payment methods you accept.
Customer trust is hardest to earn when you don’t have any customers, so I highly recommend incorporating these trust indicators as you design your store.
Perception is everything when selling your products online. People form their first impression of your site within a mere 50 milliseconds. With your Shopify store, making that impression count rests largely on the quality of your images.
Think of it this way—your product photography is like an ambassador sharing the promise of your product online. Your customer can’t try, taste, feel, or wear your product before they buy, so they’ll rely heavily on your visuals to decide if that product is right for them.
Generally, I recommend including product photos with a white background, as well as lifestyle photos of your products in use. Outdoor Voices' home page features both lifestyle images to communicate the brand side-by-side with more product-centric images to entice the visitor to learn more.
You may have noticed when you purchase a product on a big-box retailer’s website that there’s almost always a white background photo included for every lifestyle shot. Products photographed on a white background are the gold standard of ecommerce photography. That’s because the white background makes it easier to see the item in detail and strips away the branding so your product can appeal to different demographics.
Check out Shopify Academy’s free course on product photography to learn more. Jeff Delacruz will show you how to take your own product photos in a quick and inexpensive way.
Lifestyle photos are important because they allow customers to envision using a product in their day-to-day life by picturing themselves as the model being shown.
Your product photos are a key factor in your store engagement, conversion, retention.
Beyond product photos, you also need to consider your site’s colors and fonts. You may have the most incredible product, but if the aesthetics of your website—specifically its colors and fonts—don’t work, your customers will be put off and may not make a purchase. The look of your store plays into the overall experience of buying the product.
Color is one of the most powerful tools you can use to spark interest and emotion. It can also be used to draw attention to specific sections of your website and lead your customer down the buyer’s journey.
I recommend limiting your site to two main colors—a primary color and a secondary color. To choose my colors, I like to refer to two great resources. I typically go to Dribbble to search for a color palette. For example, if I type in “red” I can see examples of websites that use red in their color palette and decide which options are most visually appealing.
Here's an example where the business used simple black on white text with shades of green as their accent colors.
Another key consideration is your website’s accessibility. You want the colors you select to contrast enough that people of all ages and abilities can read and see your text.
Lastly, you’ll want to give some thought to typography. Customers expect to see dynamic and interesting typography on websites, not stale fonts like Times New Roman. While the words you write share information, it’s the typography that communicates the emotion behind that information.
The good news is, with the Shopify theme store, each template comes with recommended fonts. You can use these fonts on your website, or choose fonts from another source.
Like with colors, it’s a good idea to stick to two fonts and create a hierarchy between them. Managing multiple fonts can be tricky for non-designers, and your website can become very messy looking. Using just two fonts simplifies things. Choose one font as your header or title font and another to be your body font.
Supergoop does a great job of selecting a title font that reflects their brand while the body font is simple, clear and easy to read.
A unique header font can be add some flourish to your brand, while the body font will be your workhorse, used for all the other copy on your website, from product descriptions to checkout instructions. While display fonts can have a little more flourish because of their size, whatever body font you use it's important to pick one that's readable. Not every font is designed for screen reading and picking the wrong one (a thin sans serif, for example) could drive customers away if they can't read your site.
Format (desktop and mobile)
According to comScore, nearly 70% of digital media time is spent on mobile devices. Unfortunately, many ecommerce websites and platforms are built with only desktop browsing in mind. This can result in a fair number of lost new sales.
If you’re building your business with Shopify your store is “responsive.” This means the site adapts to different devices and screen sizes, whether customers view it on a desktop, smartphone, or tablet.
When choosing a theme based on mobile-friendly design, it’s best to personally test the purchasing process to see if you’re happy with the transactional flow. If you’re not, there’s a good chance your customers won’t be either. Elements like cart drawers and easy-to-follow mobile navigation are crucial when finalizing your choice.
Your website navigation should help customers find your products quickly and easily.
Good navigation improves the online shopping experience and helps merchants increase their sales and profits. Navigation can also influence the theme you choose. For example, if you have a large catalogue of products, a theme with a bigger menu might be best for you.
Here are some guidelines to follow when designing your store: first, try to stick to only a few menu headers in your navigation. Be clear and direct when labeling these headers—this is no time to be clever. Here are the headers I recommend for top-level navigation:
- Shop [Product Category]
- About Us
- Contact Us
Here are three great examples of menus that make navigation simple. The visitor knows exactly what they're getting each time. As a beginner, I still think you should start with the four listed above but over time, you'll learn what your audience gravitates to.
Additional navigation links can go in your footer—the section at the bottom of your website. Here are the labels I recommend for your footer:
- Shop [Product Category]
- Return Policy
- Terms of Service
- Contact Us
You can always change your headers if you notice they’re not being clicked on, or add a sub-navigation menu to include links to other important pages or product collections.
The fundamentals go a long way
It’s important to keep these four fundamental design elements in mind as you build your store. I’ve worked on dozens of businesses, from startups to massive brands, and these are the constants throughout the process.
Build trust. Make it visually appealing. Think about the device your visitors are using. And keep site navigation simple to get the visitor to the product as quickly as you can.
If you’re interested in learning more about design for ecommerce, enroll in my new course on Shopify Academy.