« Back to The Ecommerce Authority

Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

There are three common ways to display product options on an ecommerce site. Check out this basic guide to help decide which format is best for you.

ui kit Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

When it comes to displaying your product options, you’ve got several options. In fact, this decision makes a big impact on your site’s usability, as it helps reduce customer confusion as they add products to their cart.

While there are several formats to choose from, the three most common display types include: dropdown lists, checkboxes and radio buttons. Here are some quick tips to help select the most effective method for your needs:

Dropdown Lists

Dropdown lists are a popular format for showing product options, particularly for apparel retailers and sites that sell products in various colors, shapes and sizes. (This is also the default display option for Volusion sites.)

dropdown examples Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

Before deciding on dropdown lists, ask the following questions:

  • Is the option selection mutually exclusive? In other words, is there only one option that customers can select, such as the color of a shirt? If so, a dropdown list is appropriate.
  • Are the listed options adjectives or nouns? If yes, try using a drop down list. Sizes, colors and quantities are all good examples of this idea.
  • How much space to I have to display my options? If your product has several options for customers to choose from, a dropdown list will save valuable real estate on your product pages and prevent customers from having to scroll through a long list.
  • Does the customer need to select from multiple sets of options? If your customers must select from more than one option set, dropdown lists help streamline this process while keeping the options in a simple format, like this:

using multiple options Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

Checkboxes 

Outlining product options with the checkbox display type is ideal if your customers need to select multiple items from the same option list, such as pizza toppings, or if there’s only one option to choose.

checkboxes Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

Before deciding on dropdown lists, ask the following questions:

  • Can my customer select more than one option from the same option list? Like in the example above, checkboxes are appropriate here since multiple selections can be made. But if customers can only select one option, avoid checkboxes. In the example below, note how it’s problematic for shoppers to select more than one shirt size:

customer options Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

  • Does my product only have one option? If your product only has one option, or if you’re trying to upsell customers by having them select only one option (i.e. “Add warranty for $9.95”), then a checkbox is appropriate because it’s less ambiguous and saves customers from making an extra click.

Radio Buttons 

Radio buttons are useful when shoppers can only choose one option from a short list – Microsoft recommends using radio buttons for lists that consist of 2-7 options.

Before deciding on radio buttons, ask the following questions:

  • Is the option selection mutually exclusive? Can customers select only one option? If so, radio buttons can be used.
  • How much space do you have to display your options? Since radio buttons take up more real estate on product pages as the number of options increases, take into account how much room you want to dedicate to displaying your options.
  • How much attention do you want drawn to your options? If you decide that outlining each of your options is a good use of space, radio buttons are appropriate. Or, if you’d like to highlight the contrast between two alternatives, radio buttons might work better than a dropdown list.

 

At the end of the day, the most important consideration is your customer. The end goal is to help efficiently guide them through your options without causing any confusion. By doing so, your product pages are much more likely to convert. And that, after all, is the best option anyone can hope for.

Happy selling!
-Matt Winn, Volusion

 

 Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options

About

Matt Winn is Volusion’s Senior Marketing Communications Manager, where he helps oversee the organization’s branding and communications efforts. Matt has created hundreds of articles, videos and seminars on all things ecommerce, ranging from online marketing to web design and customer experience. Beyond being a certified nerd, Matt is an avid college football fan, enthusiastic home cook and a self-admitted reality TV junkie.

13 Responses to “Dropdowns, Checkboxes or Radio Buttons? A Quick Guide to Displaying Product Options”

  1. Joe

    Dropdown boxes, how did you do First, choose a color in the dropdown?

    Reply
  2. Jason

    Hi Matt, is there anyway to make the primary and secondary images change along with the color options? Thanks!

    Reply
    • Matt

      Hi Jason, thanks for reading. While you can have a different swatch image for each option, which allows the primary image to change, the secondary image currently doesn’t do the same. If you’d be so kind to share this feedback with our Product team as a feature request, you can do so at http://ideas.volusion.com. I’ll also pass this along to them as well. Thanks! -Matt

      Reply
    • Matt

      Hi Stephen, you currently have the ability to hide child products when they’re out of stock using the Smart Match system, so at least they won’t appear to shoppers browsing your products. At this time the system just hides the items, as opposed to greying them out, but like I mentioned to Jason, we’d love to get your ideas to our Product team via ideas.volusion.com. Thanks for reading! -Matt

      Reply
      • Cindy

        Hi Matt, I like Stephen’s suggestion in regards to being able to grey out of stock items as oppose to simply hiding them. This is so that our customers are aware that we normally stock these items and perhaps they could send us an email to request for that particular size/colour if it is out of stock.

        Reply
  3. Phil

    How do you apply css styles to these elements? I can’t get access to the content area sufficiently to apply elegant styling such as shown in the first image above.

    Reply
    • Matt

      Hi Phil, while you do have access to much of the CSS to help style your website, I’m not 100% sure which CSS element that you’re referring to in this case (I know just enough CSS to get me into trouble), but you can submit your idea for more CSS access to ideas.volusion.com where our Product team can review it in further detail. Thanks! -Matt

      Reply
  4. Melanie

    I can really use the idea presented above of checkboxes for pizza toppings, but I am struggling to figure out how to implement this. It seems that I have to create one option category (and then one option), for every topping. Is that truly the case? Seems to me that “Toppings” should be the category with multiple options. I want each option to map to a unique product. Am I missing something here?

    Reply
    • Melanie

      regarding my recent comment… even when I set it up that way, it doesn’t work. Can someone provide some steps for how to set it up? According to V’s knowledge base instructions, you can’t do what is presented in the slide!

      Reply
  5. Nico

    I am making options and selecting them to be shown as radio buttons. However when I add the option to my product, on the front end it is only showing up as a dropdown. Is there something I am missing to make the radio buttons show up?

    Reply

Leave a Reply