Having a really difficult times with variants.

Classic t-shirt example: The t-shirt comes in red and blue, where each color has 4 sizes. That means I create 4 variants for red, and the same for blue, thus the product "T-shirt A" contains 8 variants.

Each variant has their own stock level, differing prices, image etc.

For size I created a dropdown field and attached to the variants ("Small, Medium, Large" etc).

I can output all variants at the same time on the page, thus allowing the user to select which one they want, but it's not very slick.

How can I make this look like a single product to the user, and simply have a dropdown for Size and Color? When the user selects something in the dropdown, the size and color would update on the page. More importantly, Craft also has to check the color/size combo to see if it's in stock, and reflect that on the page as well.

In Expresso Store (EE) this was easily done with "modifiers", but I'm sure it's even easier in Craft, I just can't wrap my head around it without some help.

1 Answer 1


Commerce makes no assumptions about, but also provides not real support for, the front end of your store (other than some simple example templates).

It's up to you to build the UI you're looking for - be it a table of variants, or some sort of multi/select type system. You simply retrieve the product & variants (checking availability as you do) - and then in your twig code build the UI you want. And if you want dynamic updates of pictures etc, without page reloads, you'll use JS to achieve this.

Super flexible, and quite deliberately built this way to allow complete freedom in content presentation, like Craft itself, but definitely a little less 'for free out of the box' than with some systems.

  • I appreciate that confirmation. Knowing it's not something I'm completely missing is good. I'm sure I can build something suitable. Thanks Commented Oct 16, 2016 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.