Let’s say you’re an online retailer selling a variety of products, and the only navigation option on your website is “Shop.” With no further breakdowns or filters, shopping your website is overwhelming and frustrating.
A clean design and easy-to-follow navigation is one way to help website visitors find your products without getting frustrated. Another often overlooked step is streamlined and intuitive product categories.
Products grouped by category help customers find what they’re looking for. Your products could be categorized by product type (“candles” or “frames”), by room (“living room” or “kitchen”), by mood (“cozy comforts”), or by color (“blue” or “earth-tones”).
Once you’ve created product categories that make sense for your offerings and audience, how do you make a great category page? To help you brainstorm, we’re sharing creative features we love on product category pages.
Who: Warby Parker, an online, in-store, and try-at-home glasses company is known for their sleek, modern styles and affordable prices.
It’s no surprise that their product category page has a clean look with generous white space, easy to use navigation, and intuitive filtering options.
We love the heart icon below the product thumbnail. If you have an online account, you can select styles by clicking the heart to add to a Favorites collection for viewing later.
Images That Wow
Website imagery grabs visitors’ attention and motivates them to explore your site.
Consistent product imagery enhances overall website design, but also makes it easier for visitors to view and compare your products. Ensure the lighting, style, and feel is similar across categories and matches your overall branding.
Of course, high quality images are only worthwhile if they load quickly. We all know how short attention spans are! Make sure you optimize product images for fast load times.
Most retailers’ product imagery is fairly straightforward, but the following retailers are switching things up to pique interest:
Who: Sperry is a shoe and accessories company known for their “boat shoes”.
Scroll down Sperry’s Women’s shoes category, until you come across a pair of Darth Vader Star Wars-branded shoes. These “floating” shoes are sure to catch your eye!
Sperry uses an animated GIF to achieve this affect, breaking up the sea of static shoes and leaving us wanting more moving images.
Who: LOFT is a women’s apparel and accessories brand under the Ann Taylor umbrella.
Only seeing one image type quickly gets boring and risks the browser skipping over a product they may otherwise love.
LOFT breaks the monotony up by showing models from different angles and in different positions, such as sitting on the floor or on a block, having their arms in the air, or looking back over their shoulder.
Showing how the clothes hang and look in different positions before getting to the product detail page is a welcome change.
Who: Spanx is a women’s undergarment and leisurewear online retailer and wholesaler. Their signature item is a brief-style foundation garment.
Spanx recently launched a new product called “Arm Tights,” a layering piece that lets customers extend their wardrobe from Summer through Winter. Unsure how this would look under a sleeveless dress?
Spanx takes the guesswork out for skeptical customers with product image sliders. Dragging the black divider on the product image right or left transforms the model from bare arms to wearing Arm Tights. Check out the screenshot below, and give the slide a try for yourself here.
Creative Copy + Pricing
Who: M.A.C is a women’s health and beauty company.
M.A.C’s product category page incorporates a lot of the features mentioned above, and we love the addition of descriptive copy.
Short phrases describing each product add context, before the viewer clicks through to the product detail page. M.A.C manages to add copy, without clutter – the website is clean, modern, and utilizes plenty of whitespace.
Who: Le Tote (LT) is an at-home-try-on wardrobe subscription service, where you choose clothing and accessories to fill your tote and rent for a limited time.
On the product category page, Le Tote lists both the LT price and Retail price, so customers see how much they’re saving by getting the item through LT, instead of from the retailer.
Take Out The Guess Work
Rent the Runway Maternity
Who: Rent the Runway is a designer apparel and accessories rental company.
Rent the Runway Maternity removes the guesswork of searching for clothes for pregnant mothers by breaking down products by trimester: 1st trimester, 2nd trimester, 3rd trimester, and 9+ months. Subcategories help women find clothing appropriate for different points of their pregnancy and is especially helpful for first-time mothers.
Who: Studio DIY is a lifestyle blogger who also recently opened a shop for fun apparel and accessories, home décor, and party items.
Are you eager to add items to your cart? Studio DIY’s product category page lets you skip over the product detail page and add items to your cart right from the category page. Just press the big pink “Add to Cart” button under the product.
Who: Nordstrom is a large higher-end department store.
Nordstrom’s site search is easy to find at the top right of the page, indicated by the magnifying glass. As you type a search term, product category choices become available. This functionality is called predictive search.
In this example, we typed “shoes” which yielded “shoes for women”, “shoes for men”, “baby shoes”, “shoes for girls”, and “Featured results for ‘shoes’” with product images.
DID WE PIQUE YOUR INTEREST?
There are many ways to make your product category pages stand out and enhance the user experience.
If you aren’t currently utilizing categories, think about how to group products based on what customers are searching for and what makes sense for your offering. If you already have your products broken down into categories, think about how you can optimize your product category pages to increase conversions.