Short description of issue
Create groups of colours using metaobjects
Reproduction steps
n/a
Additional info
I’ve set up three metaobjects - each representing a colour group (e.g. Popular, Heather, Modern) - and each contains a list of colour references.
On the product page, I’d like to group the product’s available colour variants under these metaobject-defined groups, ideally displaying them as tab-like panels (one tab per group).
I can retrieve the product’s colour variants and I can access the metaobject data, but I’m struggling to figure out how to merge them efficiently — essentially splitting the variant colours into the groups defined by my metaobjects.
Has anyone implemented something similar, or found a clean Liquid/JS pattern to handle this kind of dynamic grouping?
Any help or pointers would be massively appreciated.
I’ve attached an example similar to what I’m looking for, along with my metaobject setup.
What type of topic is this
Troubleshooting
Upload screenshot(s) of issue
Hey @ConduciveMammal,
I will describe how I would organize the data for the example you provided as I’m not entirely sure what you need specifically. In this instance, I would have two metaobjects and a metafield:
The color_group metaobject would contain a title and a reference to the metaobject you use for the color product option
The color_tab metaobject would contain a title and a color_group list reference
The data.color_tab_list metafield would be of metaobject list type and reference color_tab entries
On the contribution side, you create color_group entries with all corresponding shades / color selections (i.e. “Performance Textured Weave” in the example). Not specific to your product, to all colors that correspond. Then, I would create color_tab entries that groups color groups together (i.e. “By fabric type” in the example). Finally, you assign your groups to the product. If you mapped your colors well, you should avoid the trap to create metaobject entries on a product basis 
On the development side, you loop over the tabs, loop over the groups and for each color reference, you check if the current product uses this color or not. If not, you skip the color and if the product uses the color, you setup everything so that you can point to the correct variant on click.
Of course, depending on your needs, the implementation may vary but that’s the gist of it ! Hope it helps !
