fbpx

Many of the questions we are asked by clients at the start of the web design process, especially for online store sites, concern the content and style of the Home Page. E-Commerce Home Page Design is 50% personal preference, what type of product are you selling, what type of people are your customers, and 50% best practices, tried and tested methods that convert visitors into paying customers.

Over the past year we have been working on a number of E-Commerce websites for clients in Ireland and around the world. They each have very different products on offer, different types of customers, and hence different types of E-Commerce Home Page. We’ll be using My Positive Place, Response .? Clothing Co. and Snappit as examples.

I’ll be explaining the fundamentals of our design process and how it’s far from an exact science. There is a large element of artistic creation and in many instances and lot of back and forth with the client in order to interpret their vision. We’ll look at the tools and software that we use here at Online Trade Marketing for building an E-Commerce website; adding design elements, featuring products and what we describe as call-to-action. If you are designing the Home Page of your own Online Store we’ll cover everything you need to know.

The Best E-Commerce Platform on the Web

If you’re building a website for your sales business then you’ve read about WordPress. We use it every day, and all the basics are free. It also gives our clients the freedom to work on their own website; for creating new pages and blog posts.

If WordPress doesn’t do what you need out of the box then there are thousands of plugins to add extra functionality. It makes changes to the way WordPress works. If your website needs to take bookings then you need a booking plugin. Live Chat? There are a number of plugins for that, both paid and free versions.

E-Commerce Home Page Design - Web Design by Online Trade Marketing

WooCommerce is a WordPress plugin that adds E-Commerce functionality. It adds pages; cart, checkout, shop etc. automatically. As well as the Dashboard tabs for posts and pages, you will now have a product tab. Here you add the name of the product, a description, the price and everything else associated with an Online Store. WooCommerce is free, but you can buy add-ons that boost its capabilities.

In this post we will concentrate on E-Commerce Home Page Design but if you need to take a step back and learn about WooCommerce and adding products please click here and read this post.

Elementor - Build Stylish & Creative Web Pages

We don’t have set rules here, there is no right and wrong way to design and build a website. We take advantage of every tool available to us. Elementor Page Builder is one such tool that we use. It is a drag-and-drop interface for adding elements to a page; Title, sub-headings, text and image boxes, video and everything else that you need to build a web page.

Elementor and WordPress. E-Commerce Home Page Design with Online Trade Marketing

Below is an image of what a page on this website looks like when we first create the URL. On the page is a structure selector, this is opened for each new section. There are almost unlimited variations. On the left are all the elements, hundreds of them. Simply click and hold to drag it into position on the page, where it will open for you to enter the content. Below, example pages 2 and 3 are built using Elementor.

Online Trade Marketing

Lets take you journey to online success together...

Your website is the most important advertisement for your business and good web design is a vital component of your future success. Online Trade Marketing are you one stop shop. Start your online adventure today.

Working with Online Trade Marketing is like employing a part time member of staff, who works from home and delivers results month after month. Our SEO package is based on us providing a minimum of 10 high quality content, code and analysis hours per month.

Click to Enlarge Image

Standard WooCommerce Home Page

Example Page 1

Let’s take a look at the basics first. Response .? Clothing Co. offer a variety of T-shirts, their flagship line being phrases in the Irish language. The client described a clean, simple to allow the T-shirts to be the star of the show. For this E-Commerce Home Page Design we didn’t need any fancy software, WooCommerce and the Easy Commerce WordPress Theme did all that we needed right out of the box. 

Here on the right is the full Response .? Clothing Co. Home Page. It was actually one of the last pages to be completed, this is often the case on E-Commerce websites, because the products and images, plus all their related data, have to be created first before they can be used on the Home Page.

The head of the page is uncomplicated, it’s the same on each and every page of the site. Top left is the logo, Name and tag line, this is also a link back to the Home Page from anywhere on the site. On the right, a search bar and a link to the cart page;. again this is accessible from every page. Below this is a simple menu, featuring Home and four of the T-shirt categories. 

Click to Enlarge Image

The next section comes pre-installed with the theme. It is a slider, featuring the headline T-shirt collection, with button links to individual products.

Dashboard = Appearance = Customize = Featured Section = Slider Type 

With most themes, especially those designed specifically for WooCommerce, much of the design of the site is controlled from the Customize tab.

In the right sidebar is a similar slider rotating through the sites categories (T-shirt Collections). It is created using a Site Origin Hero Widget, click here to learn more.

E-Commerce Home Page Design for a T-shirt Sales Website
Click to Enlarge Image

When you install WooCommerce on your site there are 2 options; To have the Home Page as the shop page or to have separate Home Page and shop page. For this site we have chosen not to have a separate Home Page, so as you can see from the image above products are displayed. These products can be displayed in any order that you choose.

Dashboard = WooCommerce = Settings = Products = General

Setting the Home Page as the Shop Page in WooCommerce
Click to Enlarge Image

Down the right hand side is a pretty standard E-Commerce sidebar. A large banner advertising that all shipping, worldwide is free, followed by another search bar and a list of T-shirt collections. Last is another banner advertising that a donation from each T-shirt is made to charity, and some information about these charities.

