How we build themes with an intuitive product option selector experience

Helping your customers arrive at the perfect product that is in-stock and matches their needs—a UX case study

Your product page is the most important page on your site and can make or break your customer’s online shopping experience. Amongst the most common frustration we’ve heard about from merchants, is the inability to accurately show customers what option selection combinations are available.

To solve that problem, we recently made several improvements to our theme’s product pages, including a better product option selection experience that enables customers to make quicker, more informed decisions.

In this case study, we detail the results of our investigation into product option selector behavior and why it has resulted in such a delightful experience in the latest versions of our themes.

What pieces are involved in product customization?

The full range of product option selection experience can vary from simply selecting a single t-shirt size to an in-depth, multi-page configuring – like something akin to what is seen when configuring a new car online. In our case, we are exploring what it takes to create a delightful option select experience with three or fewer groups of options, such as t-shirt size, color, and length.

A 3-option group selection is considered simple enough to fit within the 'Buy' section (next to the “Add to Cart” button) without dominating the page and distracting customers from other elements, such as product images, pricing, and description.

When building out a product option selector experience, we generally have the following variables to accommodate:

• Enabled + Disabled states for option fields We want to make sure we're communicating which options correlate to an in-stock and out-of-stock variant.
• 1-3 Groups of Options: This is what is officially supported by Shopify out of the box and considered simple enough to be inline in the product page without the need for its own distinct page or a multi-stage flow.
• Order of Options Group: Options should be presented in order of importance, e.g. if a product's color is more likely to influence a purchase decision than size, it should be presented first.
• Dropdowns vs Buttons: Buttons are generally preferred over dropdowns. They showcase more information and require minimal customer interaction.
• Page state updates based on current selection: Changes in product options often trigger updates across the page, including the “Add To Cart” enable/disable state, product images, and product pricing.

The Basic Implementation of Product Option Selection

Let’s take a look at the bare minimum implementation a store might need to provide option selection to their customers:

• Show options as buttons so that a customer can view all potential combinations at once.
• Button state is based on the overall availability of variants. If all variants for that option are unavailable, it will be disabled.
• Emits events that other parts of the product page can listen for an update accordingly, e.g. the Add To Cart button is updated based on variant availability.

Try out the basic implementation in the demo below! How does your experience change from 1 → 2 → 3 option groups?

The basic implementation works well when there is only 1 option group. Since all variant availability is reflected by the option selectors, it's easy to know what is available.

Things start to become difficult with more option groups. Available combinations of options are not obvious, and the customer is left to click through options to check availability. This problem is even more obvious when there are only a few options overlapping between available variants.

Enable and disable options based on availability

Something that is lacking in the basic implementation is real-time indication of which options are available to the customer. Correctly enabling and disabling options is the biggest frustration expressed by merchants, especially with a product that has a large number of options to choose from and only a few of them in stock.

After several iterations and tests with merchants who were having problems with their current setup, we arrived at the following approach:

• Assume options are selected in order: Since all three option groups are visible at once, there is nothing stopping a customer from starting their selection process with the second or third options group. After testing we discovered that most customers are most familiar with a serial selection behavior, e.g. select option 1, then select option 2, and finally select option 3. The enabling and disabling of our options should match with this approach.
• Options in the first group remain permanently enabled or disabled based on availability: As the main choice in the series, options in the first group will never change between enabled or disabled after page load. For example, if 'color' is our first option group and there are no 'red' variants in any sizes or lengths, the red option remains permanently disabled. Vice-versa, if there is at least one available variant in 'blue' that option remains permanently enabled.
• Subsequent options are enabled or disabled based on previously selected options: Options in the second group are filtered based on the first selection. Similarly, options in the third group are enabled or disabled based on the combined selection of the first and second options. For example, if 'red' and 'extra-large' are selected as the first two options (color and size) and 'length' is the third option, we should only enable lengths that are available with red + extra-large variants.

A customer now has a clear indication of what variants are available as they select different options. Hooray! We’re getting closer to an intuitive experience!

If a customer changes a previously selected value, such as switching from 'Black' to 'Blue', there is a chance that the subsequently selected options will result in a sold-out variant. This can be confusing since 'Blue' seems to be available.

Automate variant selection based on availability

For a product with 3 option groups, a customer might encounter situations where they select an option that appears to be in stock, but is later presented with a 'Sold Out' buy button. This can happen when subsequent option selections result in a sold-out variant. This scenario can be frustrating and ultimately results in the customer having to change his options selection multiple times before ending up with an available product variant.

Let’s help them out.With a little extra behind-the-scenes automation, we can reduce the number of actions necessary for a customer to land on an available variant After several iterations and tests with merchants, who were having problems with their current setup, we arrived at the following approach:

• Be mindful of how much automation is added. Too much ‘magic’ is dangerous and can make the customer feel like they don't have full control of their selection process, and potentially result in the wrong variant being added to the cart.
• Only auto-select option in current option groups, never to the previous groups. This has the benefit of further enforcing selecting options in order.
• Auto-select a variant that results in the fewest changes in selected options. Earlier selections are more important than later selections.

Future improvements we’re considering

Here are some additional optimizations we’re thinking about rolling out at Archetype Themes but still need some investigation and testing before we decide to roll them out:

• Showing/hiding option groups so they are selected in order: The ultimate way of making sure options are selected in order is to present or reveal them one at a time.
• Hiding unavailable options: It can be argued that showing unavailable options gives the customer more information than they need. Why not hide options that are not needed?
• Hiding option selection when only one variant remains: Similar to hiding unavailable options, why show any options selectors if they are not needed?

Wrapping up

We now have a variant picker that:

• Works flawlessly for products with up to 3 groups of options, e.g. color, size, and length
• Intuitively shows what option combinations are in-stock
• Reduces the likelihood of arriving on a sold-out variant
• Minimizes the number of clicks needed to arrive on an in-stock variant

All of what we mentioned here is already available in all of our themes at Archetype Themes. If you like what you see, consider trying one of our themes to use for your next Shopify online store project!

Creating a delightful online purchasing experience for shoppers is no easy task, and product option selection is no exception. What are the biggest challenges you have faced with option selection in your own projects?

Questions? Comments? Want to continue the discussion? Reach out to me on Twitter @thommaskelly! Try one of our themes