Week 1 Day 5: Color Variant Thumbnail Buttons

Welcome to Week 1, Day 5 of my Weekly UI challenge! As I stated in the announcement post, week 1 will focus on an ecommerce listing UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day five, our goal is to…

Color Variant Thumbnail Buttons

They say that "the world is not black and white", which is definitely true; so why should our ecommerce products be restricted to just one color? Today we're going to add a small list of variants of the original product; such a component can be seen on such online shops as J.Crew (hover over a product) and Madewell. This is yet another element that is not only nice to have for your users, but also can be crucial in showing all product options and availability to increase conversions.

Following the original design I created, this is what I've got for Day 5:

I positioned this list of variants below the product name and price– but above the cart button– because it's more of a secondary feature to those text elements and should come before the actionable UI item that would presumably take a user off the page (the cart button).

To highlight the currently selected variant, I place a border around the thumbnail image and fade out the unselected options. Lastly, once an item is in the cart, the variant is locked in, with an appropriate cursor around the variant selector to indicate as such.

Here's a GIF of the variant selector in action:

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 1 Calendar

1. Design component ✅
2. Display product name, price, and image ✅
3. Add to cart button, favorite button ✅
4. Sale price display, sold out states ✅
5. Color variant thumbnail buttons 🎯
6. 100% a11y score
7. Tweaks, refactors, fixes