Demac Media Demac Media Brand Demac Media Brand



The Anatomy of an eCommerce Site

Timer Icon 9 Mins

eCommerce Strategy

Think back, think way back to elementary school, when you learned how your body worked (don’t worry there’s a point coming). Basic human biology was taught to us young-punks early on. Starting with the names for all our parts – head, shoulders, knees, and toes, knees and toes! – and once those were mastered, we moved onto our internal systems. From the way we look on the inside, to the names of all our vital organs and their functions. I remember vividly thinking I had been drawing hearts wrong this entire time! In high school biology, we moved onto learning more about our bodies at a cellular level, scrambling to memorize the names of organelles like the mitochondria and their functions. Don’t forget the high school biology right-of-passage; dissecting a frog and proudly labelling all its formaldehyde-soaked parts.


Related: Trouble “down there”? You’re not the Only One Having Problems – Converting Below the Fold

I could go on and on, but I think you get the point. I learned some things at one point in my life, that I have surprisingly retained, and hey – maybe put to good use. What am I getting at though with all this inane reminiscing? Well, the reason we were taught about the systems of our bodies was to broaden our basic understanding of the human body. Like, duh. Do you see where I’m going with this? At a very very broad level we were taught to understand the way our body functions at its most optimal, so that we could then identify when our body is malfunctioning, and determine how it can be bettered and/or repaired. My question to you then is:

Do you know the anatomy of an eCommerce site?

If your answer is yes, no, maybe-so, I would strongly suggest you pay attention if you want to sell online. How can you expect to have a revenue driving website if you don’t understand how it functions at the most basic level?

The First Rule of eCommerce…

The first rule of eCommerce is eCommerce above all else. Meaning the focus is transactional. There are many different websites out there with a myriad of purposes and reasons for their existence, but if you’re building a digital presence to sell products, whether that’s B2B or B2C and regardless of retail category, you can’t let the “Commerce” part of the “eCommerce” fall by the wayside. You may be thinking, “thanks captain obvious”, but you’d be surprised by the loss of focus that the drive to be online can influence. Take off your blinders, and remember you’re building this site to sell to visitors and process transactions.

Related: The Top eCommerce Conferences to Attend

The Homepage

Welcome to our Magento client Umbra‘s homepage. A clean and simple homepage that acts as a reflection the housewares they sell. Your homepage should be representative of your business, to create or bolster your brand and build trust among your visitors and buyers. Umbra prides themselves on the innovation and creativity of their products so their online presence accomplishes just that, with impeccable photography. Umbra implemented a rotating carousal above the fold to feature certain products and offer various Call to Actions to entice buyers, with a clear navigational bar that displays product categories on hover.

Umbra homepage

Scroll down – what should visitors be seeing? Flagship products, photographed beautifully with CTAs, and differentiators – statements that assert your uniqueness. Lastly, the footer is where visitors go to find more information about you and your business. It should include contact information: email, customer support number, address, and social media accounts.

The Category Page

What’s the easiest way to get visitors on your site to make a purchase? Seamless navigation and user experience. Consumers should be able to find what they’re looking for without trying too hard. The ability to sort and group together products is something we like to refer to as merchandising optimization, which you’ll see on a category page. The category page is a grouping of products that have something in common, which visitors will come to from a few different areas on your site (i.e. homepage, product page, other category pages, etc.). Products should be clearly displayed in a row-like manner, as shoppers are use to seeing products displayed in this manner, much like a grocery store shelf. It is important to keep in mind that when you’re building a category page that it is a journey to the destination of a product page, so usability and design are key. Below you’ll see an example of Umbra’s category page for all of their available chairs, which is drilled down from their “Furniture” subcategory.

Category Page

Category Page

The Product Page

The product page is an important component of an eCommerce site. So much so, that we’ve dedicated an entire blog post and ebook to the subject. The product page is where site visitors make the decision to become a customer and is framed around 3 major components:

Your product detail page design should include calls to action, trust signals, friction (make them linger), beautiful photography, and impeccable copy. Following all that I’ve outlined will optimize site performance, just adding larger product images can increase sales by 9%!

anatomy of an eCommerce site

anatomy of an eCommerce site

