Google Rating
5.0

A Helpful Divi Tutorial For Divi WordPress

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

Divi Experts Since 2014

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

Divi eCommerce layouts are pretty good and there’s a load to choose from, just simply search online for DIVI eCOMMERCE LAYOUT and you’ll see a pretty good handful of results thrown your way. But if you’re like us and want a more tailor made layout built in DIVI for WordPress for FREE – then read on. Want something like the below?

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

Canohealth is a well-being website which sells CBD and hemp products. These can range from oils, capsules and hand cream to help or elleviate either e.g. pain relief or stress.

canohealth.co.uk is a fully eCommerce website, built using the WordPress Divi platform. This guide focusses on the desktop design more so than the mobile layout, not to say that we don’t touch on it below because we do. We build our sites to a desktop ready stage first – then we focus on getting it mobile, tablet and laptop friendly thereafter.

STEPS 1 TO 6

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

STEP 1 – HOMEWORK

Research Your Competitors & Know Your Customers

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

STEP 2 – THE MENU BAR

The Menu Bar Navigation – Keep It Simple And Easy To Use

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

STEP 3 – HERO SECTION

Make A Bold Statement With A Popping Image And Punchy Message To Go With It

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

STEP 4 – THE STRUCTURE

Set Your Website Up The Correct Way And Easy For Your Customers

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

STEP 5 – THE FOOTER

Clear And Simple Footer With Helpful Links And Your Social Media

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

STEP 6 – SEO FRIENDLY

SEO Friendly eCommerce Store Websites Using Divi – Boost Traffic!

STEP 1 – HOMEWORK

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

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design
As you can see they’re selling their own branded audio solutions products. They’ve used only two main colours on their homepage, black and white. As you can see they’re selling their own branded audio solutions products. They’ve used only two main colours on their homepage, black and white.

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

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design
Starting from the top we can break down the benefits of the design for Chemist Direct below:

 

  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.

STEP 1 SUMMARY

Know Your Customers

Are you selling your brand, or others as well? For canohealth.co.uk we’re reaching out to customers after well being product using CBD and/or hemp

Know Your Competitors

Find out what design styles your competitors use and apply some of their subliminal but logical design structure, try to keep the user focussed on the central part of your homepage for any specific offers, products or branding. Even a search bar centred at the top, will potentially make users type in what they’re looking for straight away.

STEP 2 – THE MENU BAR

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:

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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.

STEP 2 SUMMARY

Custom Build Headers

The Divi theme builder is a flexible tool that allows you to custom build the header and menu area, to look like something outside of the old school previous Divi menu styles.

Using Rows And Modules In The Header

If you already know how to use Divi, then you can easily build a custom header, the one used in this example has symmetry, so make sure to centre align your elements within the modules that you use.

STEP 3 – the hero section

You’ve only got about 3-5 seconds before your new website visitor will be potentially turned into a customer. Just have a look at some of these websites, we punched in the search term “best woocommerce examples” and looked at this result here. You’ll notice 3 similarities amongst most if not all these examples:

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

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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:

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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

STEP 3 SUMMARY

Hero Image

Make sure to take a look at the current trends in some of the best woocommerce page design layouts. If there’s a trend for showing full screen landing hero images, then make sure to choose the right look and feel for your Divi eCommerce website.

Remember The 3 Elements

The 3 trending elements are, a hero image, hero message and a CTA button. All elements must be relatable and relevant to your product or service that you are selling, remember, your website visitor needs to turn into a paying customer!

STEP 4 – THE STRUCTURE

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:

 

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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:

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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:

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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.

STEP 4 SUMMARY

Logical Structure

The page must flow with some logic, hero section at the top followed by top selling or best products, clicking straight through to those products. Also categories and shop sections should be visible. Towards the bottom you can place further info about your products, lastly the footer.

Make It Simple

All products should be less than 3 clicks to get through to them, making it easy and least effort for your customers to find. Slap on sections like related products and discount codes for carrot dangling treats for your customers.

STEP 5 – THE FOOTER

Take a look at the footer design below:

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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.

STEP 5 SUMMARY

Simple and Clear Footer

No matter how large or small your eStore, your footer should be clear and easy to use. Links to your social media, logically stacked columns and links to your terms and conditions / privacy policy should all be visible.

Linking Your Site (As A Designer)

Remember, linking to your site from external sites, may not always be best practice, make sure to read up on domain authority and pick and choose who and where you link from.

STEP 6 – SEO FRIENDLY

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

Divi eCommerce – Our Best eCommerce Design Layout (2020) Tiger Digital Web Design

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.

STEP 6 SUMMARY

Homework Homework Homework

Do your research and after you’ve done that, do some more. Keyword research, competitor research, content description writing are some of the basics you’ll need to get SEO going for your eCommerce website store.

Don't Pay For What's FREE

Of course, if you want expert SEO services and don’t have the time to watch video tutorials or read 8,000 SEO guides, then hire an SEO expert, but if you’re a small eCommerce set up or one man band, there’s a wealth of information out there for FREE, it’s just knowing how to find it.