web design
Posted on /by kellislandrum/ in ecommerce website design, Website Optimization

Ecommerce Website Design: Series Overview

Hey there, this is Kelis Landrum from True North Social. We are a digital agency based in Los Angeles California. We can help you out with your digital marketing, social media, website design, SEO. We have a special focus on E-commerce. We decided to put together a video series to help you guys to understand all the different parts of Ecommerce website design. We have quite a few people who call us up and they are interested in some help getting an E-commerce website up. Sometimes people call us and they are not familiar with the process, they have never done it before. So if that’s you, if you are looking to get an online store up for the first time, you are thinking about what kind of products do I have? What type of platform should I use? Should I use Shopify or Magento, WooCommerce? What’s involved in the process? This video series is for you, okay? We are going to discuss a lot of the basic concepts around E-commerce, website design, what’s involved, what makes E-commerce websites different from other types of websites. What is involved in the scope of work if you hire someone to help you do this? We are going to have a couple of different chapters about different pieces of online stores, what’s involved and give you a good overall idea of what’s involved in this process.

So let’s talk a little bit first about what is specific to E-commerce websites. What makes them different than other types of websites? The basic fundamental premise of an E-commerce website, as opposed to other kinds of websites, is E-commerce websites are focused on a transaction. The end process is you are going to have something in your cart, and you are going to go through checkout, right? What makes E-commerce what it is essentially, is there is a transaction involved. You are usually taking someone’s credit card information, you’re processing it, they are paying you for something. I should mention in the scope of this video series; we are going to limit the type of transactions that we are dealing with to small physical products. We are limiting it to this because most E-commerce websites deal with physical products that are small enough to stick inside a regular size USPS box and mail somewhere, right? More difficult kinds of E-commerce websites deal with non-physical products like signing up for a cooking class, it’s much more complicated. If you have to sign someone up for a class, then they have to switch their class, or you have to create non-physical tickets to a thing; much more complicated.

Most E-commerce websites deal with– Santa Fe Olive Oil here is a website we did. They sell Olive Oil, vinegar, and some accessories. But all of these products fit into a small cardboard box that you can mail to someone pretty easily. None of their products weigh more than a couple of pounds. It is pretty standard stuff. Most of you out there are probably selling products like this; things like t-shirts, small food goods. So this is the kind of thing we are going to deal with, right?


Now I mentioned that because there are all sorts of different websites out there. We also do a lot of websites for companies that offer services. But the goal of those types of websites is that they are trying to generate a lead, right? They are not online stores, because they are not trying to conduct a transaction. They are not trying to take someone’s money. I bring this up because sometimes we get people who say, hey we want to build a website on Shopify or Magento or Woo-commerce or some sort of e-commerce platform. But their goal is not to take someone’s money. Their goal is not to conduct a transaction. In those cases we generally recommend they try some other platform; WordPress is pretty standard for this. You can use bigger ones, more complicated ones. But this is sort of the first thing to know about designing an E-commerce website is your goal should be at the end of the day to take someone’s money, process their credit card transaction, generate an order. This is kind of where you draw the line between E-commerce websites and basically any other kind of website. Everything involved in designing an E-commerce website revolves around getting someone to add something to their cart, go through checkout, so you can take their money and generate an order. So this is kind of our global scope, right? If you can’t conduct a transaction, we call your store broken, right? We use broken as a broad term for being non-functional in the sense that you are not able to accomplish the main goal that you are trying to accomplish. There may be lots of other little goals. You may define a micro-goal as getting someone to go to a product page, getting someone to sign up for your e-mail list. Those are what we call micro-goals. The macro-goal is generating a transaction. So we are going to define everything we are talking about based on the goal of getting someone to buy, right? Getting someone to fill out the forms in checkout process with their credit card number, and complete that process, right?


