👆

Variant selection

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

💡 Ideas and tips

Design patterns

‣

Kill 🔪 dropdown menus

‣

Use large, uber-tappable variant chips

‣

🦄 Try a sliding drawer instead of dropdown for long lists of variants

‣

Try modals for variant quantity selection / bundle configurators

‣

🦄 Use grid-to-list toggles to display additional detail

‣

🦄 Men-to-Women size-and-color toggle

‣

🦄 Try scoped variant filters (where appropriate)

‣

🦄 Try variant-level color blending

Displaying out-of-stock variants

‣

🦄 Optimize your “strikeout” color for light and dark swatches

‣

Use both gray-out and strike-out for out-of-stock variants

‣

Show “only X left” on low-stock variants

‣

Provide a “Waitlist” stock notifier

‣

Make sure your default “landing” variant has a fallback rule

‣

Provide a live help CTA to find alternative products

‣

🦄 Include estimated restock date

‣

🦄 Use visual search to suggest similar products

‣

🦄 Show a “more like this” drawer

Error feedback

‣

Use “Select [variant]” as default button copy

‣

🦄 Change button copy to “Please select [variant]” on hover or tap

‣

🦄 Open your variant selector from the Cart button

‣

🦄 Try a Cart button nudge

‣

Show an error messages with both the Cart button and the Variant group

‣

If >1 variant needs selection, display them as bullets

‣

Red-box your entire section, instead of individual variants

Combined listings (Shopify)

‣

🦄 Show bundle variants

More ideas - adding context

‣

🦄 Use microcopy to add context to variant options

‣

🦄 Use pop-out mini-descriptions to add context to variant options

‣

🦄 Dynamically convert to international sizes

‣

Add flags to highlight specific variants

‣

Add image thumbnails for options that need context

‣

Consider adding star ratings to variant chips

‣

🦄 Add size chart detail to size selection buttons

‣

Add price upcharge detail on selection buttons (where relevant)

‣

🦄 Provide fit-finding advice, where applicable

‣

🦄 Try a BOGO offer on another variant option

‣

Try “Shop more in this [variant]” links

🫣 Cautions

‣

Don’t apply invisible strikeouts for OOS variants

‣

Hon’t hide variants behind a horizontal slider

‣

Avoid using lifestyle images as color swatches

‣

Don’t style variant selectors like a CTA button

‣

Avoid using a dropdown for large option list without context or organization

‣

Don’t obscure the dropdown marker

‣

Don’t write your error message like a robot

Back to Product page ideas

👉 Follow on LinkedIn for daily ideas 💡