Product variants: colour swatches or a selection list?
Someone can look at a black lamp and accidentally add its white version to a basket. When the product name stays the same, the relationship between swatch, size, price and photograph becomes crucial. This guide concerns choosing a version of one product, rather than filtering different products. The cover is an original interface study, not a photograph or specification from a client’s catalogue.
List valid combinations before drawing the controls
Begin with the product data. Which colours are manufactured in which sizes? Does changing a material change the product code or fulfilment conditions? Imagine two body colours, two diameters and two cable lengths for a sample lamp. Do not assume every mathematically possible combination is actually sold.
Give each confirmed combination its own record. Sales terminology and interface labels should describe the same thing. Keep mock prices out of production data. Separate a combination that is temporarily unavailable from one that is never manufactured; these situations require different explanations.
Choose the control around the options
Three named colour swatches can support quick comparison. Similar beige tones need understandable names, not just slightly different squares. A longer size list may fit a selection menu more comfortably. Keep units visible in the field label or its options rather than expecting customers to guess them.
MDN documents the standard select element as a menu of options that can be associated with a label. Compare a custom component with that baseline before commissioning one. Plan a textual selected state as well as a coloured border, and review touch, keyboard and assistive-technology use together.
Try a size control
Make changing information follow the same choice
If a colour choice requires a different photograph, establish that relationship in the product data. Label representative imagery honestly. When size affects price, drawings or included parts, show the relevant changes clearly rather than relying on a tiny marker beside the control.
If changing size invalidates a previous colour choice, do not silently substitute another colour. Explain what needs attention. On a quotation site, a summary containing the product code, colour and dimensions gives the sales team more context than “this product”. The visible summary and submitted enquiry must use the same selection.
Decide where the selection should survive
What happens after opening the gallery, returning to the page or sharing its link with a colleague? Agree these behaviours before development. Separate pages for every variant are not an automatic requirement; consider content, commerce infrastructure and sharing needs together.
Review the unselected state, a valid combination and an unavailable combination. Include long translated labels and a narrow screen in the acceptance examples. Use clearly labelled test products rather than personal order information. Ask the team to record what changes and what remains selected after each action.
Approve the resulting product summary
Liking a control is different from selecting the intended variant. Ask a reviewer to choose a specified colour and size, then describe what they are requesting. If the image and summary contradict each other, repair the data relationship before adding more visual effects.
Our product-page guide covers the broader information order, while the availability guide addresses temporary absence. Include a variant matrix, state designs and acceptance checks with representative data in the e-commerce project scope.
Frequently asked questions
Should all options have defaults?
Consider a default only when it accurately represents the business’s real default and is clearly shown. Do not silently assume a size that the visitor needs to choose.
Do colour swatches need names?
Colour alone may not communicate enough. Clear names and a selected state help people distinguish similar finishes.