Let’s see, all online stores are a little bit different, right? You may have different products for different companies; you can use different online store platforms like Shopify or Magento for different types of products, right? You may be selling clothing for women, clothing for men, clothing for children. You may be selling food products. There are a lot of different things that you can sell. But all of these online store platforms are designed in a fairly similar way. The structure of them is fairly similar with all of these different types of product transactions, right? They are generally constructed out of a few different things. It’s because– I am going to use the example I heard from Tobias Lütke who is the CEO of Shopify. We went to Shopify’s conference several years in a row. I heard him give a keynote speech where he talked about the purpose of Shopify as they see it. 80% of merchants have the same sets of needs, right? They need to conduct a transaction; they have products that they need to sell. They need to be able to create those products, they need to be able to facilitate a customer, adding those products to a cart, and having them go through checkout, right? This is pretty universal across the board for almost every online store. Almost every online store is going to have some of the same certain pieces regardless of what product you’re selling. All online store or E-commerce website platforms like Shopify or Magento, they facilitate the structure, right? Every online store is going to have a few pieces that universally across the board they are going to have a home page, right? Just like this one. It is going to feature whatever they want to sell hopefully, and try and entice someone to buy. This is one of the pages that is going to be in every online store, and just about every website ever. In addition to the homepage, every online store is going to have a collection of products of some sort. The only reason an online store would not have a collection page is because they only sell one product. If you sell more than one product you need a collection page that will allow a customer to view all of the products you offer, or certain collections, or categories of the products you offer, right? This particular store shows several different collections of products. Almost every merchant will have more than one product, and they will need to organize their products into collections. To help customers find whatever it is they’re looking for. So this is a standard page template within Shopify, within Magento, within WooCommerce, within virtually every platform.

The next page template is the product page. This is going to have some very common elements, and it is essential to E-commerce. It’s because every store is going to sell products, and every product has to have some common elements. Additionally, they should have some other elements, and they may have some other elements. So let’s have a look at these elements. Every product must have a title, right? We must tell people that this is the product you are going to buy. It must have a price and an ‘add to cart’ button, right? These are the three main essential ingredients that you must have for every product. Without these elements, you cannot have a product to add to a card. The reason being is when we go to the cart page, we need to be able to list the items that someone is buying and the price, right? Now in addition to that, a product very well should have a picture of what this product looks like. It doesn’t have to; non-physical products may not have a picture, a gift card may not have a picture, a class you were signing up for may not have a picture, an e-book may not have a picture if there is no cover for it, right? But any physical good should most definitely have a picture of it. It should also have a quantity just in case someone wants to buy more than one of these. Even if it just comes in one size, it should have a size. If it has multiple sizes it should have the sizes listed along with it. It should have a description which should tell people what this product is, what is contained in this product, any portent information or important details about a product should be included in the product description. As I mentioned, a product must have an ‘add to cart’ button, because you have to be able to add it to the cart. I just added this one, and now it has shown that it is in the cart here. Close this thing here.


You can add as much descriptive text as you want to, to a product. It may have size variations if you are selling clothing. It may have size charts along with it. It’s often a best practice to add some social media sharing options to it. I would say best practice is also ‘you may also like’.
We are going to go into some more detail about product pages in another video, but this is a product page, this is a pretty standard product page template. An online store will also have a cart. All online stores need to have a cart because someone needs to be able to review what they are buying. I am just going to add another product to my cart, so we can see there are more products in my cart, right? This is a preview of the cart, this is showing me what’s in my cart. I can add as much to my cart as I want. Then once I have decided yeah, this is what I want, I am going to go through the checkout process. Again, I am going to create another video that goes through the shopping cart process. Sorry, this is a cart page, going through the cart, going through all of these page templates in a little bit more detail. But the summary here is; almost any E-commerce website will have a home page, a collection page, a product page, a cart page, and a checkout process; which is a series of pages, or series of screens. These are all fundamentally crucial in the process of processing a transaction. That wasn’t very kindly worded, but in order to take someone’s money, you are going to need all these things, right?


I am going to go back one step here; I am going to mention one other crucial piece of any online store, maybe two crucial pieces. A header and a footer. These are not page templates; they are universal to every page on the website. In fact, almost all websites, regardless of whether they are E-commerce sites or not, have a header and footer, and they are virtually always the same across every page of the website. Websites are constructed fundamentally this way as a best practice for many different reasons, that I am not going to get into the course of these videos. But, it is significant to mention, because when we design customer’s websites, even when we do E-commerce websites, setting up the header and the footer is a different process than setting up the pages themselves, right?


So these are the basic pieces of an E-commerce site that we are going to be discussing throughout this series. Let’s see, okay one last thing to note as we are going through this process; we are going to talk about both the front end and the back end of E-commerce websites. We are going to use Shopify as our platform for an example of how we do these websites. Now I am going to just caveat this out by saying these concepts we are going to talk about, are the same across any E-commerce platform, right? The concepts behind what we’re selling are the same, whether you use Magento, Shopify, E-commerce or whatever platform you want to use, right? All of the things I’ve talked about in this video so far, they apply to every platform, right? But the platform we are going to show you the back end of is Shopify. The reason we are using that platform is because it is generally the simplest one for merchants to use. Magento is much bigger, much more complex. Generally quite a bit more difficult to use. Woo-commerce we are not showing because WordPress is not strictly an E-commerce platform. You can use it for a lot of different types of websites besides just E-commerce websites. We generally recommend it for every other kind of small-scale website beside E-commerce websites. WordPress is a great platform; it is just not great for online stores. It is not really built for that. Woo-commerce is a WordPress plug that allows you to do E-commerce, but it is not a true E-commerce platform. So we are going to look at the backend of Shopify. I will give you a quick preview of the back end of a Shopify store.


We are going to get into a little bit more detail about the specifics of this in some of our other videos. But rest assured that we are going to try and release one of these video blog posts weekly. We are going to do one where we are going to cover the header and footer, right? This is the header and this is the footer. We are going to cover the homepage in a little bit more detail. We are going to cover the collection page in a little bit more detail. We are going to cover the product page in a little more detail. We are going to cover the cart page in a little bit more detail, show you some of the things you can do with that. We are going to cover the checkout process in a little bit more detail, right?
These are what we would call the front end of the website. These are all the parts of it that a customer will see, right? Separately we are going to do individual videos for some specific sections of the backend of this. We are going to cover the products, we are going to cover the products overview, and we are going to cover individual product pages from the back end. We are also going to cover collections and what is involved in creating collections, some of the creating manual collections, as well as creating automated collections. This is pretty important; we are also going to cover orders, right? These are all fundamental things you are going to need to understand in order to run an online store. Again, we talk about this because we have a lot of merchants call us who have a successful retail business. They have been operating a business for years selling, and in the case of Santa Fe Olive Oil, selling Olive oil, selling vinegar, selling a lot of stuff that– they know this business very well. They have a retail store that is pretty successful. They do some wholesaling, right? There are a lot of merchants like this who have a great product and know their business, they just haven’t sold anything online before, and they are really interested and eager to learn about it and become successful. They realize this is a business that’s growing, or this is another segment of business, another channel of business that’s growing, that will allow them to make a lot more money. So when they come to us, they want to understand what’s involved, how can you help us in our effort to design and E-commerce website? What are we going to need to do? What is the process? So throughout the course of these videos, we are going to do our best to help you understand what’s involved, what are the pieces, and how you can work with us, or any other agency out there that does E-commerce website design in any capacity, to help you be successful, and understand what are the questions you should be asking them. What’s involved, and if they are in fact the right partner for you. So stay tuned, keep checking back with our website. Again my name is Kelis Landrum, we are True North Social, and we hope this helps, thanks.

 


 

Check out all of our posts in the Ecommerce Website Design series:

E-commerce Website Design: Series Overview
https://truenorthsocial.com/ecommerce-website-design/ecommerce-website-series-overview/

E-commerce Headers and Footers – The most underrated piece of your Online Store
https://truenorthsocial.com/ecommerce-website-design/e-commerce-headers-footers-the-most-under-rated-piece-of-your-online-store/

Homepage Banner Best Practices for Shopify Online Stores
https://truenorthsocial.com/ecommerce-website-design/homepage-banner-best-practices-shopify-online-stores/

How to make a great homepage for your E-commerce Website
https://truenorthsocial.com/ecommerce-website-design/how-to-make-a-great-homepage-for-your-ecommerce-website/

What you need to know about your E-commerce Shopping Cart Page
https://truenorthsocial.com/ecommerce-website-design/what-you-need-to-know-about-your-e-commerce-shopping-cart-page/

How To Create New Products in Shopify – Video Tutorial
https://truenorthsocial.com/ecommerce-website-design/create-new-products-shopify-video-tutorial/

How To Create Collections in Shopify – Video Tutorial
https://truenorthsocial.com/ecommerce-website-design/create-collections-shopify-video-tutorial/

How To Create New Pages in Shopify – Video Tutorial
https://truenorthsocial.com/ecommerce-website-design/create-new-pages-shopify/