E-commerce Website Design – Store Layout
E-commerce website design is one of the most important factors when it comes to e-commerce design. In fact, a good and well-balanced design can help raise conversion rate and sales. But why?
First, website design is the very first thing the customers will see when they arrive at your e-commerce site. All of us know that first impression is very important. It will determine whether your customer will stay for shop or leave immediately.
A good e-commerce website design must be more than a mere good look. It should be easy to navigate, and you also should make it clear what kind of product you have on your site.
There are several elements to be found in an e-commerce website design, but they can be divided into three main sections: header, main, and footer.
In an E-commerce website design, header design is like a storefront in the physical store. The header is the very first thing a visitor will see when the come to your website. That is why the design of your header will largely influence the opinion of your new customers. Unlike the main body of the site, a header has a very limited space. Your header should be able to let the customers know what your offer, and at the same time it must enticing them to come in and browse your products.
In business, the first impression is everything. Of course, most online shoppers come to your site because they already know what they are looking for, but some of them may not aware at all. A study from Stanford proved that about 46% online shoppers will judge whether a site is trustworthy or not based on the visual alone. Basically, you will have 10 seconds to be able to attract a new visitors. Now you understand how important your site header is.
One of the most common mistake people did when they made a header is to use a gigantic attractive image in their header. While the result looks good, the header will become too large and purposeless. A header like this will take too much attention, and people may forget to browse your products and offers because they are too busy with the header instead.
It is actually okay to use an image for your header, but only to clarify the nature of your store (which is mean, people can know what products you offer just by taking a look at the header).
There are several elements which you can put in your header:
- Company or store logo
You usually can find a store logo in the upper left corner. A logo is not only for branding purpose, but visitors also should be able to use (click) it to go back to the homepage.
- Search bar
A search bar is not only can help customers to find what they are looking for but it also quite effective in increasing your sales. Your search bar must be able to deliver a reliable search result and at the same time designed to be easy to find and use.
So, put your search bar at a place where it easy to find and see, like at the top of your site / in the header.
- Shopping cart & account access
It is a common sense for the online shopper to be able to find a shopping cart and account access icon at the top of the site. Make sure the shopping cart shows the amount of the item inside whenever the shoppers add something to buy in there.
- Shipping & return offer
Gain trust from your new buyer by putting your shipping and return offer in your header.
- Main navigation
I am sure you have heard mega menu before, right? It is a large drop-down panel which shows your shop’s category. If you have a very wide selection of items, then using mega menu is a must.
- Customer service contact
Put your customer service number and any other ways of contact so visitors can always get in touch with you whenever they have something to ask or when they need help.
The main area of your e-commerce website design is the part where most actions happen. You can design your main area however you want. Usually, the main area consists of column layout with side columns and main content. You can create one, two or even three columns for your main area design.
The main area layout in your e-commerce website design will depend on the type of information you want to show to your customers. There are several elements which usually can be found in e-commerce website design for main area layout:
- Seasonal or promotional banner
Using a banner in your E-commerce site is one of a useful way to attract customers. With banner, you can tell people about your seasonal sale, newly arrived items or other featured products in a creative way.
- Product image/thumbnail
There is no need to put too many products at once in your homepage. Doing that will confuse your visitors. Instead, just put a few of your products for some categories. For example, you can put several “favorites” products, new arrival, or sale products.
Online shoppers can’t see and touch your products before they decide to buy it. That is why you must use only a high-quality image for your product images. Make sure it will look clear and sharp even in its thumbnail version. Do not forget to optimize your product images for SEO and speed.
A sidebar is a place where you can put all of your less important components, while at the same time, still show them to your visitors. So, what kind of elements or components which can be placed in the sidebar?
- Social media links
- Link or button to your link.
- Menu or category (yes, some people put their menu in the sidebar instead of header)
- Form for email subscription
Email subscription is still one of the easiest and effective methods of online marketing. You can ask your customers to put their email address in the email subscription form, then send all of your future promotions and newsletter to keep your customers in the loop. If you want people to sign up, then you must place the form on your homepage.
We have learned about Header and Main Area. Now, it is the time to talk about Footer. Footer is located at the bottom part of a website and usually can be seen after you scroll your way down.
Just like how a pair of nice shoes can complete your whole outfit, the same can be said for an e-commerce site’s footer. Here are some useful tips to help make the most of the lower part of your site:
- Use a considerate amount of navigations
Footer is a perfect place to put navigation for all less-visited pages, like About Us, Contact Us, and such. Footer is a guide who always ready to help whenever your customers got lost on your site. When they need to go to another page, they can just scroll down to the bottom part and click any navigation links they want.
But that does not mean you can just dump all those links into your footer. Leave enough space to make it readable. Stick with the basic. Do not turn the footer into your main navigation.
- Put a final Call to Action
Footer can be accessed from any pages in your site. Because it located at the most bottom part, most visitors tend to linger there a bit longer than the rest of the page, makes it the best place to put a final Call To Action (CTA). You can either ask them to join your newsletter or encourage them to create an account.
- Social media icons.
Footer is your last chance to be able to get more followers on social media. It is almost common sense to find social media links in the footer, that is why most people will automatically go to the footer when they want to find a brand’s social media sites.
Yes, the footer is located at the most bottom part of your site, but that does not mean it is less important than the rest of your pages. In fact, it actually plays a quite important role to make your site whole. A properly designed footer will keep visitors stay on your site longer and reduce the chance of abandonment.