anatomy of an eCommerce site

anatomy of an eCommerce site

Umbra’s product pages are a great example of what you should be doing with yours. For even more information on this important part of the eCommerce anatomy, download your free copy of our Product Detail Page Design ebook here!


Going back to the first anatomical component I mentioned in this post, keeping it transactional. The check out process is a crucial part of a transactional website. When a customer is checking out it can be a make it or break it moment (the dreaded shopping cart abandonment!) so you want your process to seal the deal. There are many ways to optimize the check out process, and fortunately for you, that we’ve expanded upon in detail in a blog post!



Essentially what you should be looking to accomplish with your checkout is establishing trust with secure checkout, following a standard order of operations, having the logos of major credit card companies on display, and have clearly labelled forms. Umbra achieves all the above, while keeping the look and feel of their checkout process completely in line with their site pages.

Account Login

Providing your customers with the option to create and login into an account specifically for your website acts as an extension of shopping experience personalization, facilitates ease of access to customer service, and reinforces a secure experience. Having your customers register for accounts on your eCommerce also makes running your business easier, with greater access to purchaser information so you can manage your CRM better, and provide an optimized shopping experience. On the flip side having customers register for an account creates an efficient buying process for your online store. Having an account log-in page as part of the anatomy of your eCommerce site is beneficial, but remember that signing-up for an account should be kept optional.

Account Login

Contact Us & Customer Service Page(s)

If you’re running an eCommerce business customer service is a number one priority. No ifs, ands, or buts about it. These days when customers leave your site after having a bad experience, they’re two thirds more likely to share their experiences online. Not to mention the fact that costs more to acquire new customers than it does to retain your current ones. Communication is vital to the success of your business, so make sure your channels are obvious and open. Expectations are higher than ever, does your eCommerce site have a Contact Us page?

Keep in mind customer service best practices. Your site visitors are looking for a personalized and intimate experience, especially when seeking help. No matter the size of your operations you should have open customer service channels, but obviously scaled to your business size. Whether it’s a live chat widget, a direct phone number to speak with another human (not computer!), or a contact form that visitors can fill out with their inquiries, your eCommerce site should have it!

umbra contact us

umbra contact us

umbra contact us

The Blog

Are you creating content? You should be! Having a blog will build trust with customers and site visitors, and it solidifies your status as the expert in what you do and sell. Quality content converts customers, it’s that easy. Having a blog, whether B2B or B2C, will drive traffic to your eCommerce site. Inbound marketing is not only a great way to improve your SEO, but also increases your engagement, which in turns get you noticed. You want people to be talking about your business and products. Blogging is a winning strategy to keep the sales coming, so make sure its part of the anatomy your eCommerce site. Our friend’s and Magento clients over at Snugglebugz have a blog that provides great value to new parents, their target audience!

snugglebugz blog

Need content ideas? Content depends heavily on what type of product you’re selling, but we have some ideas, whether you’re getting started with digital retail or revamping your marketing strategy that can help you improve. Your blog is a great way to showcase and feature products, alert visitors of new initiatives, or even cover lifestyle topics related to your products. A big don’t that we can’t emphasize enough is only having a blog to increase your SEO ranking. It’s obvious, transparent, and offensive to users. Remember, be an expert that offers true value, regardless of whether visitors are making a purchase or not. Trust us, the sales will follow.

Confirmation, Success and Thank You Pages

The Order Confirmation Page is another crucial part that makes up the anatomy of an eCommerce site. When you’re focused on keeping it transactional, the transaction confirmation page is a must. Not only are you providing your customer with details of their order, but you’re building trust. Thank them for their purchase, and acknowledge the next step in the process, which would be to have them receive an order confirmation email. Remember your transactional emails are just as important are your transactional website. Every step in the process you have a visitor take is an opportunity to drive conversion and retention. To optimize your order confirmation page check out our post with 8 ways to improve!

anatomy of an eCommerce site

Next Steps

Now that you have the basic anatomy of your eCommerce site, you should then be focused on optimizing for the future. Customer behaviour and technology are ever-changing, and so should your strategies to help you succeed in eCommerce. In your next steps online here are a few things to take into consideration:

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information