How to Design a Homepage for your Ecommerce Store

Jaya SathayeBusiness, Technology, Tutorials

 
homepage design
 
In this article, we will take you through homepage design ideas for your ecommerce store. 

The homepage design of your website – ecommerce or otherwise – grabs the attention of your visitors, as that’s the page they land on first. Hence, this can make or brake the game of driving traffic to your website. 

In the video below, I will take you through the homepage design of the ecommerce website of our client Barva Skin Therapie:

 

Right on top, you can see a bar on which there is text that highlights the current offers – there’s “Free Shipping & COD on Orders Above Rs. 1,000” and “Kajal Eyeliner 1+1 Free.”

Right below that is the menu that provides sub-categories of products on the left of the Logo placed in the centre. On the right, you can see some information pertaining to the company/brand, which includes its standards, origin, blogs, ingredients, & certain benefits it offers to customers for shopping with them. 

Moving on, the large image you see right in the middle, which practically covers the entire page is your carousel. This is a very important section for you to highlight your best-selling products, most attractive product photos & most importantly, your offers. Here, you can see that Barva has highlighted their Kajal 1+1 free offer. This portion grabs the attention of users and has to be put to maximum use. 

The portion below this carousal is known as “below the fold.” The carousal and topmost menu are “above the fold.” So below the fold, you find a brief description of the brand with bare minimum text. It is very concise, yet catchy. On the right, there are some brand values, but in the form of icons. These highlight brand values, in case of Barva, “made with ghee,” “naturally derived ingredients,” “not tested on animals” and so forth. Had we included these as text, you would get bored easily. But the images of icons remain etched in the minds of users and they instantly get attracted to what your brand stands for.

The section below this one has top customer reviews of the overall brand. There is also a “Reviews” tab on the left of the page where all the reviews are visible. 

Moving further down, you can see product categories in the form of striking images. These are inviting people to click on them and browse these categories, thus spend more time on your site. 

Right below this, we have included some of the products that are trending at the moment. You must notice here that all the images are uniform in terms of the background color, contrast, etc. For instance, the white background in one image isn’t different from the white background in another one. This is very important for this section to maintain uniformity. 

Even if you use different-colored backgrounds for these images, their brightness, contrast etc. needs to be the same. Have them appropriately retouched to ensure the same. 

At this point, there is also a “Shop All” link for users to see all the products at once. Also, notice that the trending products are sets that are available at discounted prices. If you buy the products in these sets seperately, they will cost more. So visitors are tempted in buying the sets. 
 
Now we have reached the middle of the fold and we are heading toward the footer. At this point, we have placed some useful links with eye-catching icons, such as “Lipstick Guide – How to Choose a Lipstick for your Skin Tone,” “Skin Guide” and “Ingredients We Love.” There is also an invitation to talk to the brand.

Again in this section, some customers have been featured along with their pictures & their opinion of Barva products. You might see blank spaces here as we are viewing the site on a laptop, but this isn’t the case with the mobile version. Your homepage design on mobile website must be sound as more than 80% of your visitors will be from mobile. 

Towards the end of the fold are some featured blog articles. Now what is important to note here is that you have to assign images of the same size to all your blog articles. Only then will they appear uniform in this section. They must be of the same width and height.

Going further, these are glimpses of the Instagram feed. All the latest Instagram feed appears here and this slides automatically. We can do it manually but it also slides in its own.

Now we come to the footer. Here, you have the brand’s contact details in addition to some of the product categories. So if a visitor reaches this point, he doesn’t have to scroll up to the top again to order. In case of this desktop version of the website, this menu is travelling with you even if you scroll to the bottom. In the mobile version, this may or may not be the case. This is why you must have these links in the footer as well.

The footer should also have other useful links as is the case here – store location, accounts, order tracking, etc. This space should also include a box asking for a visitor’s email id and an invitation to subscribe to your newsletter. This helps you build an email base, based on which you can send them offers via email as well as target them through social media & Google ads.

So this is how you typically design a homepage for an ecommerce store/website. Do let us know if you found this article useful. We would love to hear from you 🙂