😬 Hiding the variants behind dropdowns means most will not see their other options. This can also hurt inventory turnover for the hidden SKUs!

👀 How many visitors will intuit that there’s more washes available?

👎 On mobile, a full-width dropdown can easily compete with Cart buttons — especially a pancake stack like this one…

🏀 Nike dunks on dropdowns with large, tappable targets (but the horizontal scroller for Colorway will throw some users off)

🗄️ Nordstrom keeps a core set of clickable swatches with a View More link that opens a panel drawer. The downside is many users will miss or ignore the View All. You can experiment with different ways to style “View all” link

😋 Woops Macarons opens a modal to show available flavors for choose-your-own-flavor boxes. This enables users to choose multiples of any flavor, and see flavors in context

💄 Sephora shows compact Grid view by default, but enables List view to make it easy to scan and locate specific shade names without clicking multiple color swatches. This also leaves room for short descriptions and low inventory flags

👟 Vessi’s toggles convert Men’s and Women’s Sizes and Colors instantly

💋 Kylie Cosmetics lets users scope by color family. This is incredibly helpful when you display a large number of variants or where common attributes warrant grouping — flavors, scents, finishes, etc

👙 Andie Swimwear applies this tactic to its fabrics

🍌 Blendjet tabs New, Solids, Patterns, Metallics, Special Editions, Sale and Show All

👙 Stripe & Stare tabs Color, Contrast, Print and Sale

🩱 Skims updates its theme accent colors as you select color variants. This type of animation can slow down site performance so make sure to A/B test it if you try

🍳 Caraway takes a similar approach as you explore its color variants in an infographic block on PDPs

🦍 YETI does it too…

🍭 Another color pop from Olipop

🦌 Abercrombie applies darker strikeout over lighter swatches — spot it on the 2nd and 3rd swatches above

👕 J.Crew applies dark shading over variants that are out of stock to ensure the white strikeout effect is visible even on light color swatches

💡Anthropologie makes tap targets large, clickable and clearly fades AND strikes out out of stock variant chips, making it very easy to understand what’s currently selected, what’s available and what’s out of stock

💡ASOS applies both a gray-out and strike-out effect over it’s lifestyle image “swatches,” as strikeout alone may not be visible over all photos

😬 Contrast the above examples with this merchant — when most variants are out of stock, it’s hard to see what’s available!

😬 Strikeouts can completely blend with swatches if you’re not careful!

🥿 M.Gemi displays “only X left” when you hover or click over each variant

👕 Land’s End provides instant feedback for variants that are low stock when selected

👗 Lulus uses a bold badge when you select a low-stock variant

👗 Lulus provides an estimated arrival for restocks when presenting the stock notifier modal

👗 Princess Polly adds an email icon for a visual cue to “email me when back in stock,” along with an open notifier input field

👗 Fashion Nova includes a bell icon on out-of-stock variant chips to hint clicking will open a stock notifier feature

💡 If your default variant is out of stock, make sure the next-in-line variant is pre-selected when users land on the PDP

👗 Aritzia suggests calling the Concierge number to find something similar. While I doubt too many online shoppers take up the telephone option, a live chat CTA may help save some sales

👗 Lulus lets you know when they anticipate an item’s restock date, helping to set clearer expectations

🧘🏾 Alo includes a “See similar items” link with its stock notifier widget that jumps to the Similar Items carousel

👑 Princess Polly embeds visually similar products inside its notifier widget Vendor: Nosto

(Only products with the selected color/size variant in stock will display in the widget)

👢 Boots proactively slides a “more like this” drawer when you land on an out-of-stock PDP.

🐊 Crocs disables its Cart button until variant selections are made, with “Please select a size” copy

🥿 Toms is a bit more formally polite, and adds “Please” ;-)

👖 Nudie Jeans has a nice multi-step selection experience for waist/length size combos - the challenge is variant chips are hidden and it’s hard to see stock availability without a click

🥿 M. Gemi changes button copy if you attempt to add to cart without selecting variants. The context changes depending on what option is missing (color, size, etc)

👗 American Eagle Outfitters auto-expands its Size dropdown to make it super obvious what the buyer needs to do

👖 Desigual’s pattern looks even smoother, keeping the selector above the cart button

👗 Ashley Stewart shows exposes a size selector if you try to add to cart without choosing your size

🩳 Chubbies uses Select Size as its button text wiggles its button if you neglect to select one before clicking

👍 Anthropologie serves a callout near the Basket button and red-lines the section where action is required. Remember, mobile users may not see the variant section until they scroll back up, and may lose context of the Cart button as they do

😶 Make sure your error message is not out of context with the Size section

😶 Error messages placed with the Cart button may drift out of eyesight as the user scrolls up to find the Size section

