Help & Resource Center

Grouped or Separate Product Color Pages


New customers invariable ask about how different colored products should be displayed on their website.  Many times retailers assume it is better to lump the different color variations under one product.  However, this is not always the best solution for most retailers; instead, it is better to have separate products and images for each color.  This articles discusses both approaches as well as the pros and cons of each.

Separate Product Color Pages

For most retailers, Modern Retail prefers a separate product and image for each color option in their catalog. This is especially true when a product comes in just 2 or 3 different colors.  Simply show the multiple color variations right next to each other on the shopping list page.

We've found this approach creates a better shopping experience because it eliminates extra clicks by the consumer.  Instead of clicking on little tiny images or swatches of the product underneath the main image, they can see the multiple color variations right there on the page.

Clicking on a product will, of course, take you to the Product Page for that item.  On this Product Page, we recommend showing the other color variants automatically for the consumer.  Clicking on a color variation takes you to the Product Page for that color.

This approach requires you to create separate write-ups and shoot pictures for all the color variations in your catalog.  If your catalog is on the smaller side, this is definitely a positive because your website will appear bigger to shoppers and provide added SEO benefits as more pages will be registered with Google and other search engines. However, you need to be thoughtful about the descriptions you write for each product to talk about the different color or style of the product.  You will also want to come up with a standard of how you name these products on your site.  As you can see in the example above, these two products are named:

  • Cotton-Linen Plaid Teton, Pewter Wash
  • Cotton-Linen Plaid Teton, Cream/Red

Depending on what e-commerce platform is being used for your website, having a different product for every color variation may also be easier to provide a "Shop by Color" filter on the site. 

Finally, having separate products for the color variations on your website may make it easier for pay per click (PPC) initiatives.  For example, in the image above, it would be easy to run an ad only for the "Neon Yellow/Mint" product and not the "Neon Pink/Turquoise" item because, again, they are separate products in the catalog.

Grouped Product Color Page

It's common to see websites where products are grouped by color or style.  Oftentimes they show a little swatch of the item underneath the product that you can click on to see the variations.

Just like the Separate Product Color approach, you should always show the alternate colors on the Product Page.  However, unlike the Separate Product Color, combining products by color typically results in one Product Page.  This means when consumers click on the alternate colors, the same page is displayed and the product image on the page is simply swapped out with the other colored product. While this approach makes it easier on the retailer because only one product description needs to be created, it is not targeted or specific to the color.

This approach may affect both your SEO and PPC efforts depending on what e-commerce platform you're using for your website and how it has been developed. 

"Hanky Panky Problem"

Years ago (like over a decade), we ran into our first client who sold Hanky Panky underwear.  Hanky Panky is a popular women's underwear brand which comes in dozens of colors per style.  This is where Separate Product Color Pages and showing the individual colors on the shopping list page breaks down. Showing 30 colors of the exact same underwear on the shopping page would be too monotonous and would create a horrible shopping experience.  Instead, it is better to group these types of products, showing just the one style of underwear.  Consumers would then click on the style and go to the product page to select their color.


Our recommendation on what's right for you comes down to catalog size and budget.  If you have a smaller product catalog, then you should consider the Separate Product Color Pages approach.  You should also consider this approach if you're just getting started out in e-commerce because having separate pages for all of your colored-products provides some added SEO benefits and will make it easier on whomever is doing your PPC advertising, costing you less money to run these campaigns.