The Project: Find a way to compare multiple products within a category page.
The Solution: I started with adding a checkbox to each product labeled “COMPARE”. Once this is checked, the compare tool is activated, and reveals itself from beneath the filter bar. In this example, you have the option of comparing up to 3 products at a time. I have created other versions of comparing 2 and 4 products, but am focusing on the current 3 product view.
As you check the products to compare, they will appear within the compare tool. When the users has selected 3 products to compare, the compare CTA becomes active. After the user clicks on the compare CTA, a dropdown appears from the compare toolbar with each of the products and their specs. These are arranged horizontally to make it simple for the user to compare each product.
From here, the user has the option to close the compare tool, or visit the individual product page for the product of their choice.