In almost all major ecomm sites, product variants are un-selected first. At first i thought it was annoying, as a visitor pov.
Then i realize it's for the better of both parties. When the featured image is there, they might think that's the one they selected. But it may not always be the case. Some people blindly click addtocart without even looking or checking the color or size. Furthermore they might tap on the image carousel and think they actually selected that particular option.
So the best method is to prompt them with a "please select a ... first" when they click addtocart.
In addition, the variant selected should be shown bigger than the featured image product when they are previewing their cart. And of course also shown bigger on the checkout page.
When they click on the items in the cart/checkout they should be directed to the individual item, not just the main page. So the page should be variant?=123
Shopify and amazon use all the above and it provides a better shopping experience. Also notice, the name of the selected color is displayed.
https://www.opentest.co/share/751b8680b21e11e697503368643fa78e
This is the flow after that > https://www.opentest.co/share/5d34ae50b22011e6b452734bd66e1d0a
What happens is:
1. Buyer is prompt to select
2. Adds to cart, and is brought directly to cart (suggestion, bring buyer to cart page instead of overlay modal).
3. He is shown more related items that can increase cart value.
4. When he views cart, he is able to check for what he actually selected. The image shows clearly what is selected. And once clicked will bring directly to the exact variant.
Then i realize it's for the better of both parties. When the featured image is there, they might think that's the one they selected. But it may not always be the case. Some people blindly click addtocart without even looking or checking the color or size. Furthermore they might tap on the image carousel and think they actually selected that particular option.
So the best method is to prompt them with a "please select a ... first" when they click addtocart.
In addition, the variant selected should be shown bigger than the featured image product when they are previewing their cart. And of course also shown bigger on the checkout page.
When they click on the items in the cart/checkout they should be directed to the individual item, not just the main page. So the page should be variant?=123
Shopify and amazon use all the above and it provides a better shopping experience. Also notice, the name of the selected color is displayed.
https://www.opentest.co/share/751b8680b21e11e697503368643fa78e
This is the flow after that > https://www.opentest.co/share/5d34ae50b22011e6b452734bd66e1d0a
What happens is:
1. Buyer is prompt to select
2. Adds to cart, and is brought directly to cart (suggestion, bring buyer to cart page instead of overlay modal).
3. He is shown more related items that can increase cart value.
4. When he views cart, he is able to check for what he actually selected. The image shows clearly what is selected. And once clicked will bring directly to the exact variant.
Last edited:
