{"id":23790,"date":"2017-10-25T10:34:41","date_gmt":"2017-10-24T21:34:41","guid":{"rendered":"https:\/\/www.egwebdesign.co.nz\/?p=23790"},"modified":"2021-09-22T13:14:49","modified_gmt":"2021-09-22T01:14:49","slug":"make-great-ecommerce-homepage-layout","status":"publish","type":"post","link":"https:\/\/www.egwebdesign.co.nz\/2017\/10\/make-great-ecommerce-homepage-layout\/","title":{"rendered":"How to make a great eCommerce homepage layout"},"content":{"rendered":"

There are certain elements you will want to include in your e-Commerce homepage. Follow this guide if you want your website visitors to click further into your WooCommerce store and convert into paying customers.<\/p>\n

 <\/p>\n

Starting at the top.<\/h3>\n

People read websites in a \u2018F\u2019 pattern.<\/a> Meaning they start at the top left corner and there move across the top. Then they drop down a line and scan through the rest of the page. Usually reading less and loosing interest as they move down the page.<\/p>\n

This is why websites almost alway feature important items at the very top of the page in the banner or header area.<\/p>\n

The logo, navigation and a link to the shopping cart are almost always in the header area. A search box, social media links and contact details often are in the header too.<\/p>\n

 <\/p>\n

\"e-commerce

New World supermarkets website header<\/p><\/div>\n

 <\/p>\n

As far as navigation goes, the header needs to have all the most important links. Cart, Checkout, a link to the users account. The main product categories are a good idea. Don\u2019t stuff the most important real estate on your site with unimportant links. A lot of things, like links to every category, your blog, terms and conditions etc can be put elsewhere. Perhaps the footer.<\/p>\n

A device that some sites use is a top bar above the header. Usually it is coloured a little more subtly than the main header so a not to draw as much attention. This can be a good place to put important details and links that need to be easily found, but aren\u2019t going to get you more sales. Good items to put in the top bar are phone numbers, links to account pages and other important but non essential details.<\/p>\n

 <\/p>\n

\"noel-leeming-top-bar-example\"

Noel Leeming e-commerce website top bar<\/p><\/div>\n

<\/h3>\n

After the header area.<\/h3>\n

Next after the header area using comes the next most important area of your e-Commerce homepage. Most sites have a large image area, sometimes known as a \u2018hero image\u2019. Large images of your products in use are a great idea for this area. Check out fashion e-commerce sites for some inspiration. The hero image can have some nice design features that tie into your store\u2019s branding and make your site unique and memorable. This helps with creating a positive brand perception.<\/p>\n

It is a good idea to also incorporate a Call to Action in this area.
\nFor example, you can have an image that ties in with a particular product or product category and has a \u2018Buy Now\u2019 button that links directly to the product selection.<\/p>\n

You can change the content in this area regularly. If there is a holiday coming up like Mother\u2019s Day or Christmas you should advertise any sales or associated products.<\/p>\n

Some put sliders or carousels in this area. On the surface of it this seems like a good idea. However sliders have some problems. They negatively affect search engine rankings. Meaning a site with a slider won\u2019t rank as well in search results. Sliders also are code intensive. They add a lot of extra HTML and Javascript and this slows down the loading of your website. Particularly on mobile networks. And to top it off, usability studies have shown people take notice of the first slide but interest and clicks quickly fall off for each slide after the first. Almost no-one clicks on them.<\/p>\n

This is one of the most important areas on your homepage so use it wisely.<\/p>\n

 <\/p>\n

\"Hannahs-website-hero-image-example\"

Hannahs shoes e-commerce store hero image<\/p><\/div>\n

<\/h3>\n

After the ‘Hero Image’ area.<\/h3>\n

After the \u2018hero image\u2019 area. E-commerce sites usually start listing the best products on the store. Best products being the best sellers, featured products and products that are on sale.<\/p>\n

If your store has a large product range then present the main categories to them with links to the sub categories. Large department stores often take this approach to their e-commerce homepages. They often use the same approach on category pages too. Making mini landing pages for each category which are like more specific versions of the homepage.<\/p>\n

 <\/p>\n

\"Farmers-categories-example\"

Farmers department store categories<\/p><\/div>\n

 <\/p>\n

Many stores that don’t have a huge amount of products will display a selection of their best selling, new stock or sale products after the ‘hero image’ area.<\/p>\n

Thankfully most Shopify or WooCommerce themes will let you add them to the homepage.<\/p>\n

 <\/p>\n

\"Pharmacy-direct-featured-products\"

Pharmacy Direct featured products<\/p><\/div>\n

 <\/p>\n

More advanced versions of this are personalised content. Websites like Amazon suggest products to return users. If someone has bought from your e-Commerce store before you can suggest complimentary product to them based on their previous purchases. You can have sections like Products you may like or recommend for you. Or you can present them with products that people like them purchased.<\/p>\n

 <\/p>\n

\"Amazon-suggested-products\"

Amazon suggested products<\/p><\/div>\n

<\/h3>\n

Non product related things to include.<\/h3>\n

<\/h4>\n

Newsletter Signup<\/h4>\n

If you are building an email list then you should include an email sign up on your home page too. Email marketing is an effective way to stay connected with people that are interested in your product or have shopped at your e-commerce store before.<\/p>\n

Great content for a regular newsletter are summaries and links to any new blog posts you have written for you site. Notifying people of sales is another good use of your email list. As is letting people know about new products or product lines.<\/p>\n

Testimonials and reviews.<\/h4>\n

If you sell a product people love and they\u2019ve left you great reviews or testimonials then put those on the homepage too. You don\u2019t need many, just a few of the best will do. This helps with building trust with your site visitors.<\/p>\n

 <\/p>\n

\"Harvey-Norman-reviews-example\"

Harvey Norman’s website uses reviews well<\/p><\/div>\n

 <\/p>\n

The footer area.<\/h3>\n

Lastly is the footer area of your site. This is often forgotten or just used as a dump for links. A well designed footer and be a beautiful and helpful thing.
\nThere are some links to pages that you will want to include. Links to product categories, user accounts, shipping information, returns policy and term and conditions are a good idea for the footer area. Links to frequently asked questions or sizing information are good too depending on what type of e-commerce store you have.<\/p>\n

You can also put in contact details like a phone number and address, even if you have them at the top of the homepage.<\/p>\n

\"Glassons

Glassons have useful links in the footer area<\/p><\/div>\n

<\/h3>\n

Final notes.<\/h3>\n

Remember to include some whitespace.<\/strong> Websites that are too cluttered mean everything is fighting for the users attention but no particular content actually stands out.<\/p>\n

Try to avoid very long lines of text.<\/strong> The optimum line length is about 50-60 characters. Anything longer becomes difficult to read, especially on a computer screen.<\/p>\n

Big blocks of text are difficult to read too.<\/strong> People usually skim read web pages. So keep the text brief and to the point.<\/p>\n

Use quality images.<\/strong> Bad product photos or poor design can decrease the trust visitors have in your website. For a guide on taking better product photographs for your e-commerce store click here.<\/a><\/p>\n

Don’t forget mobile phones.<\/strong> Lastly, ensure your finished homepage design looks and work on tablets and mobile phones too. There is a growing amount of purchases that are coming from touch devices. If your site doesn\u2019t work on them you could be missing out on sales.<\/p>\n

Every e-commerce website is different, depending on the products you sell. But if you follow this guide you will include the elements your e-Commerce homepage needs. Don’t forget to keep improving and fine tuning your homepage too.<\/p>\n","protected":false},"excerpt":{"rendered":"

There are certain elements you will want to include in your e-Commerce homepage. Follow this guide if you want your website visitors to click further into your WooCommerce store and convert into paying customers.   Starting at the top. People read websites in a \u2018F\u2019 pattern. Meaning they start at the top left corner and…<\/p>\n","protected":false},"author":2,"featured_media":23803,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,362,65,66],"tags":[],"_links":{"self":[{"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/posts\/23790"}],"collection":[{"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/comments?post=23790"}],"version-history":[{"count":0,"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/posts\/23790\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/media\/23803"}],"wp:attachment":[{"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/media?parent=23790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/categories?post=23790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.egwebdesign.co.nz\/wp-json\/wp\/v2\/tags?post=23790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}