👎 Land’s End doesn’t display an error message close to the Cart button, users may fail to see it

🩳 LL Bean bullets out the variants that need selecting if you tap its disabled Add to Bag button, and shows red-line error messages with each missing Option. The bullets make it easier to see that 2 variants are missing than if explained in a single block of text

👗 Fashion Nova boxes the entire block of variants

🩳 Land’s End red-boxes each individual variant chip (above), including out-of-stock variants (below)

🩳 Note the difference in error feedback as well — it appears Land’s End has redesigned and dropped its red button callout for a simpler red text above the button (perhaps to accommodate its PayPal Buy Now option)

🍯 Honeylove uses Shopify’s Combined Listings app to surface individual and bundled SKUs together in a single PDP Buy Box (URLs change as you flip through the variants)

✈️ Solgaard adds context to it’s luggage size variant list by noting how many outfits for X number of trip days it fits and an illustration of each carry-on height

😴 Nectar Sleep adds “best for” badges to each variant option in its bundle builder — super smart given that clicking out of the bundle flow to compare products is a tedious conversion killer

🛋️ Rove Concepts shows mini-descriptions for each color variant because their associated fabrics have different properties to describe and romance

🍵 David’s tea translates weight variants into how many cups of tea you can expect from it. (Each variant shows its own details as you tap through)

🎒 Tortuga adds useful context for travellers to understand the difference between Liter sizes

💡Consider adding both Letter and Numeric values on Size variant chips

😀 Bonobos exposes a quick description to help users understand their Fit logic. The scroll wheel is a bit disruptive, but a cool idea to test. Watch your page load speed and cart to detail rates when A/B testing this

💡Ruggable uses tooltips to explain the differences between its rug piles and pads AND adds illustrations to the selection chips. Double win. See examples below

🍏 Cider supports international size conversion that swaps out the variant options on user selection. This is an advanced move that requires custom development and data mapping

🥿 Adieu lets you flip through shoe size variants for US, UK, EU and cm measurement

😃 Hooray for the metric system! Amika helps international visitors translate ounces into milliliters

🔫 Bulletproof Coffee adds “New” and “Best Seller” flags to specific variants. Use these to highlight Staff Picks, Limited Edition, Most Wished For or “Best For” callouts

🛠️ Build.com illustrates its Style options for additional clarity

💋 Kylie Cosmetics includes variant-level star reviews in variant chips. While this is technically a pre-set product bundle, this design pattern could be tested for individual variant selection on a PDP or within a bundle configurator to help customers make quicker decisions

This inspired me to mock up what inline ratings could look like on Kylie’s site:

🩱 Shapermint fits size info below each variant as you click through. Beautiful!

👕 Bombas includes chest measurements on Size variant chips for quick reference

💡 IKEA includes pricing upcharges and downcharges per variant, where applicable

👟 Foot Locker shows a “Tip” for selecting your size for styles that may fit larger or snugger than the norm

👗 Loelife embeds an expandable widget with a fit graph for each size variant (based on review feedback)

🍯 Honeylove prompts you to add another color to get 20% off your second-of-the-same. Your size variant is already selected for convenience ;)

👗 Azazie lets you filter the entire product catalog to a specific attribute (in this case, Color) with a single click

🤨 Can you tell which Size variants are out of stock?

👻 Be careful with strikeouts, they can blend in with color swatches. Adding a black, buffered border around the color swatch gives room for a black strikeout to be visible, regardless of the swatch color behind it

💣 Target misses the mark with this design pattern, there are a number of sizes hidden behind this unconventional design pattern

😐 Lululemon also hides additional colors and sizes behind a horizontal scroller

🤷‍♀️ Does this one need explaining?

😞 The variant picker competes with bold CTA buttons. It’s so subtle, it’s easy to miss the accordion marker indicating additional options

🙈 Olaplex hides larger, value size options behind a dropdown. This communicates Information (confirming bottle size), not Options

😵 Meijer’s messy menu uses ALLCAPS, fails to alphabetize options and lacks context on the differences between colors, forcing users to make a selection, exit the dropdown, check the image gallery, and re-use the dropdown to preview pattern/colors

🤨 The “Type” Option dropdown looks nothing like a variant selector and is outshined by the “100% natural and organic ingredients” chip

🧨 IKEA’s “Choose size” appears to have only one option. Its unconventional dropdown marker is placed so far to the right, it’s highly unintuitive to recognize as a menu control

🍳 Hidden behind the size variant drawer are 3 options with different prices. Given that circumference is an important attribute to frying pans (the product in question), it’s a huge miss

💣 This overly-technical error message is overkill. Choose one of the “good idea” patterns instead!