Every E-commerce Website Should Have These 12 Elements

Key Takeaways

hey designer friends dave here today we're going to be talking about ecommerce and exploring the core functional website elements that make an ecommerce site an ecommerce site let's get started in general an ecommerce website is very much like a physical store it's a place where you go to find and buy things usually you'd go to a particular store or a particular type of store to find and buy a particular kind of merchandise and you go through the various steps in the shopping journey in very much the same way in both cases from arriving to looking around to searching for something specific or just browsing around generally to selecting some particular items to put in your cart and making your way to the checkout and then paying and leaving and for that reason i like to look at the journey of shopping online very much like the experience of walking into a physical store to shop and so you'll see me draw parallels between the two as i run through the list it's important to note that each of the main ecommerce website elements we'll be talking about today serves an integral purpose in the activity of selling online and without these elements an e-commerce site isn't really complete and maybe isn't even an e-commerce site at all i selected a really great ecommerce retailer called oh my cream they sell cosmetics and care products and i'll be using their site today as an example to help demonstrate each of these ecommerce website elements all my cream happens to be built and managed on shopify and we'll be looking at comparing some of the various different e-commerce platforms in future videos so let's get into it and don't worry too much about taking notes we're giving you a handy notion checklist that you can clone and use in your future projects just to make sure that you've got all the essentials captured before we dive in remember if you like these videos tell us by hitting the like button and make sure to hit the subscribe button too we've got more ecommerce videos on the way and you don't want to miss them first up collections otherwise known as categories a collection or a category is basically just a list of products that are grouped together usually at a glance so that you can shop the grouping collections make it easier for shoppers to find what it is that they're looking for and for that reason all the products in a collection are generally related to each other somehow sometimes it's by product type or by use case or by season or by capsule or by designer or whatever else the case may be depending on the type of e-commerce store it is i like to look at e-commerce collections kind of like sections or display cases in a physical retail store all the items or the products in that particular section of the store or that particular display case they're related to each other somehow and so the shoppers that are looking for that particular type of item they know where to look for them and they can find them all together in one place that's sort of the same logic behind having collections or categories in e-commerce i just want to mention that there's also something called a collection list which is a level higher than collections it's a page that literally lists various different collections or all of your collections together at a glance and it helps you or it helps the shopper rather figure out which collection that they want to look at it's kind of like if you walk into a grocery store or supermarket and you see all of the signs hanging above the various different aisles of the store and you can see them all in one view at a glance and by seeing them all together at a glance you can make a decision about which aisle you need to go to to get whatever thing that you're looking for and so that's basically the same concept behind collection lists it's a way finding thing it helps you figure out where to go as a very very first step next up filtering and sorting this is a function that can be found on collections and it helps shoppers to refine what it is that they're looking for and to make their journey just a little bit shorter and a little bit smoother filters and sorting are kind of like a second level of refining what it is that you're looking for after already having decided to enter into a particular collection sorting is a very easy concept to grasp basically you're taking the list that you have in a collection at a glance and you are rearranging it either by price often low to high or high to low or alphabetical order or by ratings or a whole bunch of other different types of sorting options depending on how you've built your store but the idea behind sorting is just to see the products that you're already looking at in a different order to make it a little bit more specific to the experience that you want as a shopper and filters are a little bit more complicated than sorting in that they actually work to reduce the number of items that are showing in the collection that you're viewing they actually refine the list down as the name filtering suggests so there are two main types of filter functions and it's a really really important distinction to understand when you're planning and building filters for an ecommerce client the first is the all filter and the way that the all filter functions is that any product that is going to display in the filtered results has to match all of the various filters that are activated or that are selected currently the other is the any filter and it works kind of in a different way in that the products that end up showing in the filtered results can match any of the selected filters they don't have to match all of them at the same time depending on the use case you might want to use one of these types of filtration or the other but what many e-commerce stores do is they employ both types simultaneously across different types of filtering options so they might employ an all type of filter for size while they'll employ in any type of filter for color next is the all-important product page this is one of the most important elements in an e-commerce store and it's the place where you have the opportunity to communicate all your product knowledge just by virtue of the fact that a shopper has found themselves on a product page is a very strong indicator of interest already that's a warm shopper they've already demonstrated established purchasing intent and they probably found their way to the product page either by already passing the first couple of steps in the funnel already choosing a collection to view possibly filtering or sorting a collection and then making a conscious decision to click through to this particular product or they found their way to this product page from outside of the site maybe from an ad or from social media or from email wherever they may have come from they made a conscious decision to bring themselves to that product page and learn more about the product and then possibly consider making a purchase i like to equate the product page on an e-commerce site with the product packaging in a physical retail environment it's a place where you get to communicate all the things you need to communicate to help make the sale of that product the difference being that a product page on an ecommerce site just has a lot more real estate and a lot more interactivity and it also affords opportunities for things like upselling and cross-selling and making recommendations so it's just a very very rich medium for making all of these communications at this very very key very essential moment in the purchasing journey so while we're talking about products let's also talk about product variants when you're shopping a product page you often have a few different options that you can select from that are available within that product things like size and color for example so each of those two options might have some various different option values inside them so size might have small medium large extra large color might have red blue green yellow for example each unique combination combines to create one unique product variant so a small and red is one variant a small and blue is a different variant medium in red is yet another unique variant there are a few common types of option pickers out there the most common being drop downs radio buttons and swatches and you'd pick the right one yeah that's right you'd pick the right picker based on the use case based on your need so for example if you want to give an option for size then probably a drop down menu makes perfect sense but on the other hand if you want to give an option for color or for fabric or a print then that's something that's more visual and you want to give a visual representation of each of those option values without hiding them inside something like a drop down so in that case swatches might make perfect sense the last thing i want to mention related to product variants is that most ecommerce platforms actually have a variant limit per product the reason for that is to ensure product page performance and in shopify for example they have a limit of three options and 100 variants 100 unique variants per product next up is the search function this is a very powerful and very important element in e-commerce websites because it is the fastest and most direct way that shoppers can find what it is they're looking for that is if they already know what they're looking for there are generally two main types of search functions out there there's conventional search where you enter your search term into the input field and you hit the action button and it loads a search results page simple as that that comes out of the box in most ecommerce platforms the other type being instant search so that actually displays your search results as you type them into the input field it also generally instant search if you hit the action button will bring you to a search results page but the magic really happens during the the instantly displayed search results as you're typing and it's super popular today because it works really well it's proven to increase conversions on e-commerce sites and just makes for a really really good user experience in general next we've got user accounts and customer dashboards which act kind of like a home base for customers on an e-commerce site and they really serve to just make it easier to be repeat customers user accounts enable faster and easier future checkouts they allow customers to manage and track their orders to have access to their loyalty programs and whatever perks might be available to them to update their personal information their phone numbers their addresses whatever else and user accounts can even sometimes be used to to get certain content for specific customer segments now let's talk about the shopping cart this is another one of the most important elements of an ecommerce site and this is really the most established level of purchasing intent before actually executing a purchase the shopping cart is where the shopper has a chance to review and modify their order before pulling the trigger it's also a place where the retailer gets the opportunity to upsell and to cross-sell and to suggest add-ons many e-commerce sites also use the shopping cart as a great place to put things like a calculator to show just how far off you are from getting free shipping or from getting some other promo and how much more you need to spend in order to qualify uh it's also a really good place to to give options for the shopper to select things like this is a gift or donate to such and such a charity or add a message to the merchant the last thing i want to say is that an empty cart is also a really good piece of real estate to use strategically and in an empty cart a lot of good retailers will put recommendations for collections or for products or they'll put some kind of content anything to make it so that the empty shopping cart isn't a dead end it's a really really good place even to just flex on brand personality so it's a very very valuable piece of real estate and when it comes to shopping carts there are generally two types two functional types of shopping carts that usually coexist with each other the first one is the cart page which is a dedicated page with its own url that houses the shopping cart and then the second one is an ajax cart which usually looks like a drawer that comes out from one side which is a very common way to to style it and that ajax cart doesn't usually have its own url but the way it functions is that every time you update something in that cart even while it's open and you change the quantity of one of the items in your cart from one to two or from two to one it will update automatically in real time without you having to click update on the cart and uh it's different from the cart page in that way on a cart page it's a page that's loaded and if you make any modifications to it you actually have to update it in order for it to reflect uh the the modifications that you've made and now let's talk about the checkout this is arguably the single most important element in the entire ecommerce journey this is that key moment when you're actually asking the shopper to reach for their wallet and part with their hard-earned cash platforms like shopify have battle tested checkouts that are highly highly optimized and proven to generate super high conversion rates this is one of those things that sets a platform like shopify apart it's here in the checkout where you're getting all of that final most important information from the shopper things like choice of payment method payment details shipping information shipping option selection discount codes that they might want to apply to their checkout this is the place where you finalize everything everything gets resolved before the shopper actually clicks the purchase button security and encryption are essential to e-commerce and in fact they exist in all major e-commerce platforms today they are what allow shoppers to shop and check out securely the existence of security and encryption also gives confidence to shoppers so really good retailers will include communication about security and encryption into their overall content strategy of their website ssl certificates are the standard they offer a layer of security for personal information and for payment gateways and they come packaged with pretty much every major e-commerce platform today so next let's talk about some things having to do with money payment gateways and taxation settings payment gateways are the technologies that process payments on behalf of merchants and allow them to actually get paid most ecommerce platforms offer a whole host of payment gateway options to their merchants which is great because the more payment method options merchants can offer to their customers the the higher the likelihood is that their customers will convert and as for tax rules merchants can set those to automatically apply the appropriate taxes based on their local tax laws and based on how those local tax laws apply to their customers their individual customers depending on where the customer is from and what the customer is purchasing next up we've got automated message flows let me run through a list of examples things like abandon cart notifications back in stock notifications newsletter sign up confirmations order confirmations order shipment notifications with tracking order update notifications various different customer account notification emails sometimes post purchase requests for more details in order to finalize an order and post order satisfaction emails and requests for customer reviews today these automated message flows are essential to selling online and they also offer a big opportunity to e-commerce merchants to really let their customer service and their branding shine and last on the list of core elements but certainly not least customer support options and faqs this one is really important and there was no question that it had to be on this list because when you're not in a physical store and you're shopping online as a merchant you can't walk up to a prospective customer and ask them if they need help with anything and as a customer shopping around in in an e-commerce store you can't just walk on over to the clerk and say hey i need to ask you something about this particular product so the idea here is you want to reduce the friction as much as possible and facilitate the purchase by making it easy for customers online to dispel doubts and to get answers to their questions to clarify features to understand whatever it is they need to understand about the product or about the brand or about the company or whatever else don't forget something important when we're talking about selling through e-commerce we're talking about selling remotely and there's just a lot less human contact so it becomes that much more important to really have great great customer support efforts so some common examples of customer support options things like an faq page or an faq section a knowledge database or a help center live chat feature or a chat widget an automated chat bot a lot of retailers are using whatsapp business these days and tools like video ask which greatly helps with conversions of course contact forms or contact pages and even phone call links all of these things as many as you have on an ecommerce site the more the better you can't have too much customer support because just by nature an ecommerce website is already lacking in human contact like i said so the more you can do to connect the more you can do to preempt the answers to questions the more you can do to make it a more informative and smoother process for customers to just learn everything they need to learn and to understand what they need to understand in order to sort of confidently make that purchasing decision the better so now that we've gone through the list of core elements of e-commerce sites i also want to go through a list of a handful of other super important elements that will very likely be part of most if not all of the ecommerce sites that you design and build it's a bit of a long list so i'll bullet them out here on screen and i'll include them in the notion checklist for you here we go shipping options local pickup gift cards loyalty programs customer reviews shipment tracking email address capture currency options commerce specific policies and legal pages integrations with physical retail point of sale systems bundling wish lists product customization blogs for content marketing and driving traffic performance analytics tracking and sales attribution and finally content management and reporting dashboard and with that you've now got a very simplified but comprehensive list of all of the elements that make up an ecommerce website i really hope you've enjoyed this i know that i certainly have make sure to stay tuned because we've got more videos on e-commerce coming up right here on flux if you have any questions or anything else to add make sure to join the conversation in the comments below i'm really looking forward to hearing from you i will see on the next [Music] you