Anatomy of a Website
ecommerce, online stores, Web Design
January 26, 2022
Hey there and welcome back!
So throughout this month we’ve been talking about the anatomy of a website. And today we’re going to finish this series, for now, by talking about the different ecommerce pages you might have on your website if you sell online. These would be the main store page, the product pages that you have, as well as the cart and checkout pages.
If you run an online store, these pages are the most crucial on your website period. So let’s talk more about what these are and how you can make sure that they’re the best that they can be for maximum success.
Before we get started, if you want to see more videos about web design, ecommerce, WordPress, digital marketing and other website-related topics, be sure to hit the subscribe button and to ring the bell for notifications.
Now let’s get started.
What is the store page?
So first off, let’s talk about the store page. What exactly is it?
Well it’s essentially the page where all of your products are listed or at least a set of products are listed with pagination to see more products. In some cases, there also might be links to specific product category pages that list just those products in that category.
Each product here, obviously, has, well, the product title, the price of the product and a link to learn more about the product. There also might be a brief, one sentence description about the product and an “add to cart” button to add the product to the shopper’s cart.
If your store is the sole reason for your website for your business, it’s probably going to be the homepage. And it’s going to be the main hub of action on your website.
What is the product page?
Moving along, let’s discuss the product page and what’s on it. This is where the action really takes place. Here’s where the user is going to make the big decision whether to buy the product or not. So you have to get this page right.
In addition to the title of the product, the price of the product and a big, noticeable button to add the product to the customer’s cart, there also should be a lot of photos of the product so that the user knows what they are buying. Also, you should have a longer, more detailed description of the product. Maybe you can even list out each feature separately with more about it, especially if you’re selling software.
You can also have user reviews of the product. Sometimes that social proof of someone else saying that this product helped them can be a factor in deciding to buy or not.
What are the cart and checkout pages?
Finally, let’s talk about the cart and checkout pages since they are pretty closely related. What are they?
The cart page is where a user can view what they’ve put into their virtual shopping cart. The user can either add in quantities of a product that they’ve already added to their cart or remove items from the cart.
And the checkout page is probably the most important page on your website. It is, after all, where a user is going to go to pay you for the products that they are purchasing. Typically they’ll enter in their credit card information through a payment gateway you have on your website. And they even might have to add in their shipping address if you sell physical products.
These pages aren’t usually thought about a lot, especially when it comes to designing the website, but they do play an important role on the site.
Why are these pages so important?
So at the end of the day, why are these pages so important to your website and ultimately your business?
Well, I think it seems pretty obvious. If you sell products online, this is where you work on getting people to become your customers and to buy the products that you offer. Simple as that.
These are the pages that are going to make you money. You’re either showing a user what you have to offer them or how this product can help them and convincing them to add this certain product to their cart. And then you’re taking their money in exchange for the product. You need these pages to be as optimized as possible to maximize your profits, essentially.
If these pages don’t work, either because there’s some sort of technical issue that’s keeping people from buying those products or the content is not there to convince people to buy the products, then your website is not working and you’re losing money.
You need these pages to work for your business.
Elements of these pages
Now that we know a little bit more about what these pages are and we know why they are important to your website, let’s break down the different elements that make up an online store.
First we’re going to start with search and filtering on your store page. If you have less than 20 items or so, these probably aren’t going to be super crucial since it’s not hard to browse all of your products. But if you have a lot of items, having good search and filtering options becomes a lot more important. Make sure that there is a search box that a user can use to type in keywords to find what they need. And also make sure you have different filters that can help a user narrow their search to find what they are looking for.
Next up you’re going to have to have product images for all of your products. People might not be able to get to your physical store, so these images are how people are going to figure out if this is what they want or need. So make sure you take high quality (i.e. not blurry or pixelated) and that if possible you show it in action as well.
Also, you need to make sure that you have the price clear and obvious on both the store page and the product page. The price might be the most important piece of information people need to make a decision. So make sure it’s clear, and if you have a sale, make sure the sales price is clear as well.
Another thing you’ll have on your online store is purchase or add to cart buttons. These also need to be clear and obvious since this is the action users need to take to continue down your sales funnel. Make sure that they stand out from the rest of the content so that people know where to go to purchase the product.
Next on your product page you’re going to have a description as well as information about the product. As I mentioned before, people online aren’t able to physically touch the product. So give a very detailed description of the product. Also, you probably want to include the dimensions or specifications and other details as well. Best Buy’s product page is a great example to follow.
Also, you will need to have a checkout page for your online store. The good news is that if you use something like WordPress and a plugin to run your online store, this will be created for you. You will, however, need to use a payment gateway like PayPal or Stripe so that you can take the customer’s credit card information. Also, you will need to have an SSL certificate and use HTTPS, however, to take credit card information on your website.
Another thing you’ll have for your online store is the cart listing page for a user. I talked about this earlier, but this is where people will see what they have in their cart and make changes to it. Make sure that all of your buttons are clear and obvious to what they do so that users don’t take the wrong action by accident.
And finally you will need to make sure that you have refund information and other information about your store easily available on your website. Having a clear refund policy can help people feel better about buying that product they are looking at. Also, if you have free trials or subscription services, make sure that you talk about that as well.
Make sure you test your checkout process online
Something that I want to make sure that you do for your online store is that you make sure you test out the checkout process in a test or sandbox environment. The last thing that you want for a customer to do is to be all excited and add the products to their cart and start the checkout process and then something on that page is broken and they can’t pay you for the products. That’s lost money, and I don’t think I’m really breaking any news when I say that that’s bad for your business.
So make sure you test it out before your website is live just to make sure that it’s all working. That’s the most critical part of your website.
What makes for a good online store?
So now that we know what an online store is and why it’s so important and the different elements that make up an online store, what makes for a good online store?
Well first off, having high quality images of your products and great product descriptions is a must have. Since people might not be able to come to your store for one reason or another, they won’t be able to physically touch and see the products. This is how you replace that. So make sure you take great photos of the product and what it can do and that you really describe what it can do and how it can help the customer. This is how you convince people to buy it.
Next, a good online store has really good search and filtering options. People need to be able to easily navigate through your store to find what they are looking for. And if you can make it easier for them to find what they want or need, then you can increase your sales.
And finally a good online store has a smooth checkout process. Everything is easy to fill out and navigate, and there are no hiccups along the way. You don’t want your customers to have to click more than they need to to complete the purchase. Or you also don’t want them running into a broken checkout process as well.
What makes for a bad online store?
On the other hand, what makes for a bad online store so that you can avoid these mistakes?
Well first off, as I have mentioned many, many times in this video, a bad or broken checkout process is a really, really bad problem to have. If people can’t checkout, they can’t pay you money which means you aren’t earning money and that’s a really, really bad problem. I’m sure you know that. So double check the checkout process in a testing environment to make sure that it’s working.
Next, a store that’s really hard to navigate is a bad online store as well. If people can’t find what they are looking for, they’re just going to leave and see if they can find it elsewhere. And that means missed sales for you.
Finally, less-than-idea product pages are a problem. This could include any number of issues. You could have some really bad or blurry or pixelated photos that don’t really show off what a product is. Or your descriptions could be insufficient to convince someone to buy it. Also, not having user reviews could be an issue if people want to see social proof before buying it. And finally, burying your “add to cart” button is a really bad idea since that is the action that you want them to take on the product page.
How you can apply it to your website
So how can you apply what we’ve talked about today to your website and your online store?
Well first off, make sure that your product pages are the best that they can be. As I’ve said many times before, this is where you’re going to convert people into being customers and how you’re going to earn money. So checkout those product pages and make sure that the photos and the description are high quality and really show off your product.
Also, add in reviews to the product pages and maybe add in a form where people can add in their own reviews. And make sure that the price and “Add to Cart” buttons are clear and obvious so that the customer knows what they are paying and that they know where to click to add the product to their cart.
Next, make sure that your products are organized in a way that’s easy to navigate and look through. You want to make it as easy as possible for someone to find the product they want or need.
Another thing you can do as I’ve mentioned many times — so you know it’s important — is to test the checkout process. The worst thing you can do for your online store is to have a broken process that costs you money.
And finally, you’ll want to attach analytics to your store and website, including Google Analytics’ Enhanced Ecommerce stats. That way you can see how people are navigating around your website, what they are throwing into their carts and where they might be leaving during the sales process. I’ve linked to two videos I’ve done in the past on Google Analytics and the Enhanced Ecommerce addition.
So that is it for today and this whole series in general. What questions do you have about online stores and websites in general? Be sure to leave them down in the comments section below.
If you’re in the market for a new or first website for your business, I would love to help you get started and create a website to get your business online relatively quickly and for a price that should fit your budget. Check out the link in the description for more information and to sign up for a free one-hour consultation.
Next up we’re going to be talking about WordPress and why you probably should be using it for your business’ website. And we’ll also talk about how you can get started with a WordPress website.
To see that video and other videos on web design, WordPress, ecommerce, digital marketing and other website-related topics, be sure to hit the subscribe button and to ring the bell for notifications.
But until next time, I wish you and your business the best of luck.
What is an Online Store?