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

<p>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 &amp; 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.</p>

<p>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.  </p>

CC BY-SA 3.0
2016-10-16T09:18:43.080Z
I appreciate that confirmation. Knowing it's not something I'm completely missing is good. I'm sure I can build something suitable. Thanks
Stian Karlsen
CC BY-SA 3.0
2016-10-16T00:19:49.730Z
2016-10-16T00:19:49.730Z
Jeremy Daalder
<p>Having a really difficult times with variants.</p>

<p>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.</p>

<p>Each variant has their own stock level, differing prices, image etc.</p>

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

<p>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.</p>

<p>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.</p>

<p>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.</p>

<plugin-craftcommerce>
Multiple variants as "one product"
# Multiple variants as "one product"

(Asked by: username_0 on 2016-10-15)

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.

**Tags:** plugin-craftcommerce

---

## 1 answers

### Answer by username_1 on 2016-10-16. Score: 1 | Accepted answer

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.

> **Comments:**
> **username_0**: I appreciate that confirmation. Knowing it's not something I'm completely missing is good. I'm sure I can build something suitable. Thanks  

---

