How to use a buyer’s color preferences for a better e-commerce experience buying apparel

“You look good in this dress — that color works well for you.”

How often does a clothing color influence your decision to restock your closet? Colors reflect our personality; they affect how we feel ourselves and send signals to others.  Some colors may safeguard our comfort zone, while we choose others to make an impression.  That emotions and clothing colors are intertwined is a theory widely used in lyrics: “The Lady in Red,” “Little Black Dress,” “The Girl in the Khaki Dress” and “Blonde Girl, Blue Dress.”  No wonder consumers consider color to be one of the main factors when shopping for clothes. What can e-commerce sites do better to sell based on color preferences?


I decided to take a shopping tour of online stores and boutiques and test the usability of each from a buyer’s point of view.  Here are some useful findings:


1. Show color swathes right on category pages

Every time you see something like “6 colors available” for a style you like on the category page, you are forced to click through to the product page and check the availability of your desired color. It’s inconvenient. Instead, place color swatches next to the product image on the category page and allow shoppers to switch colors without having to go to the product page.  Imagine shoppers perusing in the store, taking hangers from racks because they like a fabric and color. By doing this, you allow for spontaneous reactions and simplify the search of specific colored apparel.


Color swatches on category pages


Of course, if you offer dozens of color choices for each style, like bridesmaid dress manufacturers often do, then you should pay more attention to color filters.


2. Allow color filtering

Shoppers who know exactly what they want prefer to narrow down their choices. Here is your strength over a traditional store. Help your visitors easily find trendy red jeans or a sexy red dress. When they have made up their mind, concentrate their attention to the piece they need, and show all available styles in their color of choice.  For instance, bridesmaids know exactly what color they need.  However, I was surprised by how rarely I was able to see all styles in one specific wedding color.  Watters is good in that:


Color filtering results



3. Display apparel in the selected color

This seems like the same tip from above, but some e-commerce websites filter items with the selected color option but show them in base colors. It’s really confusing.
Confusing color filters' result


4. Communicate colors visually

If you use only words to describe colors, you may lose sales. Words sacrifice user experience and lead to a greater product return rate. In modern designs, product pages usually have visual color swatches. I wonder why color filters still rely on words instead.

Usability is compromised for design consistency in some cases.    Oki-ni has all filters designed with square bullets.




Harrods’s  is not afraid to combine its black and white minimalistic appearance with visualized color choices. Their color filter is useful and looks elegant.


Color filters swatches


Visualize colors, but I don’t mean do away with words completely! Search engines still rely on words.


5. Extend your color palette

If you filter only by basic colors, how will users find aqua, plum or teal dresses, especially if there are many styles? There are dozens of color shades, and it is a challenge for you and your creative team to make searches user-friendly. I want to share with you two elegant solutions for the problem.
The first one is used by Weddington Way. On the main category page, you can select simple rainbow colors as a first step.

Color filter first level


After you click on your color choice, you are forwarded to a new filter with more specific options. And voilà, mint dresses:


Color filter extended


Another way to serve multiple color choices is used by  Discount Dress Shop. They show a dress — not just a color swatch — as a sample. It is very “touchable” experience. The benefit is, you can include patterns and popular color combinations in this kind of filter.


Extended color filters
Extended color filters



6. Multiply color choices

For multiple color choices make the multiplication of colors clear for the user.  The selected color should be marked brightly, otherwise there will be confusion.


Multiple color choices



7. Show color swathes on a product page

Show color swathes on a product page and brightly highlight the selected one. Larger color swatches work well for presenting texture and color together, and they are more convenient to click on.

Color swathces on a product page


Even if you sell an item in only one color, still show this color to let the shopper know this is the only color available. It will make a buying decision straightforward.


Single color swatch


I like the Macy’s way to compare colors. Product images are switched when your mouse hovers over a color swatch. It is very convenient — no need to click, no need to wait.


Color switch on roll over


8. Switch color for all product views

In many cases, brands only show color variations for one image. But I like the elegant way used by Nau to switch colors on all previews, when you select a color swatch. They often use one product image, colored with computer-aided tools, and in this case colors switch seamlessly, without any flickering. However, it only makes sense when accessories like boots or stockings may remain the same.


9. Include color-based recommendations on the product page

While e-commerce recommendation engines are still far from perfection – even Amazon suggestions seem unhelpful for many buyers, it isn’t only fashion websites – you can still refine the user experience. Many of us prefer specific colors. My closet, for example, is full of purple and green apparel. Why not use this habit and include an alternative dress, shorts or a skirt in the same color into your recommendations for a “blue dress”?

For the wedding website Dessy color is  the backbone of sales, so they are great in color-based recommendations.


Color based recommendations



10. Be discovered on color-related search queries

It is hard to compete with big brands on popular search queries, and color-related keywords are among them. Consider using Shopstyle and Polyvore to showcase your collection. These sites are optimized to be found on “colorized” search queries. also appears at the top of search results and is your next target. Social media marketing on these websites is part of a search engine strategy, which we will discuss in one of our next posts.



Color is an important ingredient in recreating the “feel-and-touch” experience in the online store. Large high-resolution images reflect texture and are suitable for zoom. Having them for all color variations are a must for today’s modern online shop.  You can either make product shots for each color or use computer-aided tools to recolor images. With the second option, you can build a very smooth color-switching experience. Changing the color will look like cloth is painted, with exactly the same view and no flickering. Finally, consider adding color filters. Navigation and searches are things that will make your online catalog more convenient for comparing than a physical store.