How to present product variants so shoppers pick the right one
When variants differ by more than color — capacity, power, dimensions — shoppers need to see what changes. Learn when to use variant specifications, variant selectors and variant comparison tables.
On many stores, variants are simple: the same t-shirt in five colors. But for a lot of products, variants are really different products sharing a page — a backpack in 20, 30 and 40 liters, a laptop with 16 or 32 GB of RAM, a table in three lengths.
When variants differ on specifications, a single, static product page isn’t enough. Shoppers need to understand what changes from one variant to the other. Here is how to present it.
Variants that change more than their appearance
Ask yourself: between two variants, does anything other than the look change? Typical examples:
- Capacity: storage, volume, number of seats
- Size and dimensions: length, width, frame size
- Weight, which often grows with size
- Performance: power, battery, speed
- Price, which usually follows the rest
If the answer is yes, these differences deserve a place in your specifications.
Level 1: specifications that follow the selected variant
The first step is to make the specification table react to the variant selector. When a shopper selects “40 L”, the capacity row shows 40 L, the weight shows the weight of that variant, and the price updates.
This requires storing those values per variant rather than per product. In Specs & Compare, you can create per-variant attributes directly in the app, or connect variant metafields — with an automatic fallback to the product value when a variant doesn’t need its own. Learn how per-variant attributes work.
Specification tables then refresh automatically when the variant changes.
Best for: variants with a few differing values, where shoppers pick one variant at a time.
Level 2: a variant selector inside comparison tables
When you compare several products side by side, each with variants, which variant should each column show? The first available one may not be the one the shopper is considering.
A variant selector in each column lets shoppers compare exactly the configurations they hesitate between: the 30 L version of backpack A against the 40 L version of backpack B.
A few refinements help:
- hide the selector for products whose variants share the same specifications,
- exclude variants that can’t be compared meaningfully, such as a “custom” configuration,
- make the main product’s column follow the variant selected on the page.
See how to set up the variant selector.
Best for: comparing different products that each come in several versions.
Level 3: a dedicated variant comparison table
When variants are the main decision — “Which storage capacity do I need?” — show them side by side in a variant comparison table: one column per variant, with its image, price and specifications.
Shoppers immediately see what the extra money buys: 30 more liters, 200 g heavier, $40 more. It’s a transparent way to upsell, and it prevents buying the wrong version.
Tips for effective variant comparisons:
- select the variants that matter — not necessarily all of them,
- enable a differences switch, since variants share most of their specifications,
- show it in a modal behind a “Compare variants” button if your product page is already long.
Learn about variant comparison tables (Pro plan).
Best for: products whose variants differ significantly in capacity, size or performance.
Choosing the right approach
| Situation | Recommended approach |
|---|---|
| Variants differ only by color or pattern | Product-level specifications, color swatches |
| A few values change per variant | Per-variant attributes in the specification table |
| Comparing different products that have variants | Comparison table with a variant selector |
| Choosing between versions of the same product is the main decision | Variant comparison table |
These approaches combine well: a specification table that follows the selected variant, plus a variant comparison table for shoppers who want to see everything side by side.
Don’t forget the data work
Variant specifications are only as good as the data behind them. A few habits save time:
- store a value on the variant only when it differs; keep shared values on the product,
- use typed values (dimension, weight, number) so they can be converted and compared,
- keep variant option names consistent across products (“Capacity”, not “Size” here and “Volume” there).
Key takeaways
- When variants differ on specifications, show what changes.
- Make specification tables follow the selected variant.
- Add variant selectors to comparison tables to compare exact configurations.
- Use a variant comparison table when the choice between versions is the main decision.