Skip to main content
Dependent variants are the specifications of a product that build on one another. For clothing, the first variant might be the size. Only once it is chosen does the dependent variant “color” become available. “Dependent” means two things here. First, each choice can change the price, image, product number, or description. Second, the combinations usually do not exist in full, so not every color is available in every size. For the display in the shop, three display types are available. Which one fits depends primarily on the number of variants and their combinations.
How to create variants and their combinations in the first place is described in the admin interface documentation. This page only covers the display in the template.

​
Display as select lists

The customer chooses the dependent variants one after another from select lists. When the product is opened, only the first select list is initially available, for example the sleeve length. Only after this choice does the second appear, for example size and collar width. Example:
Listbox1Selection of the first variant “sleeve length” when the product has been opened.
Listbox2Selection of the second variant “size/collar width” after the “sleeve length” variant has been chosen.
This is the only display without a quantity limit. It is therefore the right choice as soon as a product has many variants or many combinations. Guide: Display dependent variants as select lists The workflow matches the select lists, except that the customer chooses via links instead of from a select list. For example, the sizes appear first, and after a size is chosen, the colors available for it appear. Example:
Link1Selection of the first variant “size” when the product has been opened.
Link2Selection of the second variant “color” after the “size” variant has been selected.
The advantage is that all values are visible at the same time and a single click is enough. That is exactly why this display is only suitable for manageable quantities, up to 50 variants. Guide: Display dependent variants as links

​
Display as a table

Here, the step-by-step selection is dropped. The customer sees all possible variant combinations at once in a table, for example the colors blue and green in the sizes 27 cm and 32 cm. Example: Display of all variant combinations of a product with the dependent variants “color” and “size” and the variant values “blue” and “green” or “27cm” and “32cm”. Tabelle This is the clearest display when the customer wants to compare. It, too, is limited to a maximum of 50 variants. Guide: Display dependent variants as a table