How to list product options such as color, size, material, etc on product pages and how to deal with out of stock product variants.

1. LISTING
PRODUCT OPTIONS
E C O M M E R C E
How to list product options on product pages
e C o m m e r c e U X D e s i g n a M i n e W h a t i n i t i a t i v e

2. 1e c o m m e r c e u x d e s i g n . c o m
Allow shoppers to
select quantity
Shoppers might want to get more than one
unit of the same product and it can be quite
frustrating if they have to repeat the entire
process multiple times. If you expect your
shoppers to buy more than one item, then
provide a text field to specify quantity. This
might help in increasing your average order
value and reduce cart abandonment. Keep
the default option as 1 so you can cut down
on one extra click/step for users who want to
buy just one unit.
1

3. 2e c o m m e r c e u x d e s i g n . c o m
Add color swatches
If your product comes in multiple color variants, use color swatches or a drop down list to display
each. If you have a default color option, make sure your product images reflect the selected color.
Disable variants that are out of stock.
2
Swatches are useful if you want to allow your shoppers to quickly determine if the
product is available in the color they like

4. 3e c o m m e r c e u x d e s i g n . c o m
If you are worried about the lack of page consistency that might come up as a result of
having color swatches of different sizes, then a drop down list is a good option to have.
Read on to find out how a Shopify based luxury retailer increased
their landing page conversion by 200%.
L E A R N M O R E

5. 4e c o m m e r c e u x d e s i g n . c o m
Include a size Guide
If your product comes in a variety of sizes,
then give a link to size guide right above
the size option. It is a good way to guide
shoppers who are not sure of the size they
need to choose. Provide detailed instructions
and measuring tips with the size guide and
show sizes for many international countries.
Open up the size guide in a new tab or in a
new browser rather than in the same product
page.
3

6. 5e c o m m e r c e u x d e s i g n . c o m
Design for product
variants
Some products on your store might require
shoppers to choose more than one product
option such as color, size, etc. Disable
combinations that are not available. For
some of these options you can pre-fill default
values with the most popular variant. But,
for certain options such as size, don’t use
defaults as your shoppers might end up
purchasing the wrong size. Leave it blank
and prompt the user to enter the correct size.
4
Time saved on category management everyday 2Hrs. See how
MineWhat brought an entire team onto one page.
L E A R N M O R E

7. 6e c o m m e r c e u x d e s i g n . c o m
Dealing with out of
stock product variants
If you have a product with multiple variants
and any of them are out of stock, then ask for
your shopper’s email address and let them
know once you have the product again. You
could also use this opportunity to make them
subscribe for your newsletters.
5

8. P O W E R E D B Y
Product Analytics for eCommerce
The #1 eCommerce intelligence platform for your sales and marketing
teams.
Quickly spot what works and what doesn’t on your store. Drive more conversions.
www.minewhat.com >>
F R E E S I G N U P