Motta Industries Blog

Offering choices should make shopping easier. A shirt in five colors, a laptop with three memory options, a gift bundle at a better price or a made-to-order table with custom dimensions can all help shoppers get exactly what they want. But choices can also confuse. Shoppers cannot tell which option is selected, prices jump unexpectedly, a size shows as available until checkout, or a configurator asks so many questions that people give up.

This guide covers how to present variants, bundles and product configurators so shoppers understand what they are buying, what it costs and whether it is available. It also covers accessibility, structured data and the pricing practices that undermine trust.

Variants, bundles and configurators

These three ways of offering choice work differently and fail in different ways.

Variants are versions of the same product that differ in one or more attributes, such as size, color, material or capacity. Each variant usually has its own stock level, and sometimes its own price and images.

Bundles group two or more products together, often at a combined price. Examples include a camera with a lens and bag, a skincare set or a starter kit.

Configurators let shoppers build a product step by step, choosing options such as dimensions, finishes, components or personalization. They are common for furniture, custom apparel, signage, computers and made-to-order goods.

Each needs clear design, accurate data and honest pricing, whatever platform your store uses.

Designing variant choices people understand

Variant selection is one of the most frequent points of confusion on product pages. A few principles help.

Make the current selection obvious. Selected options should be clearly highlighted, and the product image, price and availability should update immediately to match.

Show availability before the click. If a size is sold out, mark it on the option itself rather than letting shoppers select it and then discover it is unavailable.

Use the right control. Color swatches suit visual choices. Buttons work well for a handful of sizes. Dropdowns are better for long lists but hide options, so use them sparingly.

Show price differences clearly. If larger sizes or premium materials cost more, state the difference near the option.

Keep images in sync. When a shopper picks a color, show that color. Mismatched images are a common reason for returns. Show close-ups of textures and finishes too, since these are hard to judge from a small thumbnail.

Give each variant a stable URL when useful. This lets shoppers share or bookmark a specific option and helps search engines understand your product range.

Bundles that feel like a good deal

Bundles can raise order value and help shoppers who want a complete solution. They can also feel like a trick if the value is unclear.

The UK Competition and Markets Authority’s April 2022 discussion paper on online choice architecture describes bundling as when the choice architect groups two or more products or services in a single package at a special price. The paper lists bundling among practices that can harm consumers in certain circumstances while noting that most of these practices can be used beneficially and often are. It treats some practices, such as drip pricing, as almost always harmful, explaining that showing the total price in increments through the purchase process can cause additional fees to go unnoticed.

To keep bundles helpful:

• List exactly what is included, with images of each item.
• Show the bundle price alongside the total if items were bought separately, using real current prices.
• Let shoppers swap or remove items when practical, and show how the price changes.
• Make it clear whether bundle items can be returned individually.
• Avoid adding items to the cart by default that the shopper did not choose.

Configurators without the confusion

Configurators can be the best shopping experience on a site or the most frustrating. The difference lies in structure and feedback.

Break it into clear steps. Group related choices together and show progress, so shoppers know how many steps remain.

Start with sensible defaults. Preselect common options so shoppers can finish quickly, while making it easy to change them. The CMA paper describes defaults as predefined settings consumers must take active steps to change, and notes they can help consumers avoid being overwhelmed by numerous active choices. Use defaults to help, not to push expensive add-ons.

Show a live preview and running total. Shoppers should see what they are building and what it costs at every step, including any extra charges for options.

Explain constraints. If some options cannot be combined, disable them with a short explanation rather than showing an error at the end.

Remember earlier answers. Never make shoppers re-enter information they have already provided.

Summarize before purchase. Show every selected option, the final price, any delivery estimate and the return policy for custom items before checkout.

Accessibility for every option

Variant pickers, swatches and configurators are interactive components, and they must work for everyone, including people using keyboards, screen readers, magnification or touch screens with limited dexterity.

The W3C’s Web Content Accessibility Guidelines 2.2, published as a Recommendation on 5 October 2023, include several success criteria that apply directly:

• On Input (3.2.2): changing the setting of a component should not automatically cause a change of context unless the user has been advised beforehand. Picking a color should not unexpectedly send shoppers to a different page.
• Labels or Instructions (3.3.2): labels or instructions are provided when content requires user input. Every option group needs a clear label, such as “Size” or “Finish.”
• Error Identification (3.3.1): if an input error is detected, the item in error is identified and described in text.
• Non-text Contrast (1.4.11): visual information needed to identify components and their states, such as the border showing which swatch is selected, needs a contrast ratio of at least 3:1 against adjacent colors.
• Target Size (Minimum) (2.5.8): new in WCAG 2.2, pointer targets should be at least 24 by 24 CSS pixels, with certain exceptions such as sufficient spacing.
• Redundant Entry (3.3.7): also new, information previously entered in the same process should be auto-populated or available to select, with limited exceptions.

Color swatches deserve special care. Give each a text name that screen readers announce, and do not rely on color alone to show which option is selected.

Structured data for variants

Search engines also need to understand how variants relate. In February 2024, Google added structured data support for product variants. The announcement noted that many products are sold in different variations, such as sizes, colors, materials or patterns, and that electronics come with different memory sizes, screen sizes and processors.

The post explained that variants must be grouped under one parent product, using the Schema.org ProductGroup type with new properties: hasVariant to nest variants under their parent, variesBy to list the variant-identifying properties and productGroupID for the parent identifier. It described support for both single-page and multi-page variant websites, and new validations in Search Console reports and the Rich Results Test. It also noted that variant structured data complements merchant center feeds.

For store owners, the practical point is that variant markup should come from the same product data that drives your pages, so prices and availability match what shoppers see.

Honest pricing throughout

Pricing is where choice design most often breaks trust.

• Show the starting price clearly, and update it as options are chosen.
• Include required fees early, rather than revealing them at checkout.
• Label optional add-ons clearly as optional, and do not preselect paid extras.
• Make sure sale prices apply to all the variants you say they do.
• Keep delivery estimates accurate for custom and made-to-order items.

The CMA paper’s description of drip pricing is a useful warning: when the true total appears only gradually, shoppers may feel misled even if every fee was technically disclosed.

A fictional example

Consider an invented home goods store selling cushions in twelve colors, three sizes and two fill types. Its old product page used three dropdowns, showed one stock photo regardless of selection and only revealed that a combination was out of stock after shoppers clicked add to cart. Support received frequent emails asking which color was which, and returns for wrong colors were high.

The store replaced the color dropdown with labeled swatches, updated the main image for each color, marked unavailable sizes on the buttons and showed the price change for premium fill next to that option. It created a three-cushion bundle that listed each item, showed the separate total and let shoppers pick colors for each cushion. It also made sure swatches were keyboard accessible with text names, and added variant structured data generated from its product catalog.

In this fictional scenario, color questions to support dropped noticeably, and fewer cushions came back because they were not the expected shade.

Test with real shoppers

Choice design is hard to judge from the inside. Your team knows what every option means, so confusing labels and hidden steps rarely stand out to them. Watching a few real people try to buy is often the fastest way to find the problems.

Ask a handful of customers or friends who have never seen your site to choose a specific variant, build a configured product or compare a bundle with buying items separately. Watch where they hesitate, what they misread and which questions they ask out loud. Review support emails and return reasons for patterns, such as repeated questions about sizes or colors. Fix the most common issues first, then test again on a phone and with a keyboard only.

Building it on your platform

Most store platforms support variants natively, but bundles and configurators often need extra work, from apps and plugins to custom code. Careful e-commerce development can keep inventory, pricing and structured data in sync across complex options. If your store runs on WordPress, thoughtful WooCommerce design can turn variant data into clear, accessible choices. And broader e-commerce strategies help decide which options, bundles and configurations are worth offering at all.

A quick checklist

• Selected options are obvious, and images, price and availability update instantly.
• Sold-out variants are marked before shoppers select them.
• Bundles list contents, show real separate totals and avoid preselected extras.
• Configurators use clear steps, helpful defaults, live totals and a final summary.
• Every option group has a label, and swatches have text names.
• Selected states have at least 3:1 contrast, and targets are large enough to tap.
• Earlier answers are remembered, never re-requested.
• Variant structured data matches visible prices and availability.

The bottom line

Choices help shoppers only when they are easy to understand. Show what is selected, what it costs and whether it is available at every step. Make bundles transparent, keep configurators simple and make every control accessible. When your options are clear, shoppers buy with confidence and fewer of them need to contact support or send items back.