This is one of the easiest and fastest E-Commerce Home Page Designs. No matter your experience of WordPress or WooCommerce, everyone could get something like this up online within a week or so, maybe with the help of a few YouTube videos. Next we’ll look at taking it up a level with separate shop and Home Pages with page builder elements and a more detailed theme.

An E-Commerce Home Page Design Using Content Blocks

Example Page 2

Snappit.co.za is based in Johannesburg, South Africa. It will stock various products designed for business needs. What will set Snappit apart from other online retailers in the South African market are the customization options. Businesses will be able to see product images with their logo and text on them, all in real time, before they order. From our first discussion with this client I could already see the design of the Home Page in my mind. For this E-Commerce Home Page Design Max Store by Themes4WP was an obvious choice. Modern, stylish and business focused with more than enough room to add your own unique twists.

On the right is the full Home Page of Snappit.co.za, as you can see it’s not complete but the structure is in place, ready for adding products.

We have a little more in the header than our previous example; more links to cart, checkout and wish-list, also added search options.

No list of products and an informational sidebar, this website needed a few more fireworks.

The large image blocks seen on this Home Page reflect the different product categories available. The button links to a list of all the products in that category. The primary block top left links to the shop page which acts as “All Products.”

Below these blocks the client can choose to have any list of products they want. They can feature products, maybe on a monthly basis, they could have an ongoing list of sale items.

WooCommerce Shortcodes

WooCommerce makes it super easy to add these lists of products anywhere on your website, using shortcodes. Click here for a full explanation of these shortcodes. Here are some examples, with visuals below;

(remove all spaces from shortcodes)

1. Display 4 Sale Items in order of popularity

[ products limit=”4″  columns=”4″  orderby=”popularity”  on_sale=”true” ]

2. Featured products, 2 per row, with a maximum of four items.

[ products limit=”4″  columns=”2″  visibility=”featured” ]

3. Display 3 best selling products in one row.

[ products limit=”3″  columns=”3″  best_selling=”true” ]

Snappit.co.za E-Commerce Home Page Design
Click to Enlarge Image
Default Shop & Category Pages
2. Click to Enlarge Image
Default Shop & Category Pages
1. Click to Enlarge Image
Default Shop & Category Pages
3. Click to Enlarge Image

A Show-Stopping, Full Width E-Commerce Home Page Design

Example Page 3

My Positive Place is a very exciting project for Online Trade Marketing. It ticks so many of our personal favorite boxes. A handmade Irish product, a rural SME, a client with big but with an understanding of time scale and investment requirements.

The website, mypositiveplace.com, will sell mindfulness gifts starting with Positive Pots; a traditional jar filled with inspiration for friends or family. There will be options for house warming Positive Pot, Wedding/Engagement, new job and many others to be added in the future. Blog posts will also be a huge part of this site at the top of the sales funnel, driving social media traffic.

This E-Commerce Home Page Design would be vastly different from from our 2 previous examples. There would colour and movement, it would have a cinematic feel. It would be built entirely using Elementor Page Builder.

My Positive Place is still under construction, as you can see we have a limited number of images to use. This is the outline structure of the Home Page.

This is called a landing page, it looks very different from the rest of the site. It advertises the company and it’s flagship gift idea. The client used words like soft, calm, soothe, the colour scheme reflects this.

The primary function of this page is to impress. Each section adds to the last in terms of customer confidence in the company, and hence the product. Bold headlines and taglines highlighting the USP of the product and the business followed by a large, yet simple menu. A large image block featuring different variations of Positive Pots.

The site must appeal to a thoughtful, intellectual customer base a large description of the product and it’s benefits is high on the page. 

The bottom half of the page is all about reinforcement and trust signals. A visually pleasing representation of number of customers and products sold. Another image block, this time featuring blog posts. Customer reviews, vital for any website of this type. And of course, links to social media. The focus of Positive Pots will be Instagram and Facebook.

 

Online Trade Marketing

Lets take you journey to online success together...

Your website is the most important advertisement for your business and good web design is a vital component of your future success. Online Trade Marketing are you one stop shop. Start your online adventure today.

Working with Online Trade Marketing is like employing a part time member of staff, who works from home and delivers results month after month. Our SEO package is based on us providing a minimum of 10 high quality content, code and analysis hours per month.

Online Trade Marketing

Web Design Services

In 2019, every business needs to be online. And if you are selling a product, or multiple products then an E-Commerce Website is a must. For many local shops, high street stores or maybe Facebook and Ebay sellers an E-Commerce Website can feel a little overwhelming; At Online Trade Marketing we take care of everything, leaving you to do what you best… running your business.

At Online Trade Marketing we are specialists in the design and implementation of Service Websites. We create visually striking, fast, responsive sites that rank for local, descriptive search terms that your customers are using every day. We take care of everything, leaving you to do what you best… running your business.

My Positive Place E-Commerce Home Page Design
Click to Enlarge Image

Thank you for reading this guide to E-Commerce Home Page Design. I hope to have given you a better understanding of your options when building an online store website. The three broad types; WooCommerce shop page, category blocks/business style and a visually striking landing page style each suit different product types and hence different websites. Choosing the right one should come naturally if you know your product and you know your customers.

Categories: Web Design

0 Comments

We want to hear from you...