From your top-level nav to your seal-the-deal content, there are endless considerations when it comes to crafting your ecommerce page. Using one of his personal favorite examples, Rand takes you step by detailed step through the process of creating a truly superb ecommerce page in today's Whiteboard Friday.
Click on the whiteboard image above to open a high-resolution version in a new tab!
Video Transcription
Howdy all and welcome to a special edition of Whiteboard Friday. My name is Rand Fishkin. I'm the founder of Moz, and today I want to talk with you about how to craft the best damn ecommerce page on the web. I'm actually going to be using the example of one of my very favorite ecommerce pages. That is the Bellroy Slim Wallet page. Now, Bellroy, actually, all of their pages, Bellroy makes wallets and they market them online primarily. They make some fantastic products. I've been an owner of one for a long time, and it was this very page that convinced me to buy it. So what better example to use?
So what I want to do today is walk us through the elements of a fantastic ecommerce page, talk about some things where I think perhaps even Bellroy could improve, and then walk through, at the very end, the process for improving your own ecommerce page.
The elements of a fantastic e-commerce page
So let's start with number one, the very first thing which a lot of folks, unfortunately, don't talk about but is critical to a great ecommerce process and a great ecommerce page, and that is...1. The navigation at the very top
The navigation at the top needs to do a few things. It's got to help people:
- Understand and know where they are in the site structure, especially if you have a more complex site. In Bellroy's case, they don't really need to highlight anything. You know you're on a wallet page. That's probably in Shop, right? But for Amazon, this is critically important. For Best Buy, this is hugely important. Even for places like Samsung and Apple, critical to understand where I am in the site structure.
- I want to know something about the brand itself. So if this is the first time that someone is visiting the website, which is very often the case with ecommerce pages, they're often entry points for the first exposure that you have to a brand. Let's recall, from what we know about conversion rate optimization, it is uncommon, unusual for someone to convert on their first visit to a brand or a website's page, but you can make a great first impression, and part of that is what your top navigation needs to do. So it should help people identify with the brand, get a sense for the style and the details of who you are.
- You need to know where, broadly, you can go in the website. Where can I explore from here? If this is my first visit or if this is my second visit and I'm trying to learn a little bit more about the company, I want to be able to easily get to places like About, or I want to be able to easily learn more about their products or what they do, learn more about the potential solutions, learn more about their collections and what other things they offer me.
- I also, especially for ecommerce repeat visitors and for folks who are buying more than one thing, I want to have this simple navigation around Cart. I don't, in fact, love how Bellroy minimizes this, but you want to make sure that the Search bar is there as well. Search is actually a function. About 10% to 12% of visitors on average to ecommerce pages will use Search as their primary navigation function. So if you make that really subtle or hard to find or difficult to use, the Search feature can really limit the impact that you can have with that group.
- I want that info about the shopping process that comes from having the Cart. In Bellroy's case, I love what they do. They actually put "Free shipping in the United States" in their nav on every page, which I think, clearly for them, it must be one of the key questions that they get all the time. I have no doubt that they've done some A/B testing and optimization to make sure, "Hey, you know what? Let's just put it in front of everyone because it doesn't hurt and it helps to improve our conversion rates."
2. Core product information
Core product information tends to be that above-the-fold key part here. In Bellroy's case, it's very minimalist. We're just talking about a photo of the wallet itself, and then you can click left or right, or I think sometimes it auto-scrolls as well on desktop but not mobile. I can see a lot more photos of how many cards the wallet can hold and what it looks like in my pants, how it measures up compared to a ruler, and all that kind of stuff. So there's some great photography in here and that's important, as well as the name and the price.These core details may differ from product to product. For example, if you are selling a more complex piece of technology, the core features may, in fact, be fairly substantive, and that's okay. But we are trying to help. With this core product information, we're trying to help people understand what the product is and what it does. So wallet, very, very obvious. If we're talking about lab equipment or scientific machinery, well, a little more complicated. We better make sure that we're communicating that. We want...
- Visuals that are going to serve to... in this case, I think they do a great job, but comprehensively communicate the positioning, the positioning of the product itself. So Bellroy is clearly going with minimalist. They're going with craft. They're a small, niche shop. They don't do 10,000 things. They just make wallets, and they are trying to make that very clear. They also are trying to make their quality a big part of this, and they are trying to make the focus of the product itself, the slimness. You can really see that as you go into, well obviously, the naming convention, but also the photography itself, which is showing you just how slim this wallet can be in comparison to bulky other wallets. They take the same number of cards, they put them in two different kinds of wallets, they show you the thickness, and the Bellroy is very, very slim. So that's clearly what the positioning is going for.
- Potentially here, we might want video or animation. But I'm going to say that this is only a part of the core content when it truly makes sense. Great example of when it does make sense would be Zappos. Zappos, obviously, has their videos for nearly every shoe and shoe brand that they promote on their website. They saw tremendous conversion rate improvements because people had a lot of questions about how it moves and walks and how it looks with certain pieces of clothing. The detail of having someone explain it to you, as I'm explaining ecommerce pages to you in video form, turned out had a great impact on their conversion rate. You might want to test this, but it's also the case that this content, that video or animation content might live down below. We'll talk about how that can live in more of the photos and process at the very bottom at the end of this video.
- Naming convention. We want price. We want core structural details. I like that Bellroy here has made their core content very, very slim, just the photos, the name, and the price.
3. Clear options to the path to purchase
This is somewhere where, I think, a lot of folks unfortunately get torn by the Amazon model. If you are Amazon.com, which yes, has phenomenal click-through rates, phenomenal engagement rates, phenomenal conversion rates, but you are not Amazon. Repeat after me, "I am not Amazon." Therefore, one of the things that Amazon does is they clutter this page with hundreds of different things that you could do, and they built that up over decades, literally decades. They built up so that we are all familiar with an Amazon page, ecommerce page, and what we expect on it. We know there's going to be a lot of clutter. We know there's going to be a ton of call-to-actions, other things we could buy, things that are often bought with this, and things that could be bundled with this. That is fine for Amazon. It is almost definitely not fine for you unless you are extremely similar to what Amazon does. For that reason, I see many, many folks getting dragged in this direction of, "Hey, I want to have 10 different calls-to-action because people might want to X, Y, and Z." There are ways to do the "might want to X, Y, and Z" without making those specific calls-to-action in the core part of the landing page for the ecommerce product. I'll talk about those in just a second.
But what I do want you to do here is:- Help people understand what is available. Quick example, you can select the color. That is the only thing you can do with this wallet. There are no different sizes. There are no different materials that they could be made of. There's just color. Color, Checkout, and by the way, once again, free shipping.
- I am trying to drive them to the primary action, and that is what this section of your ecommerce page needs to do a great job of. Make the options clear, if there are any, and make the path to purchase really, really simple.
- We're trying to eliminate roadblocks, we're trying to eliminate any questions that might arise, and we want to eliminate any future frustration. So, for example, one of the things that I would do here, that Bellroy does not do, is I would geo-target based on IP address. So I'd look at the IP address of the visitor who's coming to this page, and I would say, "I am pretty sure you are located in Washington State right now. Therefore, I know that this is the sales tax amount that I need to charge." Or, "Bellroy isn't in Washington State. I don't need to charge you sales tax." So I might have a little thing here that says, "Sales Tax" and then a little drop-down that's pre-populated with Washington or pre-populated with the ZIP code if you know that and "$0." That way it's predictive. It's saying already, "Oh, good. I know that the next page I'm going to click on is going to ask me about sales tax, or the page after I enter my credit card is." You know what, it's great to have that question answered beforehand. Now, maybe Bellroy has tested this and they found that it doesn't convert as well, but I would guess that it probably, probably would convert even better with that messaging on there.
4. Detailed descriptions of the features of the product
What I'm trying to do here is a few things:
- I want to help people know what to expect from this product. I don't want high returns. Especially if I'm offering free shipping, I definitely don't want high returns. I want people to be very satisfied with this product, to know exactly what they're going to get.
- I want to help them determine if the product fits their needs, fits what they are trying to accomplish, fits the problem they're trying to solve.
- I want to help them, lead them to answers quickly for frequently asked questions. So if I know that lots of people who reach this page have this sort of, "Oh, gosh, you know, I wonder, what is their delivery process like? How long does it take to get to me because I kind of need a wallet for this trip that I'm going on, and, you know, I'm bringing pants that just won't hold my thick wallet, and that's what triggered me to search for slim wallets in Google and that's what led me to this page?" Aha, delivery. Great job. You've answered the question before or as they are asking it, and that is really important. We want answers to the unasked questions before people start to panic in the Checkout process.
You can go through this with folks who you say, "Hey, I want you to imagine that you are about to buy this. Give me the 10 things in your head. I want you to say out loud everything that you think when you see this page." You can do this with actual customers, with customers who are returning, with people who fit your target demographic and target customer profile but have not yet bought from you, with people who've bought from your competitors. As you do this, you will find the answers to be very, very similar time after time, and then you can answer them right in this featured content. So warranty is obviously another big one. They note that they have a three-year warranty. You can click plus here, and you can get more information.
I also like that they answer that unasked question. So when they say, "Okay, it's 80 millimeters by 95 millimeters." "Man, I don't know how big a millimeter is. I just can't hold that information in my head." But look, they have a link "Compare to Others." If you click that, it will show you an overlay comparison of this wallet against other wallets that they offer and other wallets that other people offer. Awesome. Fantastic. You are answering that question before I have it.5. A lot of the seal-the-deal content
- Help people get really comfortable and build trust. So if I scroll down here, what I'm seeing is more photos about how the wallet is made, how people are using it. They call this the nude approach, which cleverly titled, I'm sure it makes for a lot of clicks. The nude approach to building a wallet, why the leather is so slender, why it adds so little weight and depth, why it lasts so long, all these kinds of things.
- It's trying to use social proof or other psychological triggers to get rid of any remaining skepticism. So if you know what the elements of skepticism are from your potential buyers, you can answer that in this deeper content as people get down and through this.
SEO for ecommerce pages
SEO for ecommerce pages is based on only a few very, very simple things. Our SEO elements here are keywords, content, engagement, links, and in some cases freshness. You hit these five and you've basically nailed it.- Keywords, do you call your products the same thing people call your products when they search for them? If the answer is no, you have an opportunity to improve. Even if you want to use a branded name, I would suggest combining that with the name that everyone else calls your things. So if this is the slim sleeve wallet, if historically Bellroy had called this the sleeve wallet, I would highly recommend to them, "Hey, people are searching for slim wallet. How about we find a way to merge those things?"
- Content is around what is on this page, and Google is looking for content that solves the searcher's problem, the searcher's issue. That means doing all of these things right and having it in a format that Google can actually read. Video is great. Transcripts of the video should also be available. Visuals are great. Descriptions should also be available. Google needs that text content.
- Engagement, that is going to come from people visiting this page and not clicking the back button and going back to Google and searching for other stuff and clicking on your competitor's links. It's going to come from people clicking that Checkout button or browsing deeper in the website and from engaging with this page by spending time on the site and not bouncing. That's your job and responsibility, and this stuff can all help.
- Links come from press. It can come from blogs. It can come from some high-quality directories. Be very careful in the directory link-building world. It can come from partnerships. It can come from suppliers. It can come from fans of the product. It can come from reviews. All that kind of stuff. People who give you their testimonials, you can potentially ask them for links, so all that kind of stuff. Those links, if they are from diverse sets of domains and they contain good anchor text, meaning the name of your actual product, and they are pointing specifically to this page, they will tremendously help you rank above your competition.
- Freshness. In some industries and in some cases, when you know that there is a lot of demand for the latest and greatest, you should be updating this page as frequently as you can with the new information that is most pertinent and relevant to your audience.
All right, everyone, thanks for joining us. We'll see you again hopefully on Whiteboard Friday. Take care.
Hey Rand, thanks for all those suggestions. I loved the example of bellroy, that was just new and more then awesome for me.
The e-commerce site that's one of my favorite is https://www.fiftythree.com/pencil. I love the way they have shown the features of the product (pencil).
Thank you for that, watching this made me sad and happy. Did everything wrong but now I know how to fix it!
Haha I get pretty much the same feeling watching many episodes of WBF or reading other articles. :-) But the point is we are growing and learning each day, so it's good we do this.
ATB,
PopArt
Thanks for the great nuts & bolts WBF. Top notch as always. Would love to see a WBF for Category Landing Pages for eCommerce.
Agreed! That's a great idea - will put it on the docket.
Fantastic video post Rand ! Very well laid out and informative. Loved every minute!
As an 8+ year veteran of e-commerce marketing, I would like to add one point that may be helpful for e-commerce retailers who sell products they do not manufacture or create.
Avoid using the standard descriptions provided by the manufacturer as you will not get any benefit from essentially posting duplicate content. Instead use it as an opportunity to customize the product descriptions to fit your site's theme and tone and set your site apart from the competition. The unique content will benefit you from both an SEO and UX perspective. It may be tedious, but it is well worth the effort!
Thanks for watching this week all! Couple questions for you:
1) What's your favorite e-commerce landing page (something outside the mainstream, i.e. not just Amazon)?
2) If you're in ecommerce, what changes have you seen make the biggest difference for conversions?
Look forward to getting into the discussion (I'm on a long flight the next 12 hours, but will be back online thereafter).
I love ecomm optimisation - those moments when a client sees a spike in conversions gives you a warm, fuzzy feeling inside :)
With your questions Rand...
1) I like to show clients https://www.lyft.com/drive-for-lyft as an example of a wonderfully simple landing page with a big call to action. I especially like the 'See how much you can make' - as a species, we're nosy, so this makes it very simple to dig into what else we can make money doing.
2) I have seen many different changes increase conversions and find it depends a lot on who the audience is. Tailor a message to empathise with someone at an emotional level and hook them in with what they want to see or hear. I don't mean just changing the colour of a 'Buy Now' button, but I have seen a change in page position have an impact.
One of the more recent changes I saw was actually quite straight forward - de-clutter the focus areas on the page. There were too many tiled images that pushed the information further down the page, and that information was just a lump of text.
Changing to a small image slider, pulling CTA next to this and all product options above the fold, saw a 19% increase in conversions
Loving this WBF especially :)
-Andy
Thanks Andy! I hadn't checked out the drive for Lyft page before. Sort of has a SaaS-signup-kinda feel to it.
Totally agree on the decluttering of the focal CTA on a page. I think that methodology can be applied to actions and pages of all kinds.
Personally I like DressForLess site - I always find the product easily, the pics are clear and very realistic, the description of products are short and concese, just the way they should be.
~Anja
Thanks Anja! Feels like a lot of e-commerce clothing sites have figured out this model and replicated it. Sites like Nordstrom, Macy's, Ted Baker, etc all have a very similar feel to them.
Love everything ecommerce, glad you did this WBF!
1. As far as beauty and design and CRO, I really like https://www.bollandbranch.com/collections/bedding/products/hemmed-sheet-set
As far as best product pages that do SEO well and look good, WayFair does a really good job overall - https://www.wayfair.com/Gela-36-Single-Vanity-Set-... - note how they are really descriptive in their informational section, and they're not hiding anything behind tabs, a good SEO best practice.
Yeah, wow, those Boll & Branch folks are really doing it all. The "so-and-so from city, state just bought this" fly-over, the reviews, the layout, the photos -- all pretty darn slick. Impressive to see Wayfair, too. They clearly went with the Amazon-style "more-is-more" model.
On-page optimization. There was none what so ever when I started. Now we rank in top 10 (mainly top 5) on the SERPS for the 50 keywords that generate the most traffic for us.
Even considering the fact that our domain and page authority in general is 1/3 of our competitors, we manage to get ahead in the SERPS. Also using site links and reviews (that show up in the SERP) make us stand out a lot.
Thanks for the WBF as usual Rand!
Best,
Great WBF Rand! I'll add one thing that Amazon actually screws up: not informing you (at any point in the purchase path) about shipping METHOD, i.e. is it coming USPS, UPS, or FedEx. Why does this matter? Well, in rural locations like where I live in Bend, UPS and FedEx deliver to my door...USPS does not. I've had countless packages shipped here to my address that either go all USPS, or as far as Bend via UPS/FedEx, then they send it the rest of the way via the post office. Which then goes through a mail forwarding loop, and EVENTUALLY I get to stand in line for 1/2 hour and get the (#*@&$*(#@ package at the post office. Or, in the case of my steam punk costume accessories for this Saturday's Hallowe'en party...that forwarding loop means it's not getting here in time. *sigh*. Interestingly, about 3/4ths of the stuff I order from Amazon arrives via UPS or FedEx. I just have no idea with each order if this is going to be one of them :-/
Great point Michael! I think anytime there's questions that customers have before they buy, it's really smart to include that on the product page so there's no confusion or wondering before you click that "add to cart" button.
BTW - great to see you here in the comments :-)
Thanks very much, i will apply some of this advises in the future for sure :)
Thanks for the post! It's really helpful, especially from an SEO point of view to look at an eCommerce page. There are several other things that I thought of whiling watching the video, that could potentially add value to the page:
1. Free return: It used to be good enough to have free shipping on an eCommerce page, but i think these days customers are so demanding that they probably wouldn't make the purchase unless they know that if the product doesn't meet their expectations they could return it without cost.
2. Upsell and cross sell: things like "You may also like" that usually appear at the bottom of the product page. It could give other products more exposure and potentially help with internal linking as well?
3. Customer review: I'm not entirely sure about this one, as it can work both way. But for great products that are more likely to get positive reviews, having them could potentially increase conversion rate?
4. Social sharing: some websites have SM sharing options on the product pages. Once again I'm not sure how many people would actually share an individual item on social media, but for a brand's feature product, it can be beneficial to do so?
Just some random thoughts!
Very interesting, thanks for this! I have been working in e-commerce since 2004 and I have to disagree about having up-sells and cross-sells listed. People do expect and look for these elements, it makes it easier for them to choose the exact make and type they want of the item and everything they want to buy with it.
Also, I was hoping you would touch on the best way, from an SEO perspective, to structure the product title and title tag!
Great video Rand. Looking forward to seeing you at #ISUM16 in Raleigh. I was surprised you didn't mention reviews. Was that an oversight or is there a reason? Thanks! - Eric (on Neil's account)
Just an oversight! I agree that, as pointed out in many of the references here, customer reviews (or press/blogger/influencer reviews) can be powerful motviators, too.
Think you can get away with this one Rand. Reviews would be included under the social proof umbrella!
Hi Rand,
Your post comes at a perfect time, where we are redesigning the product page of a high end furniture brand. Our bone of contention is how much is 'too much' information, whether all concerns should be addressed at the product page of elsewhere on the site. Your WBT does give me does give me a structure to work with!
Regarding your questions:
1. I like this product page - https://www.dailyobjects.com/dailyobjects-water-col... (Indian website). The reason is the concise way they have addressed various customer concerns/questions in the 2nd section - complete protection, lifetime warranty and others.
2. Not in e-commerce, but for a fitness brand - there was a prominent email and contact us info but the form available was newsletter sign-up. We changed the newsletter to 'Start Training' continuing with all the other contact info on the page. Interestingly the inquiries to start training increased. We realized that even with all the contact info available on the page, people were just searching for a form to submit as an inquiry. Assuming a similar thought would be applicable to e commerce - once you prominently show the one thing that is on people's mind BOOM you'll see conversion! The difficult part is always finding the 'convincing factor'.
Great post & vid Rand.
Re: your first Q,
I quite like this page:https://www.beardbrand.com/collections/utility-balm/products/spiced-citrus-utility-beard-balm
I like the way that one-time or auto restock options are easy to toggle (and the default is one-time, no nasty tricks!), also the info on ‘blend attributes’ is quite neat.
Funny product video - not too dry, but still sets your mind at ease (talks about natural ingredients, explains to get in touch if you're not happy, for a full refund and help choosing a different product... that's class).
Plenty of product shots too, including being able to clearly read both the ingredients & usage info, removes any doubts about product page accuracy (I've encountered issues with that in the past with other, unrelated, products, so being able to see the physical label on the product is good, IMO).
Nice link to 'Company', with a brand story visible etc, and a not too obtrusive opt-in for top-tips (email locked... personally I'd test that with not-locked too, to help build the brand trust etc, but hey, it's pretty decent still).
The review stars on the right are good, with the link to jump to reviews and I like the way there's a product shot that stickies on-scroll, so the buy button is always right there.
The page pretty much answers any questions I had before they get from the back of my brain to the front.
The one thing I find a touch annoying, is the full description is below the huge hero image part-way down the page, with no link above the fold to jump down to ‘Full Description’, I think that’s a shame.
No examples to give for the 2nd question at the moment, as have been working mainly in the service industry sector for a while now. From memory I think the biggest e-commerce CR improvements I've seen in the past though, were actually not on the product page, it was streamlining a (at the time VERY) clunky checkout process. Urgh! Checkout forms of DOOOOOM!
Funny thing - I'm actually looking for a new wallet at the moment! The leather on mine is looking a bit sad and the stitching a bit straggly. I like it tho, so have held off buying a new one - Till now! I'll be checking out Bellroy range now I think!
You vid was great Rand, really, really good tips.
Yeah, I particularly appreciate how, on Beardbrand, the add to cart re-appears as you scroll down the longer page for more detail, keeping it front-and-center.
And yeah, definitely check out that Bellroy. It's served me amazingly well the past year. I'm planning to stick with their brand for a long time to come.
I think that all this advice is good for a page that not only selling a product, but selling a service, or really anything. :-)
I work with thousands of healthcare clinics in the US and we have to setup profile pages for each location that generates leads/appointments. Much like what Rand has mentioned, we focus on two things for each of these clinic profile pages. 1) Having great information on the clinic and the services they provide. Details around location, address, phone, website, hours of operation, insurance accepted, names, pictures and credentials of clinicians, etc. 2) Having all that information positioned properly on the page. What should be at the top, what should be called out/highlighted, etc.
If you do all of this right, both of these things take a fair amount of effort and resources, but it is worth it. We took the effort to call the clinic, look at websites, look at social media and create our own custom descriptions to get beyond the NAP information. As mentioned before on WBF your information needs to be 10x over what is everywhere else. I think Zappos shooting the videos is a great example of going the extra mile to have information about your product or service. Second, we used lots of focus groups and AB testing to figure out what was most important to show at the top of the page etc. Much like Rand mentioned, we did not want to copy other sites, but got the data for our site and our visitors and were able to increase organic traffic and conversions because of it. Plus, we continue to think about how to 1) find additional information to add about the clinics that is useful and 2) continue to refine the layout of the pages.
As an aside, the Belroy site is great and I have had a Belroy wallet for years. I was looking for a slim wallet and they have a phenomenal page that sells it and explains the benefits. I spent more than I had planned to start with, but I have a wallet that is really well made, functions well, has lasted for years and still looks good. Chapeau to Belroy!
Hi Rand,
Great WBF - there's a lot of content out there about this, but you have helped make this truly actionable.
Also can't emphasise this enough:
"You're going to need to ask your customers, your potential customers, your customers who bought from you before, and customers who did not buy from you but ended up buying from a competitor, about these elements."
We're in B2B and I visited a customer recently who I knew regularly used the site and had him use it with me watching - we learnt so much we had never dreamed of. Also of note: he had never bothered to click the 'leave feedback button', sometimes you have to talk to people!
Finally, another resource I personally found very helpful - a book called 'Don't make me think' by Steve Krug. Its an easy read and the best resource I have come across for helping with usability testing.
Yes! Don't Make Me Think is still my favorite book on designing for the web. It's the book that helped my early career the most back in 2002 when I was doing design and development for clients.
Thanks Rand, certainly a worthwhile piece and anything eCommerce is a good addition to the Whiteboard Friday collection in my opinion.
My favourite eCommerce landing page has to be over at Firebox.com (https://www.firebox.com/Chocolate-Brussels-Sprouts/p7584 for example). The layout of the page is designed to compliment the quirky nature of the products by enhancing the prominence of the fun product copy. The navigation is clear, as is the single call to action, with a prominent search function and delivery / returns callouts.
Working across a wide range of eCommerce websites the singular biggest improvement in conversion rates have been delivered by increasing site speed. I've seen websites where an extra second on load times reduced conversion rates by 25%. The importance of a fast eCommerce platform cannot be understated.
I think it's also important to remember that once you've delivered a great looking, functional eCommerce product page that converts strongly your work is not completed. Test, iterate, test & iterate. Don't rest on your laurels.
Average eCommerce conversion rates haven't drastically changed in the last 10 years - it's about marginal gains that can actually have a huge impact on your business across a month/quarter/year of trading. Pick something to test, deliver an improvement and move on to the next element. Then start the whole process again. Continual improvement should be your goal, even if it's by 0.001%.
I think this has to go on my list of favorites simply for the line:
"Just like the real thing – minus the terrible taste and pungent farts"
Can't get much more authentic than that :-)
There go my most memorable Christmas stories.
Great WBF and lots of ideas to implement. I would Like to add:
Keyword Research: Add all the terms that people searching for the product would use to search as well as industry terms.
Videos should not be too long on the product page and 2 to 3 minutes is enough.
Another suggestion is to add user reviews like Amazon
Yeah - I think the video shorts that, for example, Bellroy does on their desktop version or Zappos uses, are great for certain types of ecom buyers. And certainly reviews is a powerful tool, too.
Nice one!
Landing page URL for reference: https://bellroy.com/products/slim-sleeve-wallet
I'd like to see tech like Dashlane advance with regs to mobile ecommerce conversions. Right now it's super easy to fill in a check out form with Dashlane from desktop (auto fills in your name, credit card details, address etc.), and they are getting better with mobile integrations too, but it's often still clunky to convert on mobile.
If I had an ecommerce website, I'd be in touch with people like Dashlane to try and better integrate their software into my site and work together on increasing their user base and increasing my sales!
Things like Amazon's 1-Click Ordering button are amazing for us ever increasingly impatient humans.
Bon weekend!
Yeah - the emerging era of 1-click or credit-card-free ordering in the mobile era feels important to pay attention to. I suspect one or a handful of the payment providers out there (Apple Pay, Google Pay, Square, etc) will become a default soon enough and handle a lot of the complexity involved in ordering online today (sort of like how Google Play store or iTunes auto-handles payment with a password).
Thanks Again Rand, one question about SEO and Ecommerce. Don't you think Product Schema can play a role as well?
I agree, upon visiting a website (particularly for the first time) it is imperative to be able to easily understand and reach the various access points, pages and links that are present both for informing and cultivating sales etc. Being overwhelmed with information or not being able to find different pages such as About, is a really big turn-off for a potential client- if I'm getting frustrated with my initial visit, why would I return?
Many small businesses think that more is better, but this is not always the case. Focusing on a well-designed, accessible site that leads clients to explore and hopefully convert is much more difficult, but also much more important.
Related to the checkout screens, I'm curious to know the prevailing thought on checkout pages that remove all the navigation. This is very evident on Shopify sites. Once you "checkout" the navigation is gone. If the thought is that you remove distractions from the user to get the sale, it strikes me as really old thinking.
Now that is what I call proper in-depth. I thought I knew much more than I did about e-commerce. I was wrong lol
Hi Rand,
Excelent post, I am working in a new website (my own small company) and the article has been very useful to me :). I like websites with simple design, just the important information! There are websites with too much information and people get lost because of the huge amount of content. Sometimes less is more. As you said, we are not Amazon, so I believe we have to make efforts to offer a great buying experience.
Keep doing great content like this and, of course, I'll see you again next week for another edition of Whiteboard Friday. Take care :)
Great video Rand and very timely. Looking to launch a ecom side project next year and I want to make sure I've the best simple page I can for my first project.
We've been working hard to improve our landing pages and have made big improvements in the past year. Here's an example of one of our product pages. This is quite an old product.Sometimes we have better images, including some 360's, but when you have thousands of products it gets harder to give each item enough attention. What sort of things should we focus on improving here?
The best CRO for Bellroy is you saying you're a fan and a loyal customer.
Hallo everybody! I ve been using MOZ for a couple of months now and I am really happy that Rand shared some best practises regarding SEO for ecommerce. This is something I ve been watining for as I sell plants online and Im doing SEO stuff on my own. Looks like I ve already implemented most SEO recommendations for the product pages and I would like to encourage for more posts like this one. For example home page or category page might be discussed in the future. My concern is how long should be the category description. If I make it long, then its a good for SEO, but mobile users will see only text on the first screen (not products). In my category page (blueberries category, it is in polish) I was advised by the SEO Agency to unfold the whole category description (in Presta Shop there is an excerpt of the description and to use the whole description you need to click Unfold). So now, desktop and mobile users see the whole text, and I am not quite sure if that is mobile users will be happy about. Maybe I should come back to the default settings? Any recommendations?
Hi there Bartman29, this is a great question, but I'm afraid it probably won't get much of a response or any visibility here in the blog comments. Instead, I'd recommend asking your question in the Q&A forum, where it will be seen by many experts around the world and will have a much better chance at being answered to your satisfaction. :) Hope that helps and best of luck!
My favorite product detail page:
https://www.loandsons.com/the-og
I have a question on using product reviews as a backlinking strategy. Would giving out product for bloggers to review be considered similar to buying links?
I am not Amazon! You did a great job Rand, can I request something? How about you make a video about mobile? Because this is all about desktop right? What if most of the customers today uses their tablets, cellphones/ smartphones?
We are trying to add useful information like Benefits, Side Effects etc for Ayurvedic Products sold on Shimply e.g. https://www.shimply.com/health-and-nutrition/ayurveda-organic-products/buy-diabetes-ayurvedic-treatments/kudos-ime-9-pack-of-3-p37063625. Do take a look - its intentionally kept simple with an Indian audience in mind. Will love your feedback - please check our localized page in Hindi language as well.
Between - I think we all copy Amazon landing pages and do every feature they have done. Reviews is one such feature - despite 2 decades of constant stories on how its the best thing ever, I feel its time to redo reviews. Most of the internet population is using mobile and they are not going to really write reviews on a mobile screen (% is far less) - it has to be a NPS like rating system on products - that's the only thing users will actually click on.
We need to think differently for our mobile users.
Fantastic video, Rand! Would love if you can do more on eCommerce in the future.
My favourite website for e-commerce pages is Pottery Barn, an example of one of their pages is here (its just a shame its not available over here in UK) https://www.potterybarn.com/products/lorraine-coffe...
It has all the content broken down in a very simple way, all the configurable options are easy to use and the headings are descriptive (which the Bellroy doesn't do). I also like the option for customers to upload their own images of the product, which is the ultimate in user endorsement.
Regarding the Bellroy page, from a purely technical SEO perspective, the colour options link to different URLs. Almost all of the content on these URLs is identical except for the colour, which is a bit too Panda-y for my liking, especially as there are no canonical tags. Do you think this is something which would cause an issue?
"I am not Amazon"..., but I wish I was.
Well... To be fair, they did lose a lot of money for more than a decade. Gotta be very patient and have very deep-pocketed investors to make it as Amazon.
This was great info. A few things that i would love to add to this from my experience .
1. Visibility of products. (if you have a 1000 products how do ensure visibility). The answer is to give users filters to give access to content.
2. Clarity on product Information
3. Remove all frictions to enable transaction
Hope that helps someone.
Great post Rand!
We're using massive import of Product Content. Is there a way to API to MOZ page optimization the thousands Product pages we generate every night?
There is not, unfortunately, but long term, we might look into providing an API that could work to help with that (probably a couple years out, though). Perhaps OnPage.org would have a solution for that type of scaled-optimization-via-programmatic-access?
Another gooder of an article! A nice detail I noticed when (when you mentioned they could localize and determine sales tax) is that most of the product images appear to be localized. I’m in Canada, and all the wallets are filled with our currency!
Ohh the details!
Oh snap! That is even more impressive. I'm going to have to point that out if I use them in a future presentation. Thanks for the heads up :-)
Same in the UK although I guess they didn't have any British coins :) Impressive image localisation for sure.
Question. I noticed that Bellroy lists their delivery methods and costs on each of their product pages. Would Google or other searches rank down ecommerce websites due to this duplication of text? What if a website had hundreds of products and not just a few? Thanks.
No - Google's pretty smart about content that appears on many pages and knows how to recognize the unique sections and not stifle rankings simply because a large section is duplicate across a site (like a footer, sidebar, menu, or certain legal terms, shipping details, etc).
Hello Rand,
Changed to new fitbit from Ziiiro ?
Yeah - I'm just too addicted to all the metrics tracking!
Rand, I have a confession to make, and that might the same case with a lot of us. Having experience with web design and SEO I am very picky when I get to choose if I trust that website to buy from it or not. :D
If I don't see a professional eCommerce page I assume that the team behind the product is of the same quality.
I mean, I can forgive them some minor mistakes like not enough product details, or reviews, or not enough pictures, but an amateurishly made website with too much call to action buttons or too much product spam is a No No! And I am sure everybody is feeling the same.
We don't just love the products, we love the box that comes with them. The way they are delivered to us. If we can combine attractive marketing, great UX, and simple utility, we can create an awesome Ecommerce page.
As for a eCommerce page I like I will choose this example. I also love these watches.
I hear you Cornel - in some cases, I feel like amateur-ish design can work. For example, Steve Krug's book website is clearly designed by him: https://www.sensible.com/dmmt.html and somehow, it just works. It has this aura of authenticity that convinces me he's personally behind it and it's not just an agency promoting his book. Some personal craft websites are like that, too. But when it comes to bigger ticket items and to brands from which I expect a certain quality and scale, then I totally agree.
All this information is great, BUT there is too much opportunity for the user to drift out of the conversion path. eComm SEO and keeping a user focused on completing a checkout need to be in ALMOST absolute balance depending on the user.
Yeah - it's a tough balance sometimes. You don't want to push customers to buy too quickly if you know that you can increase order size by offering more options/products, but you also don't want to hurt your checkout completion rates. I think this is an area where you've got to have metrics and tests that look at the full picture (i.e. customer lifetime value based on all order sizes across all sessions over a period) rather than just a single metric like checkout completion rate.
Hi Rand,
In 18 minutes you do a great job of pulling together really helpful tips on the page elements that need to come together to create a great product detail page.
You might be interested to know I am currently writing a book for Econsultancy to deliver the same type of content you did for this WBF. I have created a comprehensive narrative breaking done the core pages of an eCommerce site: home page, main category page, product grid (list) page, and product detail page. I analyse and justify the existence and the placement of every page element, I explain where they should sit on the page (the page element/content hierarchy) and I do this for desktop, tablet and smartphone screens. I also provide real life examples some people can see the recommendations in action.
I am set to complete this book by Christmas 2016 and Econsultancy will release in 2017.
I wrote an article back in 2013 on the product detail page for Econsultancy which has over 50,000 views. The popularity of this content is what prompted Econsultancy to approach me to write them this book. Here is a link to the product detail page article:
https://econsultancy.com/blog/63462-ecommerce-prod...
(the article date says written in "2015" because Econsultancy repurposed this article due to its popularity when I wrote it back in 2013)
If you are interested, I will flick you a copy of the book once its done.
Again...well done and great job. I always look forward to the WBF's!!
Greg
Very true those insights! Especially that part when you say we need to think of how our users think or search our products. There's always this problem when you think they are finding you using some words but actually they are typing some others which sometimes have little to do with your keywords. It's all about the user and how we can give them a solution of what they are looking for.
Thanks Rand for the info! Liked your shirt but not as much as the light pink one :P
Cheers!
David
Looking at the Bellroy site now they seem to of changed their layout. Well its different in the UK than the layout you've drawn Rand.
Regarding the SEO content, the majority of content is hiden in pop out areas, isn't this a no no from Google. Don't they want all content to be visable on the webpage for their bots and users to read? Or am I wrong, I am sure I have read somthing about hiden content and Google not indexing/acknowledging it.
Be good to know your thoughts on the hidden content areas.
Great video Rand, you practically nailed all the points of a great e-commerce website. Nowadays we tend to over optimise and give more information than the client really needs, i feel that as a consumer and also as a marketeer. :)
Thanks for the tips. i am developed a shop online and this post is very interesting to doing the things in the right mode. when you developed a shop the most important to the client is the easy menus, goods explain to the products and a good photos.
Good luck to all the people that developed a shop online a big adventure of course
This is such a great video. We have paid expert e-commerce consultants a lot of money for information that wasn't this clear or actionable.
I second that - and the comments have been really interesting, too.
Thank you for this great post and verry nice video.
But i have a question about similar product pages
When i have 20 difference Slim sleeve wallets, every wallet has a little difference detail and is sold in 10 differences collors.
I have to make 20 product pages
So i have 20 titles that looks the same, but also the little differences in the products is not make things easy to make unique content for every page
How to deal with this
When the products are different enough that they get searched-for in unique ways and have truly unique attributes, I like to keep the pages separate and link between them. But, when the products are very similar and there's only small details (like color or size or the like) that are unique, I like to use the rel=canonical to make sure Google only ranks a single version of the page, but users can still see the unique versions and link directly to them for reference or to share.
Good call on the Amazon clutter - perfect example of "banner blindness" and how it doesn't hurt them.
I am not Amazon...I am not Amazon...