A 6 Step Guilde To Our Best Divi Theme eCommerce Design Layout That’s Also SEO Friendly

Know your customers and know your competitors. Are you selling your own branded products or will you be selling all sorts of brands under the umbrella of your own? These are the type of questions to think about as the answers can have an impact on design. Also, there’s nothing wrong with looking at your competitors or some of the “big boys” to see how they’re doing it, after all, you want to make sure you’re on the right track, dont’ you?

An example of an ecommerce site, selling their own brand

Check out this very slick site here skullcandy.com

Free Images And Not So Free Images

The images are awesome too, so unless you’re handy with a camera, know a photographer or have a friend that is handy with a camera, then you’ll have to use FREE image sites like pexels.com or pay for your images at i.e. shutterstock.com

Either way, your homepage will definitely need images of the products you’re selling.

An example of an ecommerce site, selling multiple brands

Check out this very slick site here chemistdirect.co.uk

1. There’s a very simple banner, with a useful searchbar at the top. You’ve also got the cart there to show the total of your basket not matter what page you’re on, you’ll always know how much you’re about to spend before you checkout.
2. Under the main banner you’ve got the categories
3. Then you’ve got the imagery, which shows the brands they sell
4. Lastly you’ve got the four benefits below:
   1. FREE UK Delivery
   2. Trustpilot reviews
   3. UK Customer services telephone number

Notice how all of the above listed 1-4 focus in the centre eyeline of the user.

Using the Divi Theme Builder, the specific header area for canohealth.co.uk is a custom built header. Here’s a really nice FREE Divi theme builder header layout, just download and follow instructions it’s really easy to install. If you’re stuck for installing, feel free to get in touch with us here.

Back to our custom design, it’s easy enough to do, so open up the theme builder and choose this style row:

So we’ve got three columns here, three elements if you like; each element contains a module:

Column 1: IMAGE module – Logo image.

Column 2: MENU module – showing the main menu of the website.

Column 3; MENU module again – but this time displaying a secondary menu

The main menu also contains the Woocommerce Menu Cart module. This module displays the nice cart section with price in the menu area.

1. A hero image, usually taking up the full screen size:

2. A punchy, quick and snappy hero message, usually highlighting e.g. a new product,  a deal, a discount, etc. some sort of hook to reel in the reader:

3. Finally, a CTA, or Call To Action, which in this case is the SHOW NOW button above.

How your page scrolls from top to bottom, should be appealing to the eye, but just as important, must also have a logical flow to it. At the very top, discussed in previous step 3, start with a hero landing area to start.

The next section should be either your products e.g. best sellers, latest products, etc. or, categories. Notice how TU Clothing have laid out their very next section under the hero section:

The title of this section is “New in” which makes sense as they’re a seasonal online retailer, which means if your products sell higher in e.g. spring or summer, then remember to keep your site updated and fresh. The customer will always appreciate a site that is up to date and making navigation easy to understand.

Categories and The Shop Page

They say (and they say a lot) a product should never be more than 3 clicks away. List your shop in the main menu and have your categories as sub menu items:

If a customer finds themselves taking too many clicks to get to what they’re looking for, they may get frustrated and just leave your website. Avoid this by making this super user friendly, have your top sure fire winner products on the homepage and click or tap straight through to their specific page.

Upselling and Neat Tricks

Once on a product page, it’s the norm these days to see other sections within the product page, such as other product categories and especially these “Related Products” kind of sections:

This is a nice section that the eye catches, just in case a customer wants to view a different but relatable product, or better yet, add an additional similar product to their cart. You can also do clever things that you may see on some sites like “Add £27 more products to qualify for FREE SHIPPING!” or similar carrot dangling offers.

Discount codes, coupon codes and first order discounts are also appetising to new  and existing customers, once you have that audience and traffic you have to keep them hooked. It’s a tough battle ground to keep customers flowing through to your website, but we’ll discuss that in the final step, SEO friendly.

Take a look at the footer design below:

It’s a simple and clear footer, broken down into 5 columns. Each column has a self explanatory header and each column has related footer links within that column. If you’re a designer, always good to stick your site link in there, but not necessarily make it a hyper link. As a designer, if you place hyperlinks of your website on other sites with lower domain authority, be careful, as this may not help your site the way you might think. It’s better to link to your site from somewhere that has a higher domain authority than yours. Find out here for some more useful tips on domain authority.

Make sure especially if you’re an eCommerce store, to show links to your Terms and Conditions as well as your Privacy Policy.

SEO for ecommerce, in the long run can boost traffic to your website. For short term boosts of traffic if you’ve just set up, Facebook and Instagram paid advertising can work for you, but this can be time consuming to research and set up. However, with SEO, not to say there’s less effort, but if you get started early and maintain a consistent flow of the below, you should start to see some results:

Keyword Research

There are several tools and resources to find the right keywords to help rank your website, but first think, what are you selling and how are customers going to search for you? If you sell health products, would you want to rank for “health products” or specifically “CBD oil drops”? Probably the latter as that customer is at a stage where they know what they’re looking for, as oppose to a customer he’s typing “health products”, is probably still at the research stage. Two key tools that can help you:

Amazon Search

Head over to Amazon and type in one of your products and immediately a list of alternative suggestions will appear in the search dropdown results. These are alternative keywords that customers are punching in along with your product. Use this info to your advantage to add to your keyword research and product descriptions.

Competitor Research

Another tip, is to also type in your keywords into Google and see who your competitors are, ranking for that specific keyword. Take a look at their sites, read their descriptions and take note of how they’ve cleverly dropped their keywords into the description / title / meta titles and also how many times they appear.

Blog Posts – Great For SEO

Blogs are great for knocking up articles to drive and help push the right kind of traffic to your site. Blog posts that focus on “Best of…” or “5 top tips…” of a subject can peak interests and drive clicks through to your website. Make sure to have both internal and external links in your post to help boost the content and make sure you’ve got internal links to your products of course!

Site Structure and On Page SEO

Site structure is important for eCommerce stores, probably even more so than other sites as the way you categorise your shop and display the links in the menu can impact on your site. Ease of use, logical flow, it all adds to whether people stay or go from your website; we touched on this subject already in Step 4, but it’s important to mention again.

On page SEO, you’ll definitely need to install an SEO plugin, our favourite is SEO YOAST, which is a FREE plugin to use, there is a premium version too. There are many tutorials on Youtube, practically everywhere online, books, cereal boxes, etc. about how to use SEO. One thing for sure it’s really REALLY easy and super friendly to use. We recommend spending some time watching this and it will give you an insight into how easy it is to use. We’ve been watching WPcrafter videos for ages and they know what they’re talking about.