Last week, I dived into the Rustlings exercises. Now is the time to finish them.
This is the 4th post in the Start Rust focus series. Other posts include:
The Rustlings Exercises (Part 2)
5 Ways to Design the First Page of an eCommerce Site for Increased Sales
You know how to design product pages and a checkout funnel for eCommerce sites. But are you actually designing sites that will increase conversions and help boost sales?
Today, I want to move away from the latter half of the customer journey and focus solely on the first part of their visit. In this post, I’ll talk about the five ways to design the first page of an eCommerce site to increase sales.
If you haven’t built your eCommerce site yet, make sure to read our comprehensive guide to planning an eCommerce store with WordPress.
How to Design the First Page of Your eCommerce Site To Boost Sales
With smaller websites that serve a less direct salesy purpose, the formula for increasing conversions is usually quite simple: your goal is to inform, appeal to the visitors’ needs, and gain a lead or client. Because they have fewer layers of navigation to get through, and typically only one call-to-action to consider, it’s easy to design a clear path that takes the visitor from their point of entry to conversion.
But with eCommerce sites, this can get complicated. Inventory can be quite extensive and the target audience varied… which means that getting visitors to conversion isn’t as easy.
Your best bet is to systematically design eCommerce sites so that you tackle each part of the user journey separately.
For instance, you know how to design eCommerce product pages in order to increase conversions. You also know which payment gateways are best for handling eCommerce transactions quickly and securely.
If you think about it, eCommerce sites don’t typically follow the same patterns as traditional business websites. They don’t rely on large hero images and abundant white space to frame their brand messages. Ecommerce sites focus on selling an inventory of products or services, so the design has to rely less on engaging words and more on engaging visuals.
Below, I’ve broken out 5 tips to more effectively design the first page of an eCommerce site and, consequently, increase sales.
1. Show the Value Proposition (Don’t Tell)
Typically, a value proposition is a brief statement that goes atop the hero image on the home page. Usually, a descriptive headline, a sentence or two, and a strong CTA button are all that’s needed to communicate to visitors “This is what we do and what you’re going to get from us”.
This snippet from a QuickSprout infographic shows the elements you’ll usually find in a well-composed value proposition:
When it comes to eCommerce websites, however, less is more. Let’s use this example from IT’s Watch:
The home page header is a rotating banner that includes various shots of its watch line. The internal product pages do the same thing, minus the overlaid text (which is a sign of consistent web design) :
On the home page header, the only text that appears is “Orologi” (watches) and “Cinturini” (bands). Users hover over the one they want and are given a choice for “Women,” “Men,” or season (since they design watches to go with the time of year).
Clearly, there’s no need for IT’s Watch to intrude on the sharp visuals of this product line with an explanation of their watches and wristbands. The images speak for themselves. For eCommerce sites whose value proposition is clear, use this as inspiration in communicating your message to visitors with few or even no words at all.
2. Add Shortcuts to the Header
With many websites, it makes sense that you’d want to design a header and navigation that’s simple and to the point, as WPMU DEV does:
In so doing, visitors get a quick sense for what kind of information they’ll find on the site before scrolling down to learn more from the value proposition and other home page sections.
With eCommerce, I look at that top bar the same way I look at my own browser’s bookmarks bar. There are certain things I aim to do every time I step inside of Chrome. To save myself time in digging them up, I have all my commonly used pages saved on my bookmarks bar, each is well-labeled, and I have them logically organized.
They also serve as a great reminder to check in on my business or other writing work since the visual reminder is constantly there.
The eCommerce header bar needs to accomplish the same thing for visitors. Your goal with this site is to enable them to take swift action, not learn about your company and fill out a contact form for more information. This means that all those actions you want them to take need to be easily accessible in that bar.
Take Nordstrom’s website, for example:
Of course, there’s the well-organized navigation bar front and center. There’s nothing overly simplified here. If someone wants to find women’s handbags, kids’ blankets, makeup, men’s shoes, or clearance items, there’s really no guesswork involved. As the Baymard Institute’s research shows:
“… our large-scale usability testing on Homepage & Category navigation shows that not displaying product categories directly in the main site navigation causes multiple and severe navigational issues for users.”
There are also these additional elements found in Nordstrom’s header:
- Search bar
- Sign-in portal
- Shopping cart
Each of these elements are ever-present on the site, beckoning visitors to take a shortcut and get right down to business. If you’re hoping to increase sales on an eCommerce site, give your visitors a quick way to get to that part of the journey.
3. Give Your Images a Lot of Love
To start, you should only use custom photography and videography on eCommerce websites. Customers don’t have the luxury of seeing your goods in person, so the more visuals, angles, variations, and contexts you can give them, the better.
And, as always, ensure that images are fully optimized before publishing to your site. This should include making each image retina-ready.
Custom photography and compressed image files are only just the start, however. Ecommerce images must also make a huge impact on visitors right away.
To do this, it’s going to take a little experimentation. What works for one website won’t always work for another, so that means being open to playing with factors and elements like color, quantity, variation, text placement, etc. A lot of this comes down to the content within your images, but it does also depend on what kind of store you’re building. Let’s look at a few examples.
Gather is a website that offers a simple organizational solution for users. This means that the “shopping” process revolves more around the customization of one’s own organizational solution rather than perusing a number of products. As such, the website isn’t cluttered with a bunch of products for sale.
It uses full-width images like the one above to show off various models customers could build for themselves using the Gather System.
Then, let’s take the example of Lanbelle, a purveyor of skincare solutions.
Because the brand’s image is synonymous with providing customers with top results, images need to give off a sense of cleanliness, sophistication, and indulgence. As such, each image is perfectly shot and well-framed.
And, of course, we should look at a massive marketplace like Amazon. These days, Amazon is such a hodgepodge of products that customers really can’t have any great expectations for the display of images on the home page or in search results.
That said, Amazon does do a relatively good job of showing off only high-quality visuals. Organizationally, though, it’s a bit of a mess. Because it’s such a well-known and trusted brand, it can get away with this sort of image overload.
For your own purposes, even though Amazon converts visitors into more customers really well, I’d strongly advise not designing eCommerce stores with this sort of haphazard and overwhelming layout of products and ads. Images should convey the message you want your brand to send to customers; not just be a vehicle to increase the potential amount of products bought from the store.
4. Use Color to Convey Urgency and Scarcity
Color is a very powerful tool for web designers. When designing a website, use color psychology to ensure that you’re appealing to your audience while conveying the right style and message to them about your brand.
With eCommerce sites that have a main focus on selling a product, color can be an unwanted distraction. That is, unless you use color to call attention to messages that will greatly benefit your customers.
For example, we have Leesa:
This pop-up offer, in and of itself, is pretty eye-catching. However, take note of the ticking timer in the top part of it in red. With the bright usage of color and the movement of the timer letting customers know that this deal is available for a limited time, Leesa effectively uses these elements to convey urgency.
Amazon is a brand that often uses both urgency and scarcity to compel users to hurry up and make a purchase.
Right now, Amazon’s “Prime Day” is being heavily advertised. It’s a day-and-a-half when Amazon offers a bunch of super-attractive deals to Prime customers only. So, not only are they hoping to increase the number of sales made during that time frame, but they’re likely hoping to get a bunch more Prime customers in the lead-up to it as well.
It’s promotional banners like these that will net them those customers and sales this month:
As you can see, it doesn’t take much for Amazon to pull this off. Just a simple banner with an image of a product in high-demand and a price so severely slashed that customers won’t be able to help themselves from returning to Amazon to shop that day.
5. Motivate with Pop-ups
Shopify reports that eCommerce websites that publish coupon codes tend to generate more sales. Specifically:
- Coupon codes increase the likelihood of a sale by 8%.
- Of all sales that took place on Shopify websites in a year’s time, 17% of them used a coupon code.
(Yes, I realize these are Shopify-specific statistics, but I believe them to be relevant regardless of eCommerce CMS.)
What’s great about this is that it’s really easy to implement coupon codes on websites using pop-ups and sticky bars. My preferred plugin for this? Hustle.
Not only does it help you display beautifully designed coupon codes on your site, but you can collect email addresses in exchange for them (win-win). And you can create as many offers as you want. That way, if someone clicks out of the pop-up because they assume it’s irrelevant, you can nab them with another one stuck to the top or bottom of the website.
Buffy uses this pop-up to give new customers a discount on their first purchase:
It’s brightly colored, straight to the point, and even has a fun little mascot attached to it.
Polaroid Originals is another one that uses the pop-up to grab attention, but it’s an interesting approach:
The website itself is absolutely stunning with a monochrome background transitioning into a much more colorful one. But then you have this pop-up offer that’s all black. It definitely stands in stark contrast from the rest of the website and is sure to get a lot of attention for doing so.
And here’s an example of a sticky bar from the ThemeForest website:
Aside from logos for templates and themes sold on the site, ThemeForest generally has a pretty muted design. But with this small touch of color in the sticky bar, customers will instantly be drawn to the special offer.
Want To Boost Your Sales Conversions? Then Do This…
The bottom line is this: To boost your conversions online, your site needs to make a strong impression right from the very start. And it needs to be unwavering. This means presenting customers with a secure place to shop from, a fast website to peruse inventory on, and giving them the right amount and kind of information they need.
Obviously, this list isn’t the end-all, be-all of design tips for eCommerce. But with the product page design guide, payment gateway suggestions, and now these tips on how to design the first page of an eCommerce site, you have a more comprehensive end-to-end overview of how to increase sales throughout the entire user journey.
13 eCommerce Product Page Design Must-Haves for Higher Conversions
With global eCommerce sales expected to grow to US$4.8 trillion by 2021, shouldn’t you be taking a serious look at how to design eCommerce websites for more conversions?
While some basic conversion tips for WordPress sites do apply here, an eCommerce site typically doesn’t play by the same rules when it comes to format and layout.
Specifically, I’d like to do a deep dive today into what makes for a high-converting eCommerce product page. After all, this page is the final step before conversion, so it’s the very last chance you have to seal the deal and convert visitors into paying customers.
If you haven’t built your eCommerce site yet, make sure to read our comprehensive guide to planning an eCommerce store with WordPress.
eCommerce Product Page Design
There’s no guarantee that your visitors will buy anything once they get to your product pages. But it’s your job when building an eCommerce site to not give them any extra reasons to abandon it.
In all honesty, I think the safest way to design an eCommerce product page is to start with a design and layout similar to an online retailer everyone already knows and trusts.
I don’t particularly like the look of Amazon’s website. I think the type is too small, there’s way too much going on, and the quality of the descriptions and photos from the seller isn’t always great. That said, Amazon’s product page design works well as it’s logically laid out and is consistently applied throughout the website. So, as we look at how to build eCommerce product pages for your WordPress site, I’d like to use this as a sort of wireframe for best product page design practices in terms of conversion.
As I describe each of the essential elements needed to design a high-converting eCommerce product page, I’m going to highlight an example of a website that demonstrates each point well. If you follow along from top to bottom, you’ll find that each of the elements (except for maybe the white space one) is part of the successful Amazon formula, but each site has found a cool way to put a unique spin on it.
1. Address Bar
You might not give much thought to the address bar of your product pages, but there is something to be said about following a strict formula here. Here is what you’ll need:
- HTTPS. If this is an eCommerce site, this is non-negotiable. It’s also the very first trust mark visitors should encounter on your site in general.
- A simple structure. Since products always exist deeper within the path structure, focus on keeping these clearly labeled and easy to follow. Adding product SKUs and other reference tags in the URL will only distract visitors.
- An optimized slug. When thinking about SEO for eCommerce product pages, the focus keyword for your product page should serve as the slug. In other words, if your product is called “Bean Box”, then use bean-box as the slug for SEO purposes.
2. White Space
The best eCommerce product pages don’t necessarily cram a whole lot of content in. Apple is already a brand synonymous with minimalism, so it’s no surprise that their web design would use ample white space to frame their products. Here are some other space minimizing tips you can take away from this example, as well as other eCommerce sites that use white space well:
- Keep product pages light on text and use ample spacing between the various elements (described below) to help customers focus on the key details one at a time.
- Use a solid background color (preferably white) behind the product photos and descriptions. It helps keep the focus on the product.
- Don’t place a sidebar on your product pages if it can be helped.
- When displaying more than three or four images or videos of your product, use a fast and feature-packed gallery plugin to reduce the amount of space used.
3. Navigation
One of the tough things about using an eCommerce website as a consumer is the navigation. Sure, if there’s a search bar, you can always type in the exact product you want (if you know what it’s called); otherwise, it takes a lot of clicking back to retrace your steps from the original search query.
As a designer, you can use a breadcrumbs navigation at the top of your product page to simplify the work your visitors need to do. After all, they’re already interested in this product or type of product, right? Since breadcrumbs display all the categories and sub-categories that led to the product, it’s the ideal solution for getting them back to an earlier step so they don’t have to begin their search all over again.
4. Product Images and Video
I’d say that nine times out of ten (or maybe even more than that), you’re going to find product images located on the left side of the page. It makes sense when you think about it. If you’re developing websites with languages written left-to-right, your customers’ eyes will automatically go to the top-left corner of your pages–where the product photos are.
This is why you can’t skimp on the production of photos or videos for your eCommerce site. This is the first impression visitors will have of the product and it could realistically make-or-break their decision to buy.
So, what can you do to ensure you’ve used product imagery correctly?
- First, install an optimization plugin like Smush Pro. You’re going to upload very large media files to your site and you don’t want to compromise loading speed or picture quality in the process.
- Never include images or videos that are blurry or low-resolution.
- If an image doesn’t frame your product in the best light or isn’t an accurate depiction of it (i.e. it’s too flattering), don’t include it.
- Since customers can’t try the products beforehand, upload various images that show it off from different angles or as it’s being used by a model.
- Don’t use promotional product videos here; instead, use videos that actually show the product in action.
- Also, if your product comes in different colors or sizes, those need to be represented here as well. The best way to handle this is to have those change when the variation is changed (see information on that below).
- If you’ve been able to collect user-generated content, include them here (with permission from the users, of course).
- For products that would benefit from 360 explorations, think about using a virtual reality plugin.
5. Product Name
As far as the product name is concerned, the clearer you are in terms of what the product is, the better. This doesn’t mean writing out a three-line product name like the ones you sometimes see on Amazon that describes the product in over-the-top detail: “Product X in Raspberry Flaming Red, Waterproof, Durable, Lightweight, Sizes Small through Large, Made in USA, etc. etc. etc.” Just write a sensible unique product name.
Also, in terms of wording your product name, you should follow the same SEO naming conventions you’d use for any other page on a WordPress site. This means including the focus keyword in the name and limiting it to 55 characters or less (for search purposes).
6. Price
The price of the product should be the very next thing your visitors see after the product name. Even if you get them fully invested in the value of the product with a well-written description and awesome product pages, too high of a price could be a dealbreaker. So, put it front and center.
Also, if you’re offering a special discount, put it right next to the original price–and don’t be afraid to use a bright and eye-catching color to draw attention to the cost savings.
7. Ratings and Reviews
Although the actual customer reviews or client testimonials shouldn’t sit anywhere near the top of your product page, the star rating and review count should. Social proof is an incredibly important part of the eCommerce landscape since customers can’t easily test out products beforehand, so these need to be in here somewhere–the higher on the page, the better.
Of course, a star rating might not always make sense for the type of product you offer. If it’s something like a business service, testimonials will make more sense. And if it’s something like a hotel or restaurant reservation, then you might want to opt for something like this where visitors are told how many other like-minded consumers are considering the purchase:
Keep in mind that there’s a possibility that your products won’t receive positive reviews to start, and that’s okay. That’s why the actual write-ups are provided down below the product description. Visitors can scroll down and read the complaints for themselves to decide whether or not they’re valid, and to see whether or not the company behind them listens and responds to those complaints.
8. Product Description
As I mentioned before, it’s best to keep your product pages light on text, especially above the fold. I’d recommend using very short, value-driven messaging within the description. Of course, you should briefly explain what the product is, but it’s important to take a moment here to actually sell the product. This means highlighting the benefits and giving customers a reason to look at the rest of the page.
9. Variations
Not every product in your online store will offer variations that customers can choose from. However, if they do exist, make it super easy for them to select from the options available and also let them know upfront which options are not available. Nothing annoys a customer more than finding the product they want, selecting the size, and then clicking the CTA only to find that the product no longer exists in that variation.
So, when you’re designing this element, first and foremost, make it easy to use. Dropdowns are great if you have more than five options to display. Then, of course, use a clear indicator that tells customers which variations are available. Greying out text would work just as well as removing variations completely for products that aren’t available.
And, since I’m on the subject, this is a great way to stir up a sense of urgency with visitors. Let’s say that a popular item is about to go out of stock soon in a certain size. Rather than wait until it does to grey out the variation, slap a bright red warning next to it that lets visitors know you have low inventory available and/or that it’ll be replenished soon. This may motivate more customers to take action sooner.
10. CTA
The CTA button obviously plays a big part in the eCommerce conversion process, which is why you can’t really experiment with where to put your call-to-action. When it comes to a product page, that button needs to be front and center. It also needs to be well-designed, boldly colored, and tell customers exactly what’s going to happen when they click it.
- “Add to Cart” will place the item in their shopping cart so they can continue browsing the store.
- “Buy Now” will initiate the purchasing process.
- “Add to Wishlist” will dump the product into a list and save it for later.
If your product page is long and you want to ensure that the idea of making a purchase stays top-of-mind, you can use the following trick (i.e. a sticky top bar) to keep the button always present:
One other thing to do in this section is to place pertinent purchase details near the CTA. For instance:
- The estimated shipping date.
- A short statement about your returns and refunds policy.
- Any associated fees or taxes with the purchase.
- A warranty statement.
11. Social Media
Ideally, you would have social media icons displayed on every page of your WordPress site. If they’re not already there, be sure to place them on your eCommerce product pages–with a particular focus on platforms that are image-friendly. This means Pinterest, Instagram, Facebook, and maybe even Twitter. This will give your customers an easy way to share their favorite products with others.
12. Product Features
If the product description is where you briefly discuss the value of your product, then the product features are where you can get into more technical details. Sizing specifications, care and maintenance instructions, assembly requirements, pieces included, and so on should be placed within this below-the-fold section. If you have a lot of ground to cover, use tabs to consolidate the information into a single space and keep your customers from having to scroll too far.
13. Related Products
Using data about your products, about common purchasing trends, and about your customers’ personal shopping habits on your site, you can create a helpful ‘Related Products’ section. It’s a great opportunity to not only upsell or cross-sell on the product they’re already interested in, but it’s also a good way to give them alternative recommendations in case this particular one didn’t work out.
Once you’re done designing your eCommerce product pages with the above elements, don’t forget to use WordPress plugins to optimize their performance. Even if your pages look great and you nail the perfect layout, if pages take too long to load or visitors see a security warning, it could cost you. So, if you don’t have these installed on your site already, be sure to have a performance optimization plugin like Hummingbird and a security plugin like Defender in place.
eCommerce Product Page Optimization – Final Tips
In addition to product page design considerations like improving the layout and making sure that your content fully explains the benefits and features of your product (and builds trust with your company), look for ways to implement psychological triggers to direct consumers’ attention to the add to cart button.
Once you’ve established your eCommerce product page design using the methods discussed above, make sure to A/B test your pages and see if perhaps there are other elements or layouts your visitors would be more receptive to. The Amazon model is a smart choice to start with. It keeps the details of your products in a logical order, keeps pages to a manageable length, and ensures a consistent structure across your site.