When designing a website for a client, a lot of focus goes on the landing page — it’s the first thing that visitors see when they arrive. But the real goal of any ecommerce website is sales, and there’s no way you’ll achieve that without a stellar product page.
Effective product page design needs to immediately convey the value of the featured product. You should show people exactly what it looks like, tell them exactly what it’ll feel like, and make them believe it’s something they absolutely need to own.
There are so many different features and variations you can choose when building out a product page. I’m going to show you some of my favorites, and walk through what makes them so great in the hopes that you can apply these to your next product page design (or simply enjoy them like you would a piece of fine art).
Hope you enjoy! And don’t blame me if you find yourself wanting to purchase one or more of these products. Such is the curse of the effective product page.
Already have a beautiful product page sitting on the web?
If you’ve already designed a product page you’re proud of, enter it into this year’s Shopify Commerce Awards. There are different categories you can choose to enter, ranging from design to apps and development. Find whichever is right for you, and take a chance to get recognized as an industry leader! 🎉
It’s not a stretch to imagine that most Luxy purchasers are women, as this shop sells human hair extensions. The site immediately welcomes you with a feminine touch, complete with a heart emoji on the tab bar in your browser. Since this product has many different variants, the user is brought along on a journey toward the one best suited for them, getting first to choose the thickness of their hair, followed by the color, and then being brought to the specific product page containing (ideally) exactly what they’ve been looking for.
The clear call to action here is to add this product to my bag, but if I’m still unsure, there’s a “watch video” prompt to the right of the purchase button. Additionally, the page addresses one of the largest abandoned cart indicators: shipping costs. The bar along the top of the page assures me that they offer free shipping worldwide, letting me know that there won’t be any unwelcome surprises when I officially “add to bag” and make a purchasing decision.
2. PooPourri by Tomorrows Designs
I mean, how can you not get behind a product that speaks so candidly about something so taboo? This product perfectly lends itself to playful copy, which can also be a remarkably good way to gain goodwill.
“Become a master of doo disguise with Potty Potion,” their product page reads. “After all… smelling is believing.” (For those who haven’t heard of this product, this is a toilet spray you can use before going #2 that traps odor beneath the water.)
This product page also effectively upsells by showing visitors they will save money if they purchase on a subscription basis, and gives the option to purchase every one, two, or three months. They’re also not afraid to make light of their product, as is evidenced with their “How to use” section.
This natural soap company knows that the types of people looking at their product page are going to want to know they’re buying good, wholesome products. They state that the product is 100 percent natural, and joke that it’s “tested on people, not animals.” The product menu allows you to view a full listing of ingredients within the product.
What particularly draws me to this product page is its bold usage of testimonials. Below this particular fennel and charcoal bar, one review’s headline reads, “If my face had a God, this would be what it would worship.” A review that powerful creates a pretty lasting impression in the mind of someone considering purchasing this product.
The social proof immediately below the product, highlighting that it’s been rated with five stars by multiple other satisfied customers, is a sure way to lessen a buyer’s anxiety around never having touched the product in person themselves.
Not to play favorites…but this one is my favorite. And it’s not just because this artisanal doughnut shop is based right here in Ottawa where Shopify is headquartered, and that I’ve eaten more of their maple bacon doughnuts than I care to admit. When Suzy Q started an online store, they were worried people would miss the personal touch of being able to select the doughnuts they get to put in their box. So they tried to replicate that experience as best they could.
The product page allows you to schedule a time you’d like your order to be ready by, and check to make sure you’re within their delivery area if you’d like to pay for that service. And that product photography — tell me you’re not dying to place an order.
You might also like: Partner Spotlight: Jackpine Talks Designing the Perfect Doughnut Shop.
5. Sixty-Nine by Special—Offer
This one doesn’t take much explaining. It’s immediately obvious why this is an attention-capturing product page. The characters moving before your eyes and appearing to look right out at you brings the website and its featured products to life in a way that is highly novel, and unlike many other ecommerce product collection pages.
Once you click through to a specific product, the animation changes to a static photograph, and is accompanied by a clean product page with lots of white space. There’s a link to their sizing chart so customers can be assured they’ll purchase the right fit, and there’s a prompt for me (as a Canadian) to head over to their Canadian store so I can purchase in CAD.
I’ve remembered this website ever since it took home an Honorable Mention in our 2014-2015 Ecommerce Design Awards, which we’ve since rebranded and expanded into our Commerce Awards.
Built a beautiful product page? Show us what you got and enter this year’s Commerce Awards!Enter to win
6. Leesa by BrandJourney Group
Leesa is a foldable, shippable mattress company that eliminates the need to go to a mattress store. Their branding is crisp and clean, relying heavily on their palette of white, teal, and gray. Many similar mattress companies have popped up in recent years, so Leesa cuts right to the chase by highlighting why you should choose Leesa over anyone else:
They also take this opportunity to share their corporate social responsibility policy of donating one mattress for every 10 sold, to make the potential purchaser feel good about their decision to go with Leesa.
A mattress is a big purchase, and so the more you scroll, the more reasons they give you to make the leap. They give you a look at the innards of the mattress and explain what makes it unique. They show product reviews to give you a sense of how much other people have enjoyed it. They even include a FAQ of the top questions asked about their product, so people never need to leave the product page to have them answered.
Additionally, if you click the “Airlifting” version of their mattress, you find out that this special edition mattress cover was designed by a formerly homeless artist Scott Benner.
“A portion of the proceeds go to Scott to continue his pathway to a better life,” the copy reads, reminding the visitor that they can feel good about spending money at Leesa (whether or not they actually choose the Airlifting version).
7. Manitobah Mukluks by SpicyDesign
Similar to a mattress, purchasing a pair of Manitobah Mukluks has a high(ish) cost per product, meaning that the decision of whether or not to buy is more complicated. If something costs less than $20 and you feel like buying it, you’re considerably likely to buy it. But the more that price point creeps up, the more guilt you may feel when making a purchasing decision. And guilt is never a feeling you want to inspire in your visitors!
This product page seeks to ease the most common purchasing anxieties — “FREE SHIPPING, FREE RETURNS” is written in big, bold letters right next to the “Add to Cart” button to make people feel like their purchase doesn’t have to be a forever decision, and that the price they see will be pretty close to the final amount.
Similar to Leesa, they allow the hesitant purchaser to leisurely learn more about the company and its mission, without ever leaving the product page.
The reader can learn about the company being Indigenous-owned (as well as what that means), and the story behind the art found on the sole of their boots. Personally, I think the end of the page should have a second “Add to Cart” button so people don’t need to scroll all the way back to the top if they’ve been convinced on the way down.
You might also like: The Top UX Elements to Optimize Your Clients’ Product Page Design.
8. Perfect Keto by FOMO Studio
Perhaps I’m biased, having recently tried an eight-month stint of a ketogenic diet, but I particularly like this product page even though it’s relatively plain. It has all the trappings you expect from a high-converting product page, including great product photography, an overview of why you should want to use their product, and the option to “subscribe and save” as a way to upsell by showing people that they will save money per product (even though they’ll pay more overall).
This page also employs a “Related Products” section so that even if people aren’t totally sold on the product they’re looking at, they can find similar ones that might be a better fit. Or, as I’m sure is the hope and dream of Perfect Keto, you can just buy the whole lot.
They also employ a number of great apps, including Yotpo for their customer reviews, and Sales Pop to show people that someone else has just bought a similar product. Might just give people the burst of FOMO they need to make the purchase decision. (Funnily enough, the Shopify Partner who worked with them on the website is called FOMO).
9. Johnny Cupcakes by Growth Spark
As is evidenced by my affinity for Suzy Q, any product that has to do with or likens itself to sweets is in my good books. Johnny Cupcakes is a playful brand, calling itself “the world’s first t-shirt bakery” and highlighting all their recent additions as being “freshly baked.” It’s a fun theme that works for them.
They make good use of lifestyle photography, showing their clothing on real humans so that you can get a sense of how it looks off the digital shelf. And how can you not love their loading animation of a chubby youth chasing an elusive cupcake?
Additionally, when you click the “Buy now” button, the shopping cart pops up on the right-hand side of your screen to remind you that you can check out at any time. It’s a not-so-subtle reminder that you have yet to close the deal, and it clearly identifies the ways that you can pay. This effectively turns the product page into the checkout page, which is a powerful way to speed along the purchasing process.
You might also like: Announcing the Shopify Commerce Awards.
10. Whipping Post by Out of the Sandbox
I confess that part of my reason for including this product page is because I have a big, fat crush on this product. It’s so intensely beautiful. What really stands out here is the product photography. It gives you a sense of time and place, so you can really imagine what it would be like to own this product.
A unique element of this product page includes the option to monogram your initials onto the bag. If you’re going to make a financial commitment to a high-quality bag like this, perhaps you want it to truly feel like yours, with the initials to prove it.
Whipping Post won our first ever Ecommerce Design Awards in 2013 for its gorgeous design by Ottawa-based Out of the Sandbox, and it’s never left my heart since.
Want to be on this list?
If you’ve worked on a gorgeous product page that you think deserves some industry recognition, this is not the time to be humble! Enter your recent creation in this year’s Shopify Commerce Awards to be evaluated by our all-star panel of judges for the opportunity to win an all-expenses paid trip to Shopify Unite 2018 🙌Enter to win
Noticed any beautiful product pages recently? Feel free to share the link in the comments below (or nominate them for a Commerce